با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
با یکی دیگر از آموزش های جی کوئری jQuery در خدمت شما عزیزان هستیم.
می توانید با مراجعه به این لینک سایر آموزش های مربوط به این زیان برنامه نویسی را نیز از وب سایت پرنیان طرح مطالعه کنید.
در آموزش امروز از سری آموزش های جی کوئری قصد داریم تا درباره مبحث جالب و چشمگیر منوها و المان های کشویی صحبت کنیم.
در ادامه این مقاله همراه پرنیان باشید.
مقدمه
اساس کار المان های کشویی، بر نمایش و سپس بستن یک کشو شامل محتویات دلخواه است.
در آموزش امروز ، درباره مسایل زیر صحبت و تمرین خواهیم کرد:
- کدنویسی برای باز شدن و نمایش محتویات در یک منوی کشویی
- کدنویسی برای بسته شدن منو پس از نمایش محتویات
- کدنویسی برای انجام همزمان باز شدن و بسته شدن منو با کلیک روی همان المان
متد باز شدن منو در جی کوئری
jQuery slideDown() Method
این متد، همانطور که از نام آن پیداست، برای باز شدن منو و نمایش محتویات آن استفاده می شود.
شکل دستوری کدنویسی برای این متد به شکل زیر خواهد بود:
$(selector).slideDown(speed,callback);
پارامتر اختیاری SPEED تعیین کننده سرعت انیمیشن باز شدن منو خواهد بود.
این پارامتر می تواند مقادیر “slow”, “fast”, و milliseconds را داشته باشد.
$(“#panel”).slideToggle(“slow”);
});
});
متد جمع شدن منوی کشویی در جی کوئری
jQuery slideUp() Method
همانطور که مشخص است، این متد برای جمع شدن منوی کشویی پس از نمایش محتوای آن استفاده خواهد شد.
دستور نحوی برای نوشتن این متد به شکل زیر خواهد بود:
$(selector).slideUp(speed,callback);
$(“#panel”).slideUp(“slow”);
});
});
متدهای بازشدن و جمع شدن منوهای کشویی در یک المان
jQuery slideToggle() Method
این متد برای انجام هر دو عملکرد در یک المان به کار گرفته می شود.
اگر منو در حالت نمایش حتوا باشد، با کلیک روی عنصر مورد نظر، این منو بسته خواهد شد.
و بالعکس اگر منو در حالت عادی باشد، با کلیک روی آن المان، دستور باز شدن منو انجام خواهد شد. و محتوا نمایش داده خواهد شد.
دستور نحوی این کد به شکل زیر خواهد بود:
$(selector).slideToggle(speed,callback);
پارامترهای اختیاری در این دستور نیز مانند مثال های قبلی می باشد.
کد مورد نظر برای این دستور نز ، به شکل زیر می اشد:
این کد، هر دو عملکرد باز شدن و جمع شدن منو را برای یک المان انجام می دهد.
$(“#panel”).slideToggle(“slow”);
});
});