ایجاد کلیدهای پویا در Bootstrap

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

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

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

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

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

ایجاد کلیدهای پویا از طریق ویژگی های -data :

میتوانید بدون نیاز به نوشتن هیچ کد جاوا اسکریپتی، محتوای یک کلید را فعال کنید. کافیست ویژگی "data-toggle="tab را روی هر کلید (در تگ a) تعریف کرده و یک div با کلاس tab-pane. و با شناسه منحصر به فرد برای هر کلید ایجاد کنید و آن ها را داخل یک div با کلاس tab-content. قرار دهید.

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

ایجاد کلیدهای پویا با جاوا اسکریپت :

همچنین میتوانید کلید ها را با استفاده از جاوا اسکریپت ایجاد نمایید. هر کلید باید به تنهایی و به صورت تک به تک فعال شود.

میتوانید هر کدام از کلیدها را به چندین روش فعال کنید :

توابع :

تابع زیر، تابع استاندارد Bootstrap برای کلیدها میباشد.

('tab('show.()$

این تابع یک کلید و محتوای مربوط به آن را فعال میکند. کلید باید بک data-target یا href جهت لینک شدن به کانتینر در DOM ، داشته باشد.

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

event	توضیحات
show.bs.tab	این رویداد زمانی که محتوای کلید نشان داده میشود، فعال میشود(اما قبل از اینکه کلید جدید باز شود). میتوانید از `event.target و event.relatedTarget` برای لینک شدن به کلید فعلی و کلید فعال قبلی (در صورت وجود) استفاده نمایید.
shown.bs.tab	این رویداد بعد از نمایش داده شدن یک کلید، فعال میشود. میتوانید از `event.target و event.relatedTarget` برای لینک شدن به کلید فعلی و کلید فعال قبلی (در صورت وجود) استفاده نمایید.
hide.bs.tab	این رویداد زمانی که کلید فعلی در حال مخفی شدن و یک کلید جدید در حال باز شدن میباشد، فعال میشود. میتوانید از `event.target و event.relatedTarget` برای لینک شدن به کلید فعلی و کلید فعال بعدی که به زودی نمایش داده خواهد شد، استفاده نمایید.
hidden.bs.tab	این رویداد زمانی که کلید قبلی مخفی شده و یک کلید جدید باز شده است، فعال میشود. میتوانید از `event.target و event.relatedTarget` برای لینک شدن به کلید فعال قبلی و کلید فعال جدید، استفاده نمایید.

مثال زیر نام کلید فعال و کلید قبلی را زمانی که انتقال یک کلید به طور کامل تمام شده باشد، به کاربر نمایش میدهد.

مطلب بعدی -> ایجاد tooltip در Bootstrap

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

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

24 تیر 1403

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

20 تیر 1403

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

2 خرداد 1402

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

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