ایجاد پنل های آکاردئونی در Bootstrap

در این بخش نحوه ایجاد آکاردئون (پنل فرو ریزنده) را با استفاده از بوت استرپ خواهید آموخت.

منوهای آکاردئونی (فرو ریزنده) عموماً در وب سایت ها جهت مدیریت حجم زیادی از محتوا و لیست های راهبری استفاده میشوند. با استفاده از پلاگین collapse در بوت استرپ میتوانید آکاردئون یا پنل فرو ریزنده (collapsible) ایجاد نمایید(بدون نیاز به نوشتن کد جاوا اسکریپت).
مثال زیر نحوه ایجاد آکاردئون با استفاده از پلاگین فرو ریزنده (collapse) و پنل را نشان میدهد.






































خروجی مثال بالا به شکل زیر خواهد بود :









 

باز کردن و collapse کردن عناصر از طریق ویژگی -data :

میتوانید با استفاده از ویژگی collapse در بوت استرپ و از طریق ویژگی -data بدون استفاده از کد مربوط به آکاردئون، هر عنصر مشخص را آکاردئونی نمایید.





 

توضیح کد :

پلاگین فرو ریزنده در بوت استرپ به دو عنصر اصلی نیاز دارد: عنصر کنترل کننده مانند یک دکمه یا هایپرلینک که با کلیک کردن بر روی هر کدام عنصر مورد نظر باز شود و خود عنصر فرو ریزنده (collapsible)
- ویژگی "data-toggle="collapse (خط شماره2) همراه با ویژگی data-target (برای دکمه ها) یا href (برای لینک ها)، به عنصر کنترل کننده اضافه میشوند تا به طور اتوماتیک، عمل کنترل عنصر فرو ریزنده را انجام دهند.
- ویژگی data-target یا href یک selector دریافت میکند تا حالت آکاردئونی را به یک عنصر مشخص اعمال نماید. به یاد داشته باشید که کلاس  collapse را به عنصر فرو ریزنده (آکاردئونی) اضافه نمایید.
- میتوانید علاوه بر کلاس collapse. به دلخواه کلاس in. (خط 4) را به عنصر فرو ریزنده اضافه کنید تا به صورت پیش فرض باز باشد.

باز کردن و collapse کردن عناصر از طریق جاوا اسکریپت :

همچنین میتوانید یک عنصر را توسط جاوا اسکریپت به حالت فرو ریزنده تبدیل نمایید. کافیست تابع ( )collapse در بوت استرپ را همراه با id یا کلاس عنصر مورد نظر، در کد جاوا اسکریپت فراخوانی نمایید.







خروجی مثال بالا به شکل زیر خواهد بود : (با کلیک بر روی دکمه باز و بسته میشود)







 

آپشن ها :

آپشن های مشخصی وجود دارند که میتوانند به تابع ( )collapse پاس داده شوند تا عملکرد عنصر آکاردئونی را تغییر دهند.
 

نام	نوع	مقدار پیش فرض	توضیحات
parent	selector	false	زمانی که این عنصر آکاردئونی نشان داده میشود، کلیه آیتم های آکاردئونی دیگر با parent مشخص شده، بسته خواهند شد.
toggle	boolean	true	عنصر آکاردئونی را باز و بسته میکند.

همچنین میتوانید این آپشن ها را از طریق ویژگی  -data ، اعمال نمایید. برای انجام این کار باید نام آپشن را به انتهای -data اضافه نمایید(همانطور که در مثال اول نشان داده شد).

توابع :

( collapse (options.

این تابع محتوای شما را به یک عنصر فرو ریزنده (آکاردئونی) تبدیل می نماید.







 

('collapse ('toggle.

این تابع، عنصر فرو ریزنده را باز و بسته میکند. (نمایش دادن یا مخفی کردن)






 

('collapse ('show.

این تابع، عنصر فرو ریزنده را نمایش میدهد.






 

('collapse ('hide.

این تابع، عنصر فرو ریزنده را مخفی میکند.






 

رویدادها (Event):

 

رویداد	توضیحات
show.bs.tooltip	این رویداد به محض فراخوانی تابع show فعال میشود.
shown.bs.tooltip	این رویداد زمانی که عنصر فرو ریزنده برای کاربر visible میشود، فعال میشود. قبل از فعال شدن، تا زمان کامل شدن عملیات transition در CSS منتظر میماند.
hide.bs.tooltip	این رویداد به محض فراخوانی تابع hide فعال میشود.
hidden.bs.tooltip	این رویداد زمانی که عملیات مخفی بودن عنصر فرو ریزنده از کاربر پایان می یابد، فعال میشود. این رویداد تا پایان کامل عملیاتtransition در CSS منتظر میماند و بعد فعال میشود.

مطلب بعدی -> ایجاد اسلاید شو در Bootstrap

---