Bootstrap Plugins

Bootstrap provides bundle of plugins which specifies more functionality and adds more interaction to website by using Bootstrap’s individual *.js files or using bootstrap.js and minified bootstrap.min.js files at once. If we include individually then, we have to check for dependencies in the docs.

also read:

Bootstrap plugins includes following forms:

  • Using complied JavaScript: We can include plugins at once by using both bootstrap.js and bootstrap.min.js files or using individual file.
  • Component data attributes: Data attributes allows to store extra information on HTML elements. We cannot have data attributes from multiple plugins. To perform this, use wrapping element which specifies HTML structure around each element.
  • Plugin dependencies: The dependencies page shows the dependencies that plugins has on other plugins. If we include individually then, we have to check for dependencies in the docs.

Data Attributes

We access the Bootstrap plugins by using Data API without including a single line of JavaScript to use plugin features. Data attribute is the first consideration when using the program. Sometimes we need to turn the Data API functionality off. To unbind this functionality, we use the following line:

$(document).off(‘.data-api’)

If we want to turn off the particular plugin, just write the name of the plugin along with the data-api namespace as shown in the following line:

$(document).off(‘alert.data-api’)

Programmatic API

We can use Bootstrap plugins by using JavaScript API’s which are single, chainable methods and return the collection acted upon. For example:

$(“.btn-danger”).button(“toggle”).addClass(“fat”)

All methods accept options object, string or nothing which has default behavior as shown below:

$(“#myModel”).modal(); //initializes with defaults
$(“#myModel”).modal({keyboard: false}); //initialized with no keyboard
$(“#myModel”).modal(‘show’); //initializes and invokes show immediately

No conflict

Sometimes we use Bootstrap plugins with other UI frameworks. So there may be chances of collision between plugins and UI frameworks. To prevent this collision, we use .noConflict class on the plugin.

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

Events

Bootstrap provides custom events for most of the plugins by using two forms:

  • infinitive form: It is used when event begins. It specifies preventDefault functionality which could stop the execution of action before it starts.
$(‘#myModel’).on(‘show.bs.modal’,function(e){
If(!data)return e.preventDefault() //
})
  • past participle form: This form executes after the completion of an action. As in the above script, show is the infinitive form which triggers at the start of event and shown triggers on the completion of an action.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*