آموزش طراحی وب

رویداد hover در جی کوئری

در این جلسه در رابطه با رویداد hover صحبت می کنیم و همراه با مثال منو و زیر منو و دموی آنلاین این رویداد رو به شما دوستان آموزش میدم.

computer_mouse

فصل سوم : event ها در جی کوئری

جلسه هفتم : رویداد hover در جی کوئری

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه در رابطه با رویداد hover صحبت می کنیم و همراه با مثال منو و زیر منو و دموی آنلاین این رویداد رو به شما دوستان آموزش میدم.

 

رویداد hover

در رویداد hover شما میتونید یک تابع و یا دو تابع رو تعریف کنید . زمانی که شما موس رو روی عنصر میبرید و رویداد hover با تابع ورودی و اولیه اتفاق میوفته و زمانی که شما موس رو از روی عنصر برمیدارید و تابع خروجی hover اتفاق میوفته .

به عبارتی میتونید بگید زمانی که موس روی عنصر رفت یه اتفاق بیوفته و زمانی که موس از روی عنصر برداشته شد یه اتفاق دیگه بیوفته . یعنی دو حالت رو تعریف کنید .

دستور کلی این رویداد :

Selector : عنصر و یا انتخابگر شما محسوب میشه .

FirstFunction : تابع ورودی و اولیه شما محسوب میشه ، زمانی که موس روی عنصر میره و رویداد mouseenter اتفاق میوفته.

SecondFunction : تابع دوم و خروجی شما محسوب میشه ، زمانی که موس از روی عنصر برداشته میشه و رویداد mouseleave اتفاق میوفته .

 

خوب حالا با ذکر مثال این رویداد رو براتون واضح توضیح میدم . تصور کنید ما یک منو داریم که قراره با قرار گرفتن موس روی منو یک زیر منو باز بشه و زمانی که موس از روی منو برداشته شد ، زیر منو حذف بشه یا به عبارتی پنهان بشه. ابتدا به شکل زیر html این مثال رو پیاده می کنیم :

خوب ما یه گزینه داریم که تو عنصر span قرار دادیم و یک زیر منو داریم که با کلاس children اون رو مشخص کردیم. حالا باید با css زیر منو رو پنهان کنیم تا با جی کوئری و رویداد hover اون رو نمایان کنیم.

خوب با استایل بالا هم زیباترش کردیم هم زیر منو رو مخفی کردیم. حالا با جی کوئری تعریف می کنیم که زمانی که موس روی ” منوی اصلی ” قرار گرفت زیر منو باز بشه و زمانی که موس برداشته شد زیر منو بسته بشه .

در این مثال گفتیم با قرار گرفتن موس روی span عنصر children با رویداد slideDown بصورت کشویی باز بشه و زمانی که موس از روی span برداشته شد، عنصر children با رویداد slideUp بصورت کشویی بسته بشه .

خیلی ساده و راحت:) سعی میکنم در یک مقاله نحوه ی ایجاد یک منو و زیر منو رو بطور کامل آموزش بدم.

میتونید این مثال رو بصورت آنلاین هم مشاهده کنید . امیدوارم که براتون مفید بوده باشه.

 

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۱

  • با سلام
    با تشکر از مطالب فوق حرفه ای شما
    لطفا مطالب جو کوئری را بیشتر بزارید
    اگر می شود هم Php هم بزارید
    بخاطر وب سایت پویا شما ممنونم

  • بهترین سایتی که تاحالا دیده بودم شما بودید
    امیدوارم همونطوری که مارو به به موفقیت نزدیک میکنید
    همیشه موفق باشید
    ممنون از آموزش های خوبتون

  • سلام
    اقا سایت خیلی خوبی دارین
    فقط یک بخشی طراحی کنین و قالب های زیبا و رایگان قرار بدین
    هم ما کمال استفاده رو ببریم هم به محبوبیت سایتتون روز به روز افزایش پیدا کنه
    البته هم اینجوری هم سایتتون محبوب و کاربر پسند هست
    با تشکر

    • سلام دوست عزیز
      چرا؟ بعد از این مطلب برای این بخش ما ۳ تا مطلب ارسال کردیم شاید مرورگرتون کش داره .

  • سلام خیلی ممنون از آموزش های خوبتون ….
    ۲ تا سوال داشتم یک اینکه بع تعدادی که ما روی گزینه “منوی اصلی ” هاور کنیم زیر منون ها بازو بسته می شه که این خیلی بده … با:
    return false;
    یا همچین چیز هایی میشه بستش ؟؟ یه همون نگهشداشت ؟؟
    و دوم این که این افکت پاک شدن placeholder ها به چه نحوی هست. پلاگین هست یا کد ؟؟؟

    • سلام دوست عزیز
      هنوز تست نکردم این مورد رو ، هر زمان تست کردم و نتیجه ای گرفتم خدمتتون اعلام میکنم.
      بله پلاگین جی کوئری هست که در یک جلسه معرفی میکنم و آموزش میدم.
      موفق باشید.

  • باسلام و خسته نباشید خدمت شما
    واقعا سایت خوبی دارید
    منوی ساختم که وقتی موس از روش جدا میشه خیلی زود بسته می شه می خام کاری کنم که بعد از کنار رفتن موس زمان بسته شدنش تاخیر داشته باشه
    که بیشتر برای گوشی های تلفن همراه کاربرد داره
    من یه کم زیاد مبتدی هستم میشه توضیح بدین که چطوری این کار رو انجام بدم خیلی ممنون

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین