يعد المكون الإضافي Modal الخاص بنا بمثابة أداة رفيعة جدًا للمكوِّن الإضافي js المشروط التقليدي ، مع الحرص بشكل خاص على تضمين الوظائف المجردة فقط التي نطلبها هنا في Twitter.

تحميل

باستخدام bootstrap-modal

$ ( '# my-modal' ). مشروط ( خيارات )

خيارات

اسم	يكتب	إفتراضي	وصف
خلفية	منطقي ، خيط	خاطئة	يتضمن عنصر خلفية مشروط. عيّن الخلفية "static"إذا كنت لا تريد إغلاق المشروط عند النقر فوق الخلفية.
لوحة المفاتيح	قيمة منطقية	خاطئة	يغلق المشروط عند الضغط على مفتاح الهروب
تبين	قيمة منطقية	خاطئة	يفتح مشروط عند تهيئة الفئة

وضع علامة على

يمكنك تنشيط الوسائط على صفحتك بسهولة دون الحاجة إلى كتابة سطر واحد من جافا سكريبت. ما عليك سوى إعطاء عنصر data-controls-modalسمة تتوافق مع معرف العنصر الشرطي ، وعند النقر فوقه ، سيتم تشغيل النموذج الخاص بك. لإضافة خيارات مشروطة ، ما عليك سوى تضمينها كسمات بيانات أيضًا.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static"> Launch Modal </a>    

ملاحظة إذا كنت تريد أن يتحرك النموذج الخاص بك للداخل والخارج ، فما عليك سوى إضافة .fadeفئة إلى .modalالعنصر الخاص بك (راجع العرض التوضيحي لرؤية هذا أثناء العمل).

طُرق

.modal (خيارات)

ينشط المحتوى الخاص بك كمشروط. يقبل الخيارات الاختيارية object.

$ ( '# my-modal' ). مشروط ({
  لوحة المفاتيح : صحيح 
})

.modal ("تبديل")

يبدل مشروط يدويًا.

$ ( '# my-modal' ). مشروط ( "تبديل" )

.modal ("show")

يفتح مشروط يدويا.

$ ( '# my-modal' ). مشروط ( "عرض" )

.modal ("إخفاء")

يدويا يخفي مشروط.

$ ( '# my-modal' ). مشروط ( "إخفاء" )

.modal (صحيح)

إرجاع مثيل فئة مشروط للعناصر.

$ ( '# my-modal' ). مشروط ( صحيح )

إشعار بدلاً من ذلك ، يمكن استرداد هذا باستخدام $().data('modal').

الأحداث

تكشف فئة مشروط Bootstrap عن بعض الأحداث للتثبيت في وظائف مشروطة.

حدث	وصف
تبين	يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
مبين	يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات css).
يخفي	يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
مختفي	يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات css).

$ ( '# my-modal' ). ربط ( "مخفي" ، وظيفة () {   
  // قم بعمل ما ...
})

تجريبي

إطلاق مشروط

هذا البرنامج المساعد هو لإضافة تفاعل القائمة المنسدلة إلى شريط التمهيد العلوي أو التنقلات المبوبة.

تحميل

استخدام bootstrap-dropdown.js

$ ( "#topbar" ). قائمة منسدلة ()

وضع علامة على

لإضافة وظيفة القائمة المنسدلة بسرعة إلى أي عنصر تنقل ، استخدم data-dropdownالسمة. سيتم تلقائيًا تنشيط أي قائمة منسدلة صالحة للتمهيد.

<ul class = "tabs" > 
  <li class = "active" > <a href = "#"> الصفحة الرئيسية </a> </li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle"> قائمة منسدلة </a>  
    <ul class = "القائمة المنسدلة" > 
      <li> <a href = "#"> رابط ثانوي </a> < /li> 
      <li> <a href = "#"> شيء آخر هنا </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> رابط آخر </a> </li> 
    </ul>
  </li>
</ul>

ملاحظة إذا كانت واجهة المستخدم الخاصة بك تحتوي على عدة قوائم منسدلة ، ففكر في إضافة data-dropdownالسمة إلى عنصر حاوية أكثر أهمية مثل .tabsأو .topbar.

طُرق

$ (). القائمة المنسدلة ()

واجهة برمجة تطبيقات برمجية لتنشيط القوائم لشريط علوي معين أو تنقل مبوب.

تجريبي

هذا المكون الإضافي هو لإضافة تفاعل scrollspy (التنقل التلقائي) إلى شريط التمهيد العلوي.

تحميل

باستخدام bootstrap-scrollspy.js

$ ( "#topbar" ). scrollSpy ()

وضع علامة على

لإضافة سلوك التمرير بسهولة إلى التنقل ، ما عليك سوى إضافة data-scrollspyالسمة إلى ملف .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

طُرق

$ (). scrollSpy ()

ينشط السيارات أزرار التنقل من خلال وضع التمرير للمستخدمين.

$ ( "body> .topbar" ). scrollSpy ()

