آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

مرجع کار با JS DropDown در بوت استرپ 4

دوره های مرتبط با این مقاله

مرجع کار با JS DropDown در بوت استرپ 4:

در این درس، به آموزش کار با کلاس ها، خواص و متدهای Java Script JS DropDown در بوت استرپ 4، خواهیم پرداخت. همانطور که می دانید از dropdown در بوت استرپ 4، برای نمایش کادرهای کشویی به کاربر، استفاده می شود.

آموزش کلاس های JS DropDown در بوت استرپ 4:

جدول زیر، کلیه کلاس های کار با JS DropDown در بوت استرپ 4 را همراه با توضیح و کاربرد، ارائه کرده است :

کلاس
توضیح
کلاس dropdown
یک کنترل dropdown را با استایل خاص بوت استرپ 4، نمایش می دهد.
کلاس dropdown-item
آیتم ها و لینک های درون منوی dropdown را با padding و ...، استایل دهی می کند.
کلاس dropdown-item-text
متن (Text) و لینک های متنی درون منوی dropdown را با padding و ...، استایل دهی می کند.
کلاس dropdown-menu
منوی dropdown را می سازد.
کلاس dropdown-menu-right
این کلاس منوی dropdown را راست چین می کند.
کلاس dropdown-header
یک هدر (سر عنوان) در بالای منوی dropdown ایجاد می کند.
کلاس dropup
باعث می شود تا منوی Dropdown رو به بالا باز شود.
کلاس disabled
آیتم مورد نظر را در منوی Dropdown، غیر فعال (غیر قابل انتخاب و کلیک) می کند.
کلاس active
آیتم مورد نظر در منوی dropdown را به صورت فعال (active) نشان داده و استایل خاصی به آن اعمال می کند.
کلاس divider
آیتم های درون dropdown را با یک خط افقی از هم جدا می کند.

آموزش کار با dropdown توسط خواص data attribute :

خاصیت data-toggle برابر با dropdown را به یک دکمه یا لینک بدهید تا بتوانید آن را باز و بسته نمایید، همانند کد مثال عملی زیر :

مثال 1

امتحان کنید

آموزش کار با dropdown در جاوا اسکریپت :

به وسیله قطعه کد زیر، می توانید کنترل dropdown را به وسیله جاوا اسکریپت فعال نمایید :

$('.dropdown-toggle').dropdown();
            
نکته :

بدون توجه به این که متد dropdown() را فراخوانی کنید یا خیر، بایستی از خاصیت data-toggle=” dropdown” استفاده نمایید.

آموزش کار با متدها (Methods) عنصر dropdown :

در جدول زیر، کلیه متدهای عنصر dropdown را به همراه توضیح و کاربرد آن، معرفی کرده ایم :

متد
توضیح
متد dropdown(“toggle”)
وضعیت عنصر dropdown را تغییر می دهد (از باز به بسته و برعکس). اگر تنظیم شود، عنصر dropdown را به صورت پیش فرض، باز می کند.
متد dropdown(“update”)
موقعیت یک المنت dropdown را به روزرسانی می کند.
متد dropdown(“dispose”)
یک المنت dropdown موجود در صفحه را از بین می برد.

آموزش کار با رویدادها (Events) در Bootstrap 4 :

در جدول زیر، کلیه رویدادهای عنصر dropdown را به همراه توضیح و کاربرد، نشان داده ایم :

رویداد
توضیح
متد show.bs. dropdown
زمانی رخ می دهد که المنت dropdown می خواهد نمایش داده شود.
متد shown.bs. dropdown
زمانی رخ می دهد که المنت dropdown به طور کامل باز شده و نمایش داده می شود (پس از اتمام کامل CSS Transition یا باز و بسته شدن تدریجی عنصر).
متد hide.bs. dropdown
زمانی رخ می دهد که المنت dropdown می خواهد بسته شود.
متد hidden.bs. dropdown
زمانی رخ می دهد که المنت dropdown به طور کامل بسته می شود (پس از اتمام کامل عملیات CSS Transition یا باز و بسته شدن تدریجی عنصر).
نکته آموزشی :

از رویداد event.relatedTarget برای یافتن عنصری که dropdown را فعال کرده و تغییر داده استفاده کنید.

مثال : در کد مثال آموزشی زیر، توسط یک کادر هشدار Alert Box، نام دکمه ای که عنصر dropdown را باز کرده نشان داده ایم :

مثال 2

$(".dropdown").on("show.bs.dropdown", function(event){
  var x = $(event.relatedTarget).text(); // Get the text of the element
  alert(x);
});
امتحان کنید
  • 41
  •    44
  • تاریخ ارسال :   1398/09/02

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .