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

آموزش ایجاد تب با Bootstrap

در این آموزش فراخواهید گرفت که با استفاده از تویتر بوت استرپ چگونه تب های پویا برای قرار دادن بین محتوا ایجاد کرد.

ایجاد تب با تویتر بوت استرپ

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

مثال:

    

خروجی مثال بالا مانند تصویر زیر خواهد بود.

Bootstrap

ایجاد تب پویا با اسثفاده از ویژگی های داده

شما می توانید مولفه ی یک تب را بدون نوشتن کد جاوااسکریپت فعال کنید –به سادگیdata- toggle="tab" را روی هرتب مشخص کنید و یک .tab-pane با یک ID خاص برای هر تب ایجاد کنید و آنها را در .tab-content قرار دهید.

زیر به شما نشان خواهد داد که چگونه یک مولفه ی تب پایه از طریق ویژگی های داده در تویتر بوت استرپ ایجاد کنید.

مثال:

    

    

Section A content…

Section B content…

ایجاد تب های پویا از طریق جاوا اسکریپت

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

مثال:

    

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

مثال

$('#myTaba[href="#profile"]').tab('show'); // show tab targeted by the selector

$("#myTab a:first").tab('show'); // show first tab

$("#myTab a:last").tab('show'); // show last tab

$("#myTabli:eq(2) a").tab('show'); // show third tab (0-indexed, like an array)

این روش استاندارد مربوط به تب بوت استرپ می باشد.

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

مثال:


رویدادها

این ها رویدادهای استاندارد تب برای بهتر کردن عملکرد تب می باشند.

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

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



  • 1909
  •    2022
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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