إشعار يجب أن تحتوي علامات الربط Topbar على أهداف معرف قابلة للحل. على سبيل المثال ، <a href="#home">home</a>يجب أن تتوافق مع شيء ما في دوم مثل <div id="home"></div>.

.scrollSpy ("تحديث")

يقوم scrollspy بتخزين أزرار التنقل وإحداثيات القسم للأداء. إذا كنت بحاجة إلى تحديث ذاكرة التخزين المؤقت هذه (على الأرجح إذا كان لديك محتوى ديناميكي) فقط اتصل بطريقة التحديث هذه. إذا كنت تستخدم سمة البيانات لتحديد scrollspy الخاص بك ، فما عليك سوى استدعاء التحديث على الجسم.

$ ( "جسم" ). scrollSpy ( "تحديث" )

تجريبي

تحقق من شريط التنقل العلوي في هذه الصفحة.

يوفر هذا المكون الإضافي وظائف إضافية لإدارة حالة الزر.

تحميل

استخدام bootstrap-Button.js

$ ( ".tabs" ). زر ()

طُرق

$ (). زر ("تبديل")

يبدل حالة الدفع. يعطي btn المظهر الذي تم تنشيطه.

ملاحظة يمكنك تمكين التبديل التلقائي للزر باستخدام data-toggleالسمة.

<button class = "btn" data-toggle = "toggle" > ... </button>   

زر $ (). ("تحميل")

يضبط حالة الزر على التحميل - يعطل الزر ويتبادل النص لتحميل النص. يجب تحديد نص التحميل على عنصر الزر باستخدام سمة البيانات data-loading-text.

<button class = "btn" data-loading-text = "تحميل الأشياء ..." > ... </button>   

$ (). زر ("إعادة تعيين")

إعادة تعيين حالة الزر - تبديل النص بالنص الأصلي.

$ (). زر (سلسلة نصية)

إعادة تعيين حالة الزر - لمبادلة النص بأي حالة نصية محددة بالبيانات.

<button class = "btn" data-complete-text = "finish!" > ... </button>   
<script>
  $ ('. btn'). زر ("مكتمل")
</scrip>

تجريبي

تحميل تجريبي تبديل العرض

يضيف هذا البرنامج المساعد وظيفة سريعة وديناميكية لعلامات التبويب وحبوب منع الحمل.

تحميل

استخدام bootstrap-tabs.js

$ ( ".tabs" ). علامات التبويب ()

وضع علامة على

يمكنك تنشيط علامة تبويب أو التنقل بين الأقراص دون كتابة أي جافا سكريبت بمجرد إعطائهم سمة data-tabsأو data-pillsسمة.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

طُرق

$ (). tabs أو $ (). pills

ينشط وظيفة علامة التبويب وحبوب منع الحمل لحاوية معينة. يجب أن تشير روابط الجدولة إلى المعرفات في المستند.

<ul class = "tabs" > 
  <li class = "active" > <a href = "#home"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#profile"> الملف الشخصي </a> < /li> 
  <li> <a href = "#messages"> الرسائل </a> < /li> 
  <li> <a href = "#settings"> الإعدادات </a> < /li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<script>
  $ ( الوظيفة () {  
    $ ( ".tabs" ). علامات التبويب ()
  })
</script>

الأحداث

حدث	وصف
يتغيرون	يبدأ هذا الحدث عند تغيير علامة التبويب. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة على التوالي.

$ ( "# .tabs" ). ربط ( "تغيير" ، الوظيفة ( هـ ) {   
  ه . الهدف // علامة التبويب المنشط
  ه . relatedTarget // علامة التبويب السابقة
})

تجريبي

• مسكن
• الملف الشخصي
• رسائل
• إعدادات
• اسقاط
  • @سمين
  • mdo

استنادًا إلى المكون الإضافي jQuery.tipsy الممتاز الذي كتبه Jason Frame ؛ Twipsy هو إصدار محدث ، لا يعتمد على الصور ، ويستخدم css3 للرسوم المتحركة ، وسمات البيانات لتخزين العنوان!

تحميل

استخدام bootstrap-twipsy.js

$ ( "# مثال" ). twipsy ( خيارات )

خيارات

اسم	يكتب	إفتراضي	وصف
تحريك	قيمة منطقية	حقيقي	تطبيق انتقال تلاشي css إلى تلميح الأداة
تأخر في	رقم	0	التأخير قبل إظهار تلميح الأداة (مللي ثانية)
تأخير خارج	رقم	0	التأخير قبل إخفاء تلميح الأداة (مللي ثانية)
تقهقر	سلسلة	"	نص لاستخدامه في حالة عدم وجود عنوان تلميح
تحديد مستوى	سلسلة	'في الاعلى'	كيفية وضع تلميح الأداة - أعلاه | أدناه | غادر | حقا
لغة البرمجة	قيمة منطقية	خاطئة	يسمح بمحتوى html داخل تلميح الأدوات
يعيش	قيمة منطقية	خاطئة	استخدم تفويض الحدث بدلاً من معالجات الأحداث الفردية
عوض	رقم	0	إزاحة البكسل لتلميح الأداة من العنصر الهدف
لقب	سلسلة ، وظيفة	'لقب'	سمة أو طريقة لاسترداد نص العنوان
اثار	سلسلة	'يحوم'	كيف يتم تشغيل التلميح - التمرير فوق | التركيز | كتيب
قالب	سلسلة	[ترميز افتراضي]	نموذج html المستخدم لتقديم ملف.

ملاحظة يمكن بدلاً من ذلك تحديد خيارات مثيل twipsy الفردية من خلال استخدام سمات البيانات.

<a href = "#" data-placement = "below" rel ='twipsy' title ='Some title text'> text </a> _    

طُرق

$ (). twipsy (خيارات)

إرفاق معالج twipsy بمجموعة عنصر.

.twipsy ("عرض")

يكشف عن عناصر twipsy.

$ ( "# عنصر" ). twipsy ( "عرض" )

.twipsy ("إخفاء")

يخفي عنصر Twipsy.

$ ( "# عنصر" ). twipsy ( "إخفاء" )

.twipsy (صحيح)

إرجاع مثيل فئة العناصر twipsy.

$ ( "# عنصر" ). twipsy ( صحيح )

إشعار بدلاً من ذلك ، يمكن استرداد هذا باستخدام $().data('twipsy').

تجريبي

يوفر المكون الإضافي popover واجهة بسيطة لإضافة popovers إلى تطبيقك. إنه يوسع المكون الإضافي bootstrap-twipsy.js ، لذا تأكد من الحصول على هذا الملف أيضًا عند تضمين العناصر المنبثقة في مشروعك!

ملاحظة يجب تضمين ملف bootstrap-twipsy.js قبل bootstrap-popover.js.

تحميل

استخدام bootstrap-popover.js

$ ( "# مثال" ). popover ( خيارات )

خيارات

اسم	يكتب	إفتراضي	وصف
تحريك	قيمة منطقية	حقيقي	تطبيق انتقال تلاشي css إلى تلميح الأداة
تأخر في	رقم	0	التأخير قبل إظهار تلميح الأداة (مللي ثانية)
تأخير خارج	رقم	0	التأخير قبل إخفاء تلميح الأداة (مللي ثانية)
تقهقر	سلسلة	"	نص لاستخدامه في حالة عدم وجود عنوان تلميح
تحديد مستوى	سلسلة	'حقا'	كيفية وضع تلميح الأداة - أعلاه | أدناه | غادر | حقا
لغة البرمجة	قيمة منطقية	خاطئة	يسمح بمحتوى html داخل تلميح الأدوات
يعيش	قيمة منطقية	خاطئة	استخدم تفويض الحدث بدلاً من معالجات الأحداث الفردية
عوض	رقم	0	إزاحة البكسل لتلميح الأداة من العنصر الهدف
لقب	سلسلة ، وظيفة	'لقب'	سمة أو طريقة لاسترداد نص العنوان
المحتوى	سلسلة ، وظيفة	"محتوى البيانات"	سلسلة أو طريقة لاسترداد نص المحتوى. إذا لم يتم توفير أي محتوى ، فسيتم الحصول على مصدر المحتوى من سمة محتوى البيانات.
اثار	سلسلة	'يحوم'	كيف يتم تشغيل التلميح - التمرير فوق | التركيز | كتيب
قالب	سلسلة	[ترميز افتراضي]	نموذج html المستخدم لتقديم نافذة منبثقة.

ملاحظة يمكن بدلاً من ذلك تحديد خيارات مثيل المنبثقة الفردية من خلال استخدام سمات البيانات.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover"> text </a>    

طُرق

$ (). popover (خيارات)

يقوم بتهيئة العناصر المنبثقة لمجموعة عنصر.

.popover ("show")

يكشف عن العناصر المنبثقة.

$ ( "# عنصر" ). popover ( "show" )

.popover ("إخفاء")

يخفي العناصر المنبثقة.

$ ( "# عنصر" ). popover ( "إخفاء" )

تجريبي

تحوم من أجل popover

المكون الإضافي للتنبيه هو فئة صغيرة جدًا لإضافة وظائف قريبة إلى التنبيهات.

تحميل

استخدام bootstrap-alerts.js

$ ( ".alert-message" ). تنبيه ()

وضع علامة على

ما عليك سوى إضافة data-alertسمة إلى رسائل التنبيه لمنحها وظائف قريبة تلقائيًا.

خيارات

اسم	يكتب	إفتراضي	وصف
محدد	سلسلة	'.أغلق'	ما محدد لاستهداف إغلاق تنبيه.

طُرق

$ (). alert ()

يلف جميع التنبيهات بوظائف قريبة. لتحريك تنبيهاتك عند إغلاقها ، تأكد من أنها تحتوي على " .fadeو " .inفئة مطبقة عليها بالفعل.

.alert ("close")

يغلق تنبيهًا.

$ ( ".alert-message" ). تنبيه ( "قريب" )

تجريبي