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

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

دسته بندی موضوعات
سفارش تبلیغات

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

 toggle

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

جلسه هشتم : رویداد toggle در جی کوئری

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

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

 

رویداد Toggle

رویداد ( ) toggle بین دو رویداد ( ) show و ( ) hide تغییر وضعیت میده . فرض کنید یک باکس پنهان دارید که با کلیک روی دکمه باز میشه و با کلیک دوباره روی همون دکمه پنهان میشه. در اینجا دیگه لازم نیست دو تابع تعریف کنید یکی برای باز شدن یکی برای بسته شدن ، کافیه از رویداد toggle استفاده کنید .

اگر باکس (یا عنصر مورد نظر) در حال نمایش باشه وضعیت hide رو روی اون اعمال میکنه اگر باکس بسته باشه وضعیت show رو روی اون اعمال میکنه.

 

قاعده دستوری toggle

 

Selector : عنصر مورد نظر ماست که یا با id و یا با نام کلاس ، اون عنصر رو مشخص میکنیم. دقت داشته باشید اگر از نام کلاس استفاده میکنید باید حتما منحصر به فرد باشه یعنی این کلاس به عنصر دیگه ای اختصاص داده نشده باشه.

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

  • milisecond : مدت زمان اجرای افکت رو بر حسب میلی ثانیه محاسبه میکنه مثلا ۱۰۰۰ یعنی ۱ ثانیه
  • slow : سرعت انجام افکت بصورت آهسته انجام میشه.
  • fast : افکت با سرعت زیاد انجام میشه.

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

  • swing :سرعت انجام افکت در ابتدا و انتهاآهسته ولی در اواسط افکت زیاد میشه .
  • liner : سرعت در کل طول رویداد یکسان هست .

Callback : در این جا هم میتونیم یه فانکشن دیگه تعریف کنیم تا درانتهای toggle اجرا بشه.

 

خوب حالا برای اینکه این رویداد بهتر براتون جا بیوفته مثالی که در بالا زدیم رو پیاده میکنم.

اول کد html رو مینویسیم:

 

بعد یه استایل ساده بهش میدیم :

 

حالا با جی کوئری بهش میگیم زمانی که روی دکمه کلیک کردیم اگر باکس در حالت show بود اون رو مخفی کن اگر در حالت hide بود اون رو نمایش بده :

رویداد click  هم که قبلا براتون توضیح دادم . فقط این تغییر حالت ها بدون افکت انجام میشه ، از حالت show به hide و بالعکس تغییر پیدا میکنه.

به همین راحتی 🙂 میتونید دموی آنلاین این مثال رو هم ببینید.

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

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

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