نمایش/مخفی کردن (Hide/Show)

اینجا با افکت های نمایش و مخفی کردن jQuery آشنا می شوی. خیلی شبیه وقتی است که چراغ کلاس را خاموش و روشن می کنی؛ فقط این جا چراغ، تگ های HTML هستند.

ایده نمایش/مخفی کردن در jQuery چیست؟

با jQuery می توانی هر عنصر صفحه را موقت پنهان کنی. بعد هر وقت خواستی دوباره همان عنصر را نشان دهی. این کار برای متن های توضیحی، منوها و پیام های خطا خیلی کاربردی است.

سه متد مهم این صفحه هستند: hide() برای مخفی کردن، show() برای دوباره نمایش دادن و toggle() برای جابه جایی بین این دو حالت. یعنی اگر عنصر دیده شود، مخفی می شود و برعکس.

متدهای hide() و show() در عمل

در مثال منبع، دو دکمه با id های hide و show داریم. وقتی روی دکمه «مخفی کن» کلیک می کنی، همه پاراگراف ها مخفی می شوند. وقتی روی دکمه «نمایش بده» کلیک می کنی، دوباره ظاهر می شوند.

$("#hide").click(function() {
  $("p").hide();
});

$("#show").click(function() {
  $("p").show();
});

مشاهده در ادیتور

الگوی کلی این متدها شبیه سینتکس عادی jQuery است. اول انتخاب گر (Selector) می آید که می گوید کدام عنصرها را می خواهی. بعد متد افکت را صدا می زنی.

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

مشاهده در ادیتور

پارامتر speed یعنی سرعت اجرا. می تواند "slow"، "fast" یا عدد میلی ثانیه باشد. مثلا 1000 یعنی یک ثانیه. پارامتر callback هم یک تابع است که بعد از تمام شدن افکت اجرا می شود.

نمایش و مخفی کردن jQuery با سرعت

مثال بعدی منبع، سرعت را روی متد hide() نشان می دهد. این جا هر وقت روی یک دکمه کلیک شود، همه پاراگراف ها در مدت یک ثانیه ناپدید می شوند. انگار متن آرام آرام جمع می شود.

$("button").click(function() {
  $("p").hide(1000);
});

مشاهده در ادیتور

همین الگو را می توانی با show() هم استفاده کنی. مثلا اول متن را مخفی کن و بعد با show(1000) آن را آرام ظاهر کن. ترکیب آن با رویدادهای jQuery، صفحه را کاملا تعاملی می کند.

toggle()؛ یک سوییچ ساده بین نمایش و مخفی

متد toggle() مثل یک کلید برق دوحالته است. اگر عنصر دیده شود، آن را مخفی می کند. اگر مخفی باشد، دوباره نشان می دهد. بنابراین به دو دکمه جدا برای hide و show نیاز نداری.

در مثال منبع، با هر کلیک روی دکمه، پاراگراف ها یا مخفی می شوند یا دوباره ظاهر می شوند. همه چیز با یک خط ساده کنترل می شود.

$("button").click(function() {
  $("p").toggle();
});

مشاهده در ادیتور

سینتکس متد toggle() هم کاملا شبیه قبلی هاست. دوباره می توانی از سرعت و تابع callback استفاده کنی تا بعد از پایان افکت، کار دیگری انجام شود؛ مثلا پیام نشان دهی.

$(selector).toggle(speed, callback);

مشاهده در ادیتور

گام های عملی برای تمرین نمایش/مخفی کردن

1. اول مطمئن شو jQuery را درست در صفحه اضافه کرده ای. اگر لازم شد به صفحه شروع کار با jQuery سر بزن.
2. یک فایل HTML ساده با چند تگ <p> و دو دکمه بساز. روی یکی بنویس «Hide» و روی دیگری «Show».
3. کد مثال hide و show بالا را کپی کن و id دکمه ها را مطابق صفحه خودت تنظیم کن.
4. سپس مثال سرعت را امتحان کن و مقدار 500، 1000 و 2000 را آزمایش کن. ببین کدام حس بهتری می دهد.
5. در آخر، دو دکمه را حذف کن و فقط با نمایش و مخفی کردن jQuery و متد toggle()، همه چیز را با یک دکمه کنترل کن.

نکات تکمیلی و مرجع افکت ها

نکته: متدهای hide()، show() و toggle() جزء افکت های jQuery هستند. در منبع، بخشی به نام jQuery Effect Reference وجود دارد که فهرست کامل افکت ها را نشان می دهد.

اگر تمرین بیشتری می خواهی، می توانی از بخش تمرین منبع استفاده کنی. مثلا تمرین مربوط به hide و show در آدرس Exercise Hide/Show قرار دارد.

جمع بندی سریع

• hide() برای مخفی کردن عناصر استفاده می شود.
• show() عناصر مخفی را دوباره نمایش می دهد.
• toggle() بین حالت نمایش و مخفی جابه جا می شود.
• پارامتر speed سرعت افکت را کنترل می کند.
• تابع callback بعد از پایان افکت اجرا می شود.