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

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

در این جلسه ی آموزشی در رابطه با رویداد 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 و بالعکس تغییر پیدا میکنه.

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

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

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

حسین همت یار

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

۱ دیدگاه

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

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

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

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

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