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

مرجع کار با JS Collapse در Bootstrap 4

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

مرجع کار با JavaScript Collapse در Bootstrap 4 :

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

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

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

کلاس
توضیح
کلاس Collapse
محتویات مورد نظر را مخفی می کند.
کلاس Collapse show
این کلاس به صورت پیش فرض، محتویاتی که می خواهیم توسط کلاس Collapse مخفی کنیم را نمایش می دهد.
کلاس Collapsing
این کلاس هنگامی که عملیات transition (تغییر از حالت مخفی به نمایان یا برعکس) شروع می شود، به عنصر اضافه شده و پس از انجام آن، حذف می شود.

آموزش کار با Collapse توسط خاصیت های Attributes :

کافی است خاصیت data-toggle را برابر با collapse و مقدار data-target را برابر با id عنصر collapse قرار دهید تا کنترل باز و بسته شدن عنصر هدف collapse را به یک المنت دیگر مثل یک دکمه یا لینک بدهید.

خاصیت data-target، یک انتخاب کننده CSS مثل id یا کلاس عنصری که می خواهیم collapse شود را دریافت می کند. حتما توجه داشته باشید که کلاس collapse را به عنصری که می خواهید ظاهر و مخفی شود، اعمال کنید. اگر می خواهید محتوی collapse از ابتدا نمایش داده شود (به جای حالت پیش فرض که مخفی است)، کلاس show را به عنصر اضافه کنید. در کد مثال عملی زیر، نحوه استفاده از خواص Attributes data را در collapse نشان داده ایم :

مثال 1



Some text..
امتحان کنید
نکته :

اگر می خواهید حالت مدیریت گروهی آکاردئونی را به کنترل collapse بدهید، بایستی خاصیت data-parent برابر با id یا selector عنصر مادر یا دربرگیرنده collapse را درآن، اضافه کنید.

آموزش فعال سازی عنصر Collapse توسط جاوا اسکریپت :

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

$('.collapse').collapse()
            

آموزش ویژگی ها (options) عنصر Collapse در بوت استرپ 4:

ویژگی ها (options) را به وسیله خواص data attributes یا جاوا اسکریپت، می توانید به عنصر collapse اضافه کنید. جهت قرار دادن ویژگی درون خواص data attributes، بایستی نام آن را به data-* اضافه کنید، مثل data-parent.

نام
نوع
مقدار پیش فرض
توضیحات
parent
انتخاب کننده Css Selector
false
تمامی المنت های قابل Collapse زیرمجموعه عنصر مادر تعیین شده، در هنگام نمایان شدن آیتم مادر Collapse، مخفی یا Close می شوند (رفتاری همانند آکاردئون accordion خواهند داشت).
toggle.
مقدار درست یا غلط Boolean.
درست true
حالت المنت قابل Collapse شدن را عوض می کند (از مخفی به نمایان یا برعکس).

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

در لیست زیر، کلیه متدهای Collapse JS به همراه کاربرد و توضیح آنها، نشان داده شده است :

متد
توضیحات
Collapse (OPTIONS)
عنصر قابل Collapse شدن را با یکی از ویژگی هایی که در ادامه معرفی شده اند، فعال می کند.
Collapse(“TOGGLE”)
وضعیت عنصر Collapse را تغییر می دهد (از حالت مخفی به نمایان و برعکس).
Collapse(“show”)
عنصر Collapse را نمایان می کند.
Collapse(“hide”)
عنصر Collapse را مخفی می کند.
Collapse(“dispose”)
عنصر Collapse موجود در صفحه را از بین می برد.

آموزش کار با رویدادها (Events) عنصر Collapse :

در لیست زیر، کلیه رویدادها (Events) عنصر Collapse را به همراه توضیح و کاربرد، معرفی کرده ایم :

رویداد
توضیح
Show.bs. Collapse
زمانی رخ می دهد که عنصر Collapse می خواهد نمایان شود.
show.bs. Collapse
زمانی رخ می دهد که عنصر Collapse کاملا باز و نمایان شده است (پس از اتمام کامل عملیات CSS Transition یا مخفی و نمایان شدن تدریجی عنصر).
hide.bs. Collapse
زمانی رخ می دهد که عنصر Collapse می خواهد بسته شود.
hidden.bs. Collapse
زمانی رخ می دهد که عنصر Collapse کاملا مخفی و بسته شده است (پس از انجام کامل عملیات CSS Transition یا مخفی و نمایان شدن تدریجی عنصر).
  • 50
  •    42
  • تاریخ ارسال :   1398/09/02

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

ارسال

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

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