رویداد hover در جی کوئری-درس نهم
آموزش جی کوئری :
در این جلسه از آموزش های جی کوئری به معرفی و آشنایی بیشتر با یکی از پرکاربرد ترین عناصر زبان جی کوئری در طراحی افکت های زیبا بنام رویداد hover خواهیم پرداخت همین طور سعی می کنیم با آوردن مثال کاربردی، استفاده از رویداد hover را برای شما ملموس تر سازیم . با وبیار همراه باشید.
رویداد hover درجی کوئری:
در رویداد hover شما میتوانید از وجود دو تابع به صورت همزمان در هنگام عبور موس از روی عنصر مورد نظر بهره مند شوید. تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروج موس از روی عنصر اجرا می شود .
به عبارت دیگر شما میتوانید تعیین کنید زمانی که موس بر روی عنصر رفت چه اتفاقی رخ دهد و زمانی که موس از روی عنصر برداشته شد چه اتفاقی بیافتد . یعنی دو حالت را تعریف کنید.
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).hover ( inFunction , outFunction ) ;
selector : selector ، تعیین کننده عنصری است که می خواهیم رویداد hover هنگام عبور از روی آن اتفاق بیفتد .
inFunction : این تابع زمانی اتفاق می افتد که موس بر روی عنصر مورد نظر وارد می شود . یعنی زمانی که رویداد mouseenter رخ می دهد .
outFunction : این تابع زمانی اتفاق می افتد که موس از روی عنصر مورد نظر خارج می شود . یعنی زمانی که رویداد mouseleave رخ می دهد .
نکته مهم : اگر فقط یک تابع در دستور رویداد hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .
برای درک بهتر نحوه عملکرد رویداد hover به مثال پر کاربرد ساخت زیر منو توجه فرمایید:
فرض کنید ، یک منو داریم که با قرار گرفتن موس روی منو یک زیر منو بازمی شود و زمانی که موس از روی منو برداشته شد ، زیر منو حذف یا به عبارتی پنهان شود.
ابتدا منو را با کد html پیاده سازی می کینم:
<div class="menu">
<ul>
<li>
<span> منوی اصلی - خدمات وبیار </span>
<ul class="children">
<li>زیر منوی اول – طراحی سایت </li>
<li>زیر منوی دوم – طراحی فروشگاه اینترنتی </li>
<li>زیر منوی سوم – سئو سایت</li>
</ul>
</li>
</ul>
</div>
درکد بالا منوی ما یک گزینه دارد که در داخل آن عنصر span قرار گرفته و شامل زیر منویی با کلاس children است.در ابتدا باید با css زیر منو رو پنهان کنیم تا با جی کوئری و رویداد hover آن را نمایان سازیم.
.menu{
margin: 15px;
text-align: right;
direction: rtl;
}
.menu > ul{
margin: 0;
padding: 0;
list-style: none;
}
.menu > ul > li{
padding: 15px;
font: 13px/25px yekan;
}
.menu > ul > li span:hover{
cursor: pointer;
background-color:red;
}
.menu > ul > li .children{
display: none;
}
با استایل بالا سعی شد کمی منو را زیباتر کنیم و هم زیر منو را مخفی سازیم. اکنون با جی کوئری تعریف می کنیم که زمانی که موس روی منوی اصلی قرار گرفت زیر منو باز شود و زمانی که موس برداشته شد زیر منو بسته شود.
$(document).ready(function(){
$(".menu > ul > li > span").hover(function(){
$(".children").slideDown("slow");
},function(){
$(".children").slideUp("slow")
});
});
در کد بالا تعریف کردیم که با قرار گرفتن موس روی span عنصر children با رویداد slideDown بصورت کشویی باز شود و زمانی که موس از روی span برداشته شد، عنصر children با رویداد slideUp بصورت کشویی بسته شود .
سعی کنید یک بار این کد ها را از ابتدا مرور کرده وخود آنها را پیاده سازی کنید و یا حتی حالت های مختلفی بر روی توابع hover آن از جمله تغییر فونت ، رنگ فونت و یا پس زمینه را امتحان کنید.
ممنون از همراهی شما وبیاری های گرامی .
فراموش نکنید تیم وبیار با وجود داشتن تجربه فراوان و کارشناسان زبده می تواند بهترین انتخاب برای طراحی سایت و سئوسایت شما باشد.
طراحی سایت چند فروشندگی آراد پیپر طراحی سایت چند فروشندگی آراد پیپر با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت اصفهان و سئو سایت اصفهان وب یار است. این سایت در زمینه ی سایت فروشگاهی پخش کاغذ و لوازم التحریر، لوازم جانبی موبایل، کارت ویزیت، پایان نامه و نیز ترجمه فعالیت دارد. سایت فروشگاهی آراد پیپر برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف مرکز پخش کاغذ و لوازم التحریر، لوازم جانبی موبایل، کارت ویزیت، پایان نامه ، ترجمه و سایر حوزه های فروشگاهی می باشد بسیار مناسب است. آدرس سایت جهت مشاهده تمامی امکانات داخلی و گرافیکی سایت aradpaper.com طراحی سایت چند فروشندگی آراد پیپر منجر به افزایش فروش و درآمد افراد در حوزه های مختلف کسب و کار می شود. در ادامه با هم امکانات سایت آراد پیپر که به تازگی توسط تیم طراحی سایت وب یار طراحی شده است را بررسی می کنیم. اگر شما هم نیاز به طراحی سایت و طراحی سایت فروشگاهی دارید بهتر است طراحی سایت اختصاصی فروشگاهی آراد پیپر را ببینید تا انتخاب آگاهانه تری در مورد انتخاب امکانات سایت خود داشته باشید؛ چرا که ممکن است در میان انتخاب امکانات سایت خود برخی از نیازهای سایت از خاطر شما دور مانده باشد. ویژگی طراحی سایت چند فروشندگی آراد پیپر از ویژگی های بارز طراحی […]
طراحی وایرفریم در فوتوشاپ طراحان حرفه ای ترجیح می دهند از فوتوشاپ برای ترسیم وایرفریم استفاده کنند. هر چند ممکن است برای تازه کارها طراحی با فوتوشاپ مشکل باشد اما جذابیت کار با ابزارهای فوتوشاپ هرکسی را شیفته خود می کند پس مطمئن باشید با کسب مهارت لازم و رسم چند وایرفریم در فوتوشاپ، دیگر سراغ سایر نرم افزارهای طراحی وایرفریم نخواهید رفت؛ در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا شما عزیزان را با اصول طراحی وایرفریم در فوتوشاپ بیشتر آشنا کنیم. پیشنهاد می کنیم پست دیگر ما را که درباره معرفی وایرفریم است مطالعه بفرمائید. چگونه در فوتوشاپ وایرفریم طراحی کنیم؟ قبل از شروع طراحی وایرفریم، باید از خودتان بپرسید کدام صفحه را مایلید طراحی کنید. چه چیزی آن را از سایر سایت های طراحی شده متفاوت می کند و وجود کدام عناصر در این صفحه ضروریست. حالا یک قلم بردارید و طرح اولیه خود را روی کاغذ رسم کنید تا ایده های ذهنی خود را به یک شکل قابل دیدن تبدیل کرده باشید. با این کار یک دید کلی از طرحی که می خواهید در فوتوشاپ ایجاد کنید بدست می آورید. در طراحی وایرفریم ها، سادگی و وضوح المان ها خیلی مهم است. نکاتی که باید در طراحی وایرفریم رعایت کرد: 1- به جای تصاویر از اشکال هندسی مانند […]
سفارشات در ووکامرس order in woocommerce بخش سفارشات در ووکامرس یکی از بخش های اساسی هر فروشگاه اینترنتی می باشد که یادگیری آن برای هر طراح سایت و مدیر فروشگاه اینترنتی ضروری می باشد.سفارشات در ووکامرس یکی از بحش های اساسی است و باید به بررسی آن ها پرداخت.بررسی نکردن آن ها ریسک بزرگی است! در بعضی مواقع ممکن است فاصله بین سفارش کالا توسط مشتری و ارسال آن طولانی شود. در مطلب امروز شما را با تنظیمات بیشتر بخش سفارشات در ووکامرس آشنا می کنیم. تا انتهای مطلب با تیم طراحی سایت اصفهان وب یار همراه باشید. هنگامی که یک مشتری فرآیند خرید خود را به اتمام می رساند سفارشات در ووکامرس ساخته می شوند و تنها برای بخش مدیریت و ادمین فروشگاه قابل دیدن می باشد . بخش سفارشات فروشگاه اینترنتی شامل سفارشات ، کسانی که از ما خرید کرده اند ، اطلاعات آن ها و … می باشد. برای مثال تراکنش کاربر x تا چه مرحله ای پیش رفته است؟ کدام تراکنش ها موفقیت آمیز بوده و منجر به خرید توسط کاربران شده است؟ در واقع هدف از بررسی بخش سفارشات در ووکامرس به دست آوردن اطلاعات کاملی درمورد سفارشات می باشد تا به ما در تحلیل آمار سایت کمک کند. در شکل زیر بخش سفارشات در ووکامرس نمایش داده شده است. اگر از […]
کد رنگ و استاندارد های رنگ مادر و فرزند یکی از موارد اصلی برای طراحی سایت، طراحی فروشگاه اینترنتی و اپلیکیشن انتخاب ترکیب رنگ مناسب می باشد که از اهمیت بالایی برخوردار است و می تواند بر روی تصمیم کاربر اثر زیادی بگذارد. یکی از مشکلات اکثر طراحان سایت سرسری گرفتن این مرحله از طراحی است و آنقدر که لازم است زمان بر روی این موضوع نمی گذارند. در انتخاب رنگ و استاندارد های رنگ همیشه باید توازن بین رنگ ها را در نظر بگیرید. در این مطلب قصد داریم شما را با استاندارد های رنگ آشنا و در این زمینه راهنمایی کنیم تا بتوانید سایت های جذاب برای افزایش فروش و برندینگ شدنتان طراحی کنید. چند مدل رنگ دهی داریم؟ سه مدل رنگ دهی وجود دارد که در زیر به آن ها اشاره می کنیم. استفاده از نام رنگ مانند: red,blue,black و … استفاده از کد ترکیبی (مبنای دهدهی): در این روش از رنگ دهی از کد رنگ به صورت RGB استفاده می شود. که R برای شدت رنگ قرمز،G برای شدت رنگ سبز و B برای شدت رنگ آبی است. استفاده از کد رنگ ترکیبی (مبنای 16): این روش رنگ دهی که به دلیل سادگی و دقیق بودن آن بیشترین کاربرد را دارد از فرمت #rrggbb استفاده می شود که مانند روش دوم است با این تفاوت که […]
مفاهیم پایه ای اینترنت بیشتر کاربران مایل اند از اینترنت برای دریافت اطلاعاتی درباره موضوع مورد علاقه شان، انجام امور بانکی، بازی های آنلاین و خرید اینترنتی استفاده کنند، اما شاید بیشترشان اطلاعات اندکی از مفاهیم پایه ای اینترنت داشته باشند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا به شما بگوییم اینترنت چیست و مفاهیم پایه ای اینترنت چه موضوعاتی را شامل می شود. آنچه در این مقاله خواهید خواند: . اینترنت چیست؟ مرورگر چیست؟ لینک چیست؟ ایمیل چیست؟ آی پی چیست؟ دامنه چیست؟ زون چیست؟ سرور چیست؟ HTML و CSS چیست؟ طراحی و برنامه نویسی استاتیک چیست؟ طراحی و برنامه نویسی دینامیک چیست؟ . 1) اینترنت چیست؟ اینترنت که گاهی به سادگی « نت » خوانده می شود، یک سیستم جهانی از شبکه های کامپیوتری است؛ به عبارت دیگر، اینترنت، شبکه ای از شبکه هایی است که کاربران در صورت مجاز بودن می توانند از هر کامپیوتری که در این شبکه است اطلاعات مورد نظر خود را دریافت کنند، به اشتراک بگذارند و یا حتی با یکدیگر مکالمه داشته باشند! تاریخچه اینترنت اینترنت در سال 1969 توسط آژانس پروژه های تحقیقاتی پیشرفته دولت آمریکا (ARPA) به تصویب رسید و در ابتدا با نام ARPANet شناخته می شد. هدف اولیه از ایجاد اینترنت آن بود که کامپیوترهای تحقیقاتی دو دانشگاه مختلف بتوانند با یکدیگر […]
23 نکته سئو در دنیای امروزی که همه چیز بر مبنای رسانه می باشد ، سایت و جایگاه سایت برای موتورهای جست و جو اهمیت زیادی دارد. سایت بدون سئو مانند انسانی است که در بیابانی رها شده و کسی صدای او را نمی شنود. بهینه سازی موتور جست و جو مجموعه ای از روش ها برای تغییر استراتژی وب سایت ها و پیدا کردن جایگاه سایت ها در گوگل و مشاهده بیشتر کاربران از سایت ها می باشد. سئو ی داخلی و خارجی از انواع سئو می باشد که در دوره آموزش سئو داخلی و سئو خارجی می توانید با آن ها آشنا شوید. مهمترین عوامل برای افزایش اهمیت سایت در موتور جست و جو ، راه های سئو و یادگیری نکته سئو می باشد. الگوریتم رتبه بندی گوگل معیار های زیادی دارد که برای رسیدن به آن معیار ها ما به 23 نکته سئو مهم برای محتوا گذاری اشاره می کنیم که بسیار با اهمیت هستند و می توانند شما را برای پیدا کردن راه در بیابان بزرگ اینترنت کمک کنند. 23 نکته سئو و محتوا گذاری اولین نکته سئو این است که هر مطلب حداقل 500کلمه داشته باشد و فرعی و اصلی بودن آن مشخص شود. برای اینکه سایت مان با یکسری از کلمات کلیدی سئو شود از الگوریتم لینک سازی استفاده می کنیم به این صورت […]