In this post we describe Step by step How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap.In this article we build a custom jQuery Plugin to display :
- a customizable HTML Form with all input types as required (including text, email, number, date, color, file, hidden, datetime, button input types)
- fully customizable style , with the defaults using Twitter Bootstrap CSS3 styles .
The complete jquery plugin can be downloaded from this GitHub repository:
This custom jquery plugin will display by default a HTML5 form like this:
How to Build a Custom jQuery Plugin to display a Form using Twitter Bootstrap
We start by adding references to the jQuery and to the CSS3 Bootstrap style frameworks. Therefore browse to http://jquery.com/download/ and to the Bootstrap's web site and get the latest releases in CDN(Content Delivery Network):
Then add those links, and also two new files (one for the style , and the other one will hold our jQuery plugin) to the head element in a new HTML5 file :
After the body element, call the plugin:
Notice the classes properties , holding Twitter Bootstrap definitions.Now code the plugin as follows:
First thing our plugin will do is to merge the received arguments with the default ones, by using the jQuery $.extend() method .
Next we create the Form using jQuery, and setting its style and action parameters:
We also added the Form's Title .
Then we loop over the oFields array, which contain the required input elements to be created together with the labels for its names:
Also we added the style.
Take a look at that array, and you will see that it contains the required input elements in the form of element-name + element-type like this : "Attachment","file" .
Then we do the same with the oRadio array containing the radio buttons if required, inserting radiobuttons and its labels as follows, looping over the collection and appending the created elements to a new <div> :
Finally, we add a <div> holding two buttons, for Resetting and for Submitting the Form:
Our jquery plugin will return the "this" instance, to allow jquery chaining for it:
And our runtime fully customizable HTML5 Form will show as this:
Also, we code the following CSS3 style to the styles.css file:
We hope that this article was useful to you.Happy programming with jQuery.....
by Carmel Schvartzman
כתב: כרמל שוורצמן