رویداد 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 آن از جمله تغییر فونت ، رنگ فونت و یا پس زمینه را امتحان کنید.
ممنون از همراهی شما وب یاری های گرامی.
فراموش نکنید تیم وب یار با وجود داشتن تجربه فراوان و کارشناسان زبده می تواند بهترین انتخاب برای طراحی سایت و سئو سایت شما باشد.
در این مقاله از تیم وب یار قصد داریم به بررسی تفاوت طراح وب و توسعه دهنده وب بپردازیم. پس در ادامه با ما همراه باشید. طراح وب کیست ؟ طراح وب (Web Designer ) کسی است که چشم انداز کلی سایت را طراحی کرده و برای یک وب سایت برنامه ریزی می کند. طراحی وب کمتر به استفاده از کد برای جان بخشیدن به وب سایت مربوط می شود و بیشتر به تعیین چیدمان سایت ، پالت رنگ ، انتخاب قلم و مضامین بصری می پردازد که می تواند با کدنویسی توسط یک توسعه دهنده وب زنده شود. طراحان وب در درجه اول مسئولیت آگاهی از نحوه کار کد را ندارند . اما اطمینان حاصل می کنند که برای بازدید کنندگان ، وب سایت زیبا و کاربر پسند است. آنها از نرم افزارهای طراحی گرافیک از جمله محصولاتی مانند Adobe Photoshop ، Illustrator ، Inkscape و … استفاده خواهند کرد. یک طراح وب معمولا باید مسلط به مباحث UX ( تجربه کاربری ) و UI (رابط کاربری ) باشد. در واقع یک طراح وب باعث می شود وب سایت شما خوب به نظر برسد. آنها همچنین از کدهایی مانند HTML و CSS برای ایجاد طرح های خود استفاده می کنند. توسعه دهنده وب کیست ؟ توسعه دهندگان وب (Web Developer ) برنامه نویسانی هستند که طرح های ارائه […]
تا قبل از تکنولوژی ایجکس برای تغییر بخشی از صفحه نیاز به بارگذاری کل صفحه وب بود. اما بعد از ایجکس (Ajax) تبادل اطلاعات با سرور به حدی پیشرفت کرد که برای تغییر قسمتهایی از صفحه وب دیگر نیازی به بارگذاری مجدد کل صفحه نبود. همراه ما باشید تا ساز و کار این تکنولوژی محبوب و کارآمد را با شما در میان بگذاریم. ایجکس چیست؟ Ajax مخفف Asynchronous Javascript And Xml روشی است که با ترکیب جاوااسکریپت و Xml به سرور درخواستی برای بارگذاری بخشی از صفحه را می دهد. Google suggestion یکی از بهترین مثال ها برای تفهیم Ajax است. هنگامی که شما درگوگل عبارتی را تایپ می کنید گوگل در عرض چند میلی ثانیه به شما ادامه عبارت را پیشنهاد می‌کند. این سیستم از ajax پیشتیبانی می‌کند. در صورت عدم وجود ایجکس گوگل برای هر پیشنهاد مجبور به بارگذاری کل صفحه می شد! سازوکار Ajax چگونه است؟ نحوه کارajax به این صورت است که با ارسال داده ها به سرور و به کمک جاوااسکریپت شی xmlHttpRequest را می سازد. ویژگی این شی این است که به صورت مستقیم می‌تواند صفحات و یا وب سرویس ها را از سمت کاربر دریافت و به سمت سرور ارسال کند. به این صورت که درخواست‌ها از مرورگر می گیرد و در سمت سرور پردازش و دوباره به مرورگر باز می‌گرداند. […]
با آموزش کسب درآمد رایگان از بیت کوین و دیگر ارز های دیجیتال در خدمت شما مخاطب خوب سایت وب یار هستیم. ارز دیجیتال: از آن جا که سال 2021 را بسیاری از اقتصاد دان ها سال ارز دیجیتال نامیدند،تصمیم بر آن داریم تا شما را با این نوع از ارز ها آشنا کنیم. هدف از این مقاله افزایش سواد جامعه و جلوگیری از فریب مردم می باشد. تاریخچه: شاید شما بر این باور باشید که اولین ارز دیجیتال بیت کوین می باشد. ولی سخت در اشتباهید. اولین ارز دیجیتال یک ارز به نام E-gold می باشد. معنای این اسم طلای دیجیتالی می باشد.این ارز اولین بار در سال 1996 توسط شخصی به نام داگلاس جکسون ساخته و ارائه شد.اما به یک سری دلایل که در چارچوب این مقاله نمی گنجد در سال 2006 به کار خود پایان داد. بیت کوین: درست 2 سال پس از پایان فعالیت E-gold شخصی با نام مستعار ساتوشی ناکاموتو یک ارز غیر متمرکز را با نام بیت کوین معرفی کرد. اما این ارز هیچ شباهتی به E-gold نداشت. چون تحت یک تکنولوژی غیر متمرکز به نام بلاک چین ساخته شده بود. در سال 2009 اولین بیتکوین ها با قیمت 0.03$ استخراج و خریداری شدند. افزایش قیمت بیت کوین: در سال 2010 اولین مبادلات با بیتکوین انجام شد. پس از آن […]
سئو محلی چیست ؟ سئو محلی (local SEO) یک استراتژی بهینه سازی موتور جستجو (SEO) است که به دیده شدن تجارت شما در نتایج جستجوی محلی در گوگل کمک می کند. هر مشاغلی که دارای موقعیت فیزیکی یا منطقه جغرافیایی باشد می تواند از سئو محلی بهره مند شود. local SEO چگونه عمل می کند؟ در روزهای ابتدایی اینترنت ، تعداد نسبتاً کمی وب سایت وجود داشت ، بنابراین پیمایش در وب آسان بود. به محض اینکه اینترنت شروع به گسترش کرد ، موتورهای جستجو ایجاد شدند تا به کاربران اجازه دهند سایت های مورد نظر خود را با سهولت بیشتری پیدا کنند. پس از تجزیه و تحلیل رفتار کاربران در طی تریلیون جستجو ، گوگل دریافت که افرادی که به دنبال انواع خاصی از مشاغل هستند به نتایج نزدیک خود نیاز دارند. به همین دلیل الگوریتم جستجوی محلی گوگل دارای یک فاکتور مجاورت است . در واقع گوگل هنگام جستجوی کلمه کلیدی محلی موقعیت مکانی شما را در نظر می گیرد. این اتفاق می افتد حتی اگر کاربر نام شهر یا عبارت “نزدیک من” را در جستجوی خود وارد نکند. به عنوان مثال اگر در محل کار خود هستید و می خواهید برای ناهار یک پیتزا تحویل بگیرید ، لیستی از مکان های نزدیک دفتر شما را در صفحه نتایج نمایش می دهد. اما اگر همان جستجو را […]
با توجه به بازار داغ خرید و فروش در اینستاگرام و تلگرام و محبوبیت روزافزون این دو سوشیال مدیا برآن شدیم که راهی آسان و تنها با فشردن چند کلیک، برای دریافت درگاه پرداخت تلگرام و اینستاگرام را خدمت شما عزیزان ارائه دهیم. درگاه پرداختی آنلاین بدون نیاز به دریافت اینماد. آنچه خواهیم خواند اینماد چیست؟ مدارک و شرایط لازم برای دریافت اینماد درگاه پرداخت آنلاین زرین پال درگاه پرداخت برای کسب و کارهای اینستاگرامی و تلگرامی اینماد چیست؟ اینماد یا همان نماد اعتماد الکترونیکی(E-Namad) نمادی است که به وب سایت ها و کسب و کارهای اینترنتی اعتبار و رسمیت می بخشد. این نماد توسط مرکز توسعه تجارت الکترونیک به سایت هایی که در آن ها تراکنش مالی صورت می گیرد داده می شود. مدارک و شرایط لازم برای دریافت اینماد شما به عنوان یک شخص حقیقی با ارائه ی مدارکی نظیر: مجوز کسب و کار تعهد شخص حقیقی شناسنامه، کارت ملی و مدرک نظام وظیفه و پرداخت هزینه می توانید موفق به دریافت دو ساله ی این نماد شوید. علاوه بر مدارک گفته شده هر سایت برای دریافت اینماد موظف به رعایت قوانین و الزاماتی است. الزاماتی نظیر: تایید مالکیت دامنه پشتیبانی از زبان فارسی عدم استفاده از پاپ آپ فروشگاهی بودن سایت درج قیمت روی هر محصول نمایش لینک ثبت شکایت در هر قسمت سایت درج […]
اینستا والت چیست؟ اینستا والت یک کیف پول ارز دیجیتال می باشد که در 29 آپریل 2011 راه اندازی شد. این کیف پول ها به منظور نگه داری ارز های دیجیتال و فیات استفاده می شد. ارز هایی نظیر: بیت کوین اتریوم لایت کوین تتر کاردانو و موارد دیگر نظیر این ارز ها را میشد در آن نگه داری کرد. این کیف پول از نوع دیجیتالی می باشد. گفته می شود که 3 ماه پس از رو نمایی از این کیف پول، بسته شد. کلاهبرداری با کیف پول اینستا ولت: در چند سال گذشته برخی از این افراد با ایجاد وب سایتی مشابه این وب سایت ایجاد کردند. سعی کردند به این وسیله پول شویی کنند. نحوه فعالیت این وب سایت ها: این افراد به بهانه این که در خارج از کشور هستند و میخواهند چیزی را خریداری کنند یا این که برای کسی پولی بفرستند، با استفاده از این کیف پول از شما کلاه برادری می کنند. یا این که از طریق شما یک فرایند پول شویی را انجام می دهند. چگونه شما در دام این وبسایت ها خواهید افتاد؟ افرادی با شماره های خارج از کشور که اغلب اروپا و کانادا هستند با شما تماس خواهند گرفت. از شما درخواست می کنند این کیف پول را نصب کنید. تا پولی به حساب شما بریزد و یک چیز در […]