شرح مفصل للملابس الإضافية

المكونات التي تمت مناقشتها في مكونات تخطيط القسم السابقة ليست سوى البداية. يأتي Bootstrap مع 12 JQuery Plugins ، والتي تمدد الوظائف ويمكن أن تضيف المزيد من التفاعلات إلى الموقع. حتى إذا لم تكن مطور JavaScript رفيع المستوى ، فيمكنك البدء في التعلم عن مكون JavaScript لل bootstrap. مع API لبيانات BootStrap (API BootStrap) ، يمكن تشغيل معظم المكونات الإضافية دون كتابة أي رمز.

هناك طريقتان للإشارة إلى البرنامج المساعد Bootstrap على الموقع :

المرجع الفردي: ملفات فردية *.js باستخدام bootstrap. تعتمد بعض مكونات المكونات الإضافية و CSS على المكونات الإضافية الأخرى. إذا كنت تشير إلى الإضافات بشكل منفصل ، فتأكد من طلب التبعيات بين هذه المكونات الإضافية أولاً.

ترجمة (متزامنة) المرجع: استخدم bootstrap.js أو نسخة مضغوطة من bootstrap.min.js.

"لا تحاول الرجوع إلى كلا الملفين في نفس الوقت ، لأن bootstrap.js و bootstrap.min.js يحتويان على جميع المكونات الإضافية."

تعتمد جميع الإضافات على jQuery. لذلك يجب الرجوع إلى jQuery قبل ملف البرنامج المساعد. يرجى زيارة bower.json لعرض نسخة jQuery المدعومة حاليًا من bootstrap.

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

يمكنك استخدام جميع مكونات Bootstrap فقط من خلال واجهة برمجة تطبيقات سمة البيانات دون كتابة سطر واحد من رمز JavaScript. هذه واجهة برمجة تطبيقات من الدرجة الأولى في bootstrap وينبغي أيضًا أن تكون الطريقة المفضلة لديك.

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

$ (وثيقة) .off ('. data-api')

لإغلاق مكون إضافي محدد ، ما عليك سوى إضافة اسم المكون الإضافي كمساحة الاسم قبل مساحة اسم البيانات-API ، كما هو موضح أدناه:

$ (وثيقة) .off ('. ALERT.DATA-API')

2. برمجة API

نحن نقدم واجهة برمجة تطبيقات قائمة على JavaScript Pure لجميع الإضافات Bootstrap. تدعم جميع واجهات برمجة التطبيقات العامة أساليب الاتصال الفردية أو بالسلاسل وإرجاع مجموعة العناصر التي تعمل عليها (ملاحظة: بما يتوافق مع نموذج استدعاء JQuery). على سبيل المثال:

 $ (". btn.danger").

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

 // تهيئة إلى السلوك الافتراضي $ ("#mymodal"). modal () // تهيئة إلى عدم دعم لوحة المفاتيح $ ("#mymodal"). modal ({keyboard: false}) // تهيئة ومكالمة show $ ("#mymodal"). modal ('show')

يعرض كل مكون إضافي أيضًا مُنشئه الأصلي على خاصية المنشئ: $ .fn.popover.constructor. إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فيمكنك الحصول عليه مباشرة من خلال عنصر الصفحة:

$ ('[rel = popover]'). البيانات ('popover').

3. تجنب صراعات مساحة الاسم

في بعض الأحيان ، قد يلزم استخدام المكون الإضافي bootstrap مع أطر عمل واجهة المستخدم الأخرى. في هذه الحالة ، قد تحدث تعارضات مساحة الاسم. إذا حدث هذا للأسف ، يمكنك استعادة قيمته الأصلية عن طريق استدعاء طريقة .noconflict المكوّن الإضافي.

 // إرجاع القيمة المخصصة قبل $.

4. الأحداث

يوفر Bootstrap أحداثًا مخصصة للسلوك الفريد لمعظم الإضافات. بشكل عام ، تأتي هذه الأحداث في شكلين:

الفعل اللانهائي: سيتم تشغيل هذا في بداية الحدث. على سبيل المثال على سبيل المثال: عرض. توفر الأحداث اللانهائية الفعل وظيفة PreventDefault. هذا يسمح بإيقاف العملية قبل بدء الحدث.

 $ ('#mymodal'). on ('show.bs.modal' ، function (e) {// منع عرض مربعات مشروط إذا كانت (البيانات) إرجاع e.preventdefault ()})

نموذج النعت السابق: سيتم تشغيل هذا بعد تنفيذ الإجراء. على سبيل المثال على سبيل المثال: عرض.

ما ورد أعلاه هو نظرة عامة بسيطة على المكون الإضافي bootstrap. آمل أن يكون من المفيد للجميع فهم المكون الإضافي bootstrap.