جافا سكريبت

قم بإضفاء الحيوية على Bootstrap باستخدام مكونات JavaScript الإضافية الاختيارية المبنية على jQuery. تعرف على كل مكون إضافي وبياناتنا وخيارات API البرمجية والمزيد.

فردي أو مجمعة

يمكن تضمين المكونات الإضافية بشكل فردي (باستخدام Bootstrap الفردي js/dist/*.js) ، أو كلها مرة واحدة باستخدام bootstrap.jsأو مصغرة bootstrap.min.js(لا تقم بتضمين كليهما).

إذا كنت تستخدم حزمة (Webpack ، Rollup ...) ، يمكنك استخدام /js/dist/*.jsملفات جاهزة UMD.

التبعيات

تعتمد بعض المكونات الإضافية ومكونات CSS على المكونات الإضافية الأخرى. إذا قمت بتضمين المكونات الإضافية بشكل فردي ، فتأكد من التحقق من هذه التبعيات في المستندات. لاحظ أيضًا أن جميع الملحقات تعتمد على jQuery (وهذا يعني أنه يجب تضمين jQuery قبل ملفات البرنامج المساعد). استشرناpackage.json لمعرفة إصدارات jQuery المدعومة.

تعتمد القوائم المنسدلة والقوائم المنبثقة وتلميحات الأدوات أيضًا على Popper.js .

سمات البيانات

يمكن تمكين جميع ملحقات Bootstrap وتهيئتها تقريبًا من خلال HTML وحدها باستخدام سمات البيانات (طريقتنا المفضلة لاستخدام وظائف JavaScript). تأكد من استخدام مجموعة واحدة فقط من سمات البيانات على عنصر واحد (على سبيل المثال ، لا يمكنك تشغيل تلميح أداة ومشروط من نفس الزر.)

ومع ذلك ، قد يكون من المرغوب في بعض الحالات تعطيل هذه الوظيفة. لتعطيل واجهة برمجة تطبيقات سمة البيانات ، قم بفك ربط جميع الأحداث في مساحة أسماء المستندات data-apiمثل:

$(document).off('.data-api')

بدلاً من ذلك ، لاستهداف مكون إضافي معين ، ما عليك سوى تضمين اسم المكون الإضافي كمساحة اسم مع مساحة اسم data-api مثل هذا:

$(document).off('.alert.data-api')

الأحداث

يوفر Bootstrap أحداثًا مخصصة لمعظم الإجراءات الفريدة للمكونات الإضافية. بشكل عام ، تأتي هذه في صيغة المصدر والماضي - حيث يتم تشغيل المصدر (على سبيل المثال show) في بداية الحدث ، ويتم تشغيل شكل الفاعل الماضي ( shownعلى سبيل المثال) عند الانتهاء من إجراء ما.

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

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

API برمجي

نعتقد أيضًا أنه يجب أن تكون قادرًا على استخدام جميع ملحقات Bootstrap فقط من خلال JavaScript API. جميع واجهات برمجة التطبيقات العامة هي طرق مفردة وقابلة للتسلسل ، وتعيد المجموعة التي تم التصرف بناءً عليها.

$('.btn.danger').button('toggle').addClass('fat')

يجب أن تقبل جميع التوابع كائن خيارات اختياري ، أو سلسلة تستهدف طريقة معينة ، أو لا شيء (الذي يبدأ مكونًا إضافيًا بسلوك افتراضي):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

يعرض كل مكون إضافي أيضًا المُنشئ الخام الخاص به على Constructorخاصية $.fn.popover.Constructor:. إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فاسترجعه مباشرةً من عنصر $('[rel="popover"]').data('popover'):.

وظائف وانتقالات غير متزامنة

جميع طرق API البرمجية غير متزامنة وتعود إلى المتصل بمجرد بدء النقل ولكن قبل أن ينتهي .

من أجل تنفيذ إجراء بمجرد اكتمال الانتقال ، يمكنك الاستماع إلى الحدث المقابل.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

الإعدادات الافتراضية

يمكنك تغيير الإعدادات الافتراضية للمكون الإضافي عن طريق تعديل Constructor.Defaultكائن المكون الإضافي:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

لا تعارض

في بعض الأحيان يكون من الضروري استخدام ملحقات Bootstrap مع أطر عمل أخرى لواجهة المستخدم. في هذه الحالات ، يمكن أن تحدث تضاربات مساحة الاسم أحيانًا. إذا حدث هذا ، فيمكنك الاتصال .noConflictعلى المكون الإضافي الذي ترغب في إرجاع قيمته.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

أرقام الإصدارات

يمكن الوصول إلى إصدار كل من ملحقات jQuery في Bootstrap عبر VERSIONخاصية مُنشئ المكون الإضافي. على سبيل المثال ، بالنسبة لمكوِّن تلميح الأدوات الإضافي:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

لا توجد إجراءات احتياطية خاصة عند تعطيل JavaScript

لا تتراجع مكونات Bootstrap الإضافية برشاقة خاصة عند تعطيل JavaScript. إذا كنت مهتمًا بتجربة المستخدم في هذه الحالة ، <noscript>فاستخدمها لشرح الموقف (وكيفية إعادة تمكين JavaScript) للمستخدمين ، و / أو إضافة احتياطياتك المخصصة.

Util

تعتمد جميع ملفات JavaScript في Bootstrap util.jsويجب تضمينها جنبًا إلى جنب مع ملفات JavaScript الأخرى. إذا كنت تستخدم المترجم (أو المصغر) bootstrap.js، فلا داعي لتضمين هذا - فهو موجود بالفعل.

util.jsيتضمن وظائف الأداة المساعدة ومساعد أساسي transitionEndللأحداث بالإضافة إلى محاكي انتقال CSS. يتم استخدامه بواسطة المكونات الإضافية الأخرى للتحقق من دعم انتقال CSS وللتقاط الانتقالات المعلقة.

المطهر

تستخدم Tooltips و Popovers معقمنا المدمج لتعقيم الخيارات التي تقبل HTML.

whiteListالقيمة الافتراضية هي التالية:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

إذا كنت ترغب في إضافة قيم جديدة إلى هذا الإعداد الافتراضي whiteList، يمكنك القيام بما يلي:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

إذا كنت تريد تجاوز المطهر الخاص بنا لأنك تفضل استخدام مكتبة مخصصة ، على سبيل المثال DOMPurify ، فيجب عليك القيام بما يلي:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})