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

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

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

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

در این بخش نحوه ایجاد کلیدهای پویا (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
اشتراک گذاری:
021-41658