روش های ایجاد منوها و نوارهای کشویی در جی کوئری

بازدید: 652 بازدید
نوارهای کشویی
[cdb_box_content]

با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با یکی دیگر از آموزش های جی کوئری jQuery در خدمت شما عزیزان هستیم.

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

در آموزش امروز از سری آموزش های جی کوئری قصد داریم تا درباره مبحث جالب و چشمگیر منوها و المان های کشویی صحبت کنیم.

در ادامه این مقاله همراه پرنیان باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


اساس کار المان های کشویی، بر نمایش و سپس بستن یک کشو شامل محتویات دلخواه است.

در آموزش امروز ، درباره مسایل زیر صحبت و تمرین خواهیم کرد:

  • کدنویسی برای باز شدن و نمایش محتویات در یک منوی کشویی
  • کدنویسی برای بسته شدن منو پس از نمایش محتویات
  • کدنویسی برای انجام همزمان باز شدن و بسته شدن منو با کلیک روی همان المان
[/cdb_box_content]
[cdb_box_content]

متد باز شدن منو در جی کوئری

jQuery slideDown() Method

این متد، همانطور که از نام آن پیداست، برای باز شدن منو و نمایش محتویات آن استفاده می شود.

شکل دستوری کدنویسی برای این متد به شکل زیر خواهد بود:

$(selector).slideDown(speed,callback);
پارامتر اختیاری SPEED تعیین کننده سرعت انیمیشن باز شدن منو خواهد بود.
این پارامتر می تواند مقادیر “slow”, “fast”, و milliseconds را داشته باشد.
پارامتر اختیاری callback نیز، یک تابع است که در پس از اتمام دستورات متد، انجام می شود.
در مثال زیر، نحوه کدنویسی بری دستور باز شدن منو در جی کوئری را مشاهده می کنید.
[php]
$(“#flip”).click(function(){
$(“#panel”).slideToggle(“slow”);
});
});
[/php]
می توانید با مراجعه به این لینک نحوه انجام دستور را مشاهده و آن را امتحان کنید.
[/cdb_box_content]
[cdb_box_content]

متد جمع شدن منوی کشویی در جی کوئری

jQuery slideUp() Method

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

دستور نحوی برای نوشتن این متد به شکل زیر خواهد بود:

$(selector).slideUp(speed,callback);
پارامترهای اختیاری برای این متد نیز، عینا مانند قبل می باشد.
دستور کدنویسی برای این متد نیز به شکل زیر می باشد:
[php]
$(“#flip”).click(function(){
$(“#panel”).slideUp(“slow”);
});
});
[/php]
برای مشاهده نحوه عملکرد این کد، به این لینک مراجعه کنید.
[/cdb_box_content]
[cdb_box_content]

متدهای بازشدن و جمع شدن منوهای کشویی در یک المان

jQuery slideToggle() Method

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

اگر منو در حالت نمایش حتوا باشد، با کلیک روی عنصر مورد نظر، این منو بسته خواهد شد.

و بالعکس اگر منو در حالت عادی باشد، با کلیک روی آن المان، دستور باز شدن منو انجام خواهد شد. و محتوا نمایش داده خواهد شد.

دستور نحوی این کد به شکل زیر خواهد بود:

$(selector).slideToggle(speed,callback);
پارامترهای اختیاری در این دستور نیز مانند مثال های قبلی می باشد.
کد مورد نظر برای این دستور نز ، به شکل زیر می اشد:
این کد، هر دو عملکرد باز شدن و جمع شدن منو را برای یک المان انجام می دهد.
[php]
$(“#flip”).click(function(){
$(“#panel”).slideToggle(“slow”);
});
});
[/php]
می توانید عملکرد این کد را از این لینک مشاهده و آن را امتحان نمایید.
[/cdb_box_content]
[cdb_box_content]

اگر این مطلب برای شما مفید بود ما را در گوگل ستاره باران کنید.

ترجمه و ارائه : رویا نجفی

منبع : وب سایت w3schools

[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.