علامة التبويب (علامة التبويب) عن طريق الجمع بين بعض خصائص البيانات ، يمكنك بسهولة إنشاء واجهة علامة التبويب.
"إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى Tab.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js."
1. الاستخدام
يمكنك تمكين صفحات علامة التبويب بطريقتين:
عن طريق خاصية البيانات: تحتاج إلى إضافة بيانات toggle = "علامة التبويب" أو البيانات toggle = "حبوب منع الحمل" إلى رابط نص المرساة.
ستطبق إضافة فصول NAV و NAV-TABS إلى UL نمط علامة bootstrap ، وإضافة فصول NAV و NAV-PILLS إلى UL ، ستطبق نمط كبسولة bootstrap.
<ul> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ... </ul>
من خلال JavaScript: يمكنك استخدام JavaScript لتمكين علامات التبويب على النحو التالي:
$ ('#mytab a'). انقر فوق (دالة (e) {e.preventDefault () $ (this) .tab ('show')})يوضح المثال التالي تفعيل علامات التبويب الفردية بطرق مختلفة:
// حدد صفحة علامة التبويب $ ('#mytab a [href = "#profile"]'). علامة التبويب ('show') // حدد صفحة علامة التبويب الأولى $ ('#mytab a: first'). علامة التبويب ("show") A '). علامة التبويب (' show ')2
إذا كنت بحاجة إلى تعيين تأثير يتلاشى في علامة التبويب ، أضف .fade إلى كل. TAB-Pane. يجب إضافة علامة التبويب الأولى باستخدام فئة. في لتتلاشى لعرض المحتوى الأولي ، كما هو موضح في المثال التالي:
<viv> <div id = "home"> ... </div> <div id = "svn"> ... </div> <div id = "ios" ... </div> <div id = "java"> ... </div> </div>
3. الطريقة
. $ (). علامة التبويب: تنشط هذه الطريقة عناصر علامات التبويب وحاويات المحتوى. تحتاج صفحة TAB إلى استخدام مستهدف للبيانات أو HREF يشير إلى عقدة الحاوية في DOM.
<ul id = "mytab"> <li> <a href = "#identifier" data-toggle = "tab"> home </a> </li> ..... </ul> <viv> <div id = "hom
رابعا. الأحداث
يسرد الجدول التالي الأحداث المراد استخدامها في البرنامج المساعد (TAB). يمكن استخدام هذه الأحداث كخطافات في الوظائف.
5. أمثلة أساسية
1. العلامات
تُعرف صفحات علامة التبويب عادةً بوظائف TAB.
// الاستخدام الأساسي <ul> <li> <a href = "#html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "#bootstrap" data-toggle = "tab"> bootstrap </a> </li> <a href = " </li> <li> <a href = "#extjs" data-toggle = "tab"> extjs </a> </li></ul> <div style = "padding: 10px ؛ </viv> </viv>
// يمكن تعيين تأثير التلاشي ، وفي الإشارة إلى أن المحتوى المفضل يتم عرضه افتراضيًا <div id = "html5"
تأثير الربط أو غير الربط هو نفسه مع استهدف البيانات
// استخدم JavaScript واستخدم طريقة TAB بشكل مباشر. $ ('#nav a'). on ('click' ، function (e) {e.PreventDefault () ؛ $ (this) .tab ('show') ؛}) ؛ // الأحداث ، أوجه التشابه الأخرى $ ('#nav a'). on ('show.bs.tab' ، function () {Alert ('free at calling tab!') ؛}) ؛ $ ('#nav a'). on ('shown.bs.tab' ، function () {Alert ('free at tab tab!') ؛}) ؛تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Secorts ، مرحبًا بك في النقر للتعلم.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام جدول التمهيد
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.