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

تاریخ انتشار: 30 دی 1394

تعداد بازدید: 103 نفر

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

منوهای آکاردئونی (فرو ریزنده) عموماً در وب سایت ها جهت مدیریت حجم زیادی از محتوا و لیست های راهبری استفاده میشوند. با استفاده از پلاگین 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

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.