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

مروری بر پلاگین ها

پلاگین های بوت استرپ

بوت استرپ با 12 پلاگین jQuery همراه است که این پلاگین ها توانسته اند قابلیت های بوت استرپ را توسعه داده و می توانند قابلیت های تعاملی بیشتری را به وب سایت ما اضافه نمایند. برای کار با پلاگین های جاوا اسکریپت بوت استرپ ، نیازی نیست که یک توسعه دهنده حرفه ای جاوا اسکریپت باشیم . با استفاده از Bootstrap Data API ، بسیاری از پلاگین ها را می توان بدون نوشتن حتی یک خط کد راه اندازی نمود.

پلاگین های Bootstrap را می توان به دو صورت به سایت خود اضافه نمود :

• به صورت جداگانه : با استفاده از فایل های جداگانه *.js بوت استرپ. برخی از پلاگین ها و مؤلفه های CSS به سایر پلاگین ها وابستگی دارند. اگر بخواهیم که پلاگین ها را به صورت جداگانه وارد نماییم ، باید مطمئن شویم که این وابستگی ها را در اسناد خود مدنظر قرار می دهیم.
• یا به صورت کامپایل شده (دسته جمعی) : با استفاده از فایل bootstrap.js یا bootstrap.min.js . باید از یکی از این فایل ها استفاده نماییم ؛ زیرا هر دو این فایل ها ، حاوی تمام پلاگین ها می باشند.

نکته : تمام پلاگین ها به jQuery وابستگی دارند. بنابراین jQuery باید قبل از فایل های پلاگین نصب شود. برای این که بدانیم کدامیک از ورژن های jQuery پشتیبانی می شوند ، قسمت bower.json را بررسی می کنیم.

ویژگی های داده

• تمام پلاگین های بوت استرپ با استفاده از Data API در دسترس قرار می گیرند. از این رو ، ما نیازی به اضافه کردن حتی یک خط کد از جاوا اسکریپت برای فراخوانی هر یک از ویژگی های پلاگین ها نداریم.
• در برخی موارد ممکن است نیاز باشد که قابلیت Data API خاموش شود. در این صورت می توانیم ویژگی ها را با اضافه کردن خط کد جاوا اسکریپت زیر لغو نماییم.

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

• برای غیرفعال کردن یک پلاگین خاص / واحد ، فقط نام پلاگین را به عنوان یک namespace همراه با namespace مربوط به data-api مانند نمونه زیر اضافه می کنیم :

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

برنامه نویسی با API

توسعه دهندگان بوت استرپ بر این باورند که ما باید قادر باشیم از تمام پلاگین ها صرفاً از طریق API جاوا اسکریپت استفاده کنیم. تمام API های عمومی یک متد واحد و زنجیری هستند ، و مجموعه ای را باز می گرداند. به طور مثال :

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

تمام متد ها ، یک شیء با آپشن های اختیاری را قبول می کنند ، یک رشته (string) که یک متد خاص را تعیین می کند یا هیچ چیز (nothing) را تعیین نمی کند (در این صورت یک پلاگین با رفتار پیش فرض را راه اندازی می کند) ، همان طور که در مثال زیر نشان داده شده است :

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

هر پلاگین ، هم چنین سازنده خام خود را در یک خصیصه Constructor قرار می دهد :
fn.popover.Constructor.$ .  اگر بخواهیم یک نمونه خاص پلاگین را دریافت کنیم ، آن را مستقیماً از یک عنصر بازیابی می کنیم :

$('[rel = popover]').data('popover').

No Conflict

پلاگین های Bootstrap گاهی اوقات می توانند با سایر فریم ورک های UI مورد استفاده قرار گیرند. در چنین شرایطی ، گاهی اوقات ممکن است تداخل های namespace رخ دهد. برای غلبه بر این مشکل ، noConflict. را در پلاگینی که می خواهیم مقدار آن را بازگردانیم ، فراخوانی می کنیم.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

رویدادها

بوت استرپ ، رویدادهای سفارشی را برای اکثر فعالیت های منحصر به فرد پلاگین فراهم می نماید. به طور کلی ، این رویدادها به دو فرم می آیند:

• فرم Infinitive – این فرم در آغاز رویداد ایجاد می شود. به عنوان مثال رویدادهای show.Infinitive  عملکرد preventDefault را فراهم می کنند. این عملکرد این امکان را فراهم می کند تا قبل از شروع اجرای یک اقدام ، آن را متوقف نمود.

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

• فرم Past participle : این فرم در مرحله تکميل يک اقدام عمل مي کند. مانند shown .