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

مرجع کار با JS Tab در بوت استرپ 4

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

مرجع کار با JavaScript Tab در بوت استرپ 4:

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

کلاس
توضیح
nav nav-tabs
کلاس یک منوی پیمایش (Navigation Bar) با استفاده از لبه ها یا Tabs ایجاد می کند.
کلاس nav nav-pills
یک منوی پیمایش (Navigation Bar) با استفاده از pills، ایجاد می کند.
کلاس nav-item
عناصر منوی Tab را ایجاد می کند.
کلاس nav-link
یک آیتم درون منوی Tab را با ظاهر لینک، استایل دهی می کند.
کلاس nav-justified
عناصر Tab/Pills منوی Tab را به صورت تمام عرض صفحه یا معادل عرض عنصر مادر خود در صفحات نمایش بزرگتر از 768 پیکسل، نشان می دهد. در صفحات نمایش کوچکتر از 768 پیکسل، آیتم های Tab به صورت افقی، بر روی هم قرار می گیرند.
کلاس tab-content
این کلاس در صورت استفاده همزمان با کلاس های tab-pane و خاصیت data-toggle=”tab”، آیتم های لبه یا Tab را به صورت Toggleable (در صورت کلیک روی آنها، تغییر می دهند از حالت نمایان به مخفی و بر عکس) در می آورد.
کلاس tab-pane
در صورت استفاده همزمان با کلاس tab-content و خاصیت data-toggle=”tab”، عناصر لبه Tab را به صورت قابل مخفی/نمایان شدن یا Toggleable در می آورد، که با کلیک کاربر روی آنها تغییر وضعیت می دهند از حالت مخفی به نمایان و برعکس.

آموزش ایجاد منوی Tab با خواص Data Attributes :

برای اتصال لینک هر Tab به بخش محتوای آن، بایستی خاصیت data-toggle=”tab” را به هر Tab اضافه کنید. سپس به هر عنصر دربرگیرنده محتوی Tab، کلاس tab-pane داده و یک ID منحصر به فرد برایش انتخاب کنید که بایستی معادل خاصیت href لینک Tab ها باشد. سپس تمامی محتواهای Tab را در یک عنصر دربرگیرنده با کلاس tab-content قرار دهید. همانند کد مثال عملی زیر :

مثال 1





...
امتحان کنید

آموزش ایجاد منوی Tab با کد جاوا اسکریپت :

کد مثال قبل را برای ایجاد و فعال سازی یک منوی Tab، با جاوا اسکریپت نوشته ایم :

مثال 2

// Select all tabs
$('.nav-tabs a').click(function(){
  $(this).tab('show');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show')

// Select last tab
$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
امتحان کنید

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

در جدول زیر، به توضیح و نشان دادن کاربرد تمامی رویدادهای Events عنصر Scrollspy پرداخته ایم :

رویداد
توضیح
متد Show.bs.tab
زمانی اتفاق می افتد که یک لبه یا Tab در حال ظاهر شدن و نمایش است.
متد Shown.bs.tab
زمانی اتفاق می افتد که یک لبه یا Tab کامل ظاهر شده و نمایش داده شده است (پس از اتمام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
متد hide.bs.tab
زمانی اتفاق می افتد که آیتم tab در حال بستن و مخفی شدن است.
متد hidden.bs.tab
زمانی اتفاق می افتد که آیتم tab به طور کامل بسته شده و مخفی شده است (پس از انجام عملیات CSS Transition یا ظاهر و مخفی شدن تدریجی عنصر).
نکته :

توسط متدهای event.target و event.related.Target در jQuery می توانید لبه یا Tab فعال (active) در لحظه و لبه فعال قبلی را به دست آورده و نمایش دهید. همانند کد مثال عملی زیر :

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

در جدول زیر، به تشریح متدهای موجود برای عنصر Scrollspy در Bootstrap پرداخته ایم :

متد
توضیحات
متد tab(“show”)
این متد، لبه یا tab هدف را نمایش می دهد.
  • 36
  •    46
  • تاریخ ارسال :   1398/09/05

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

ارسال

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

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