|Ratings||Unique User Downloads||Download Rankings|
|Not enough user ratings||Total: 188||All time: 269 This week: 4|
|thrak-repeatable 1.0||BSD License||1.0||HTML, jQuery, Forms|
This is a jQuery plugin that can allow the user to add repeated form inputs.
$.repeatable is a jQuery widget that takes a set of html elements and adds plus and minus buttons that allow to duplicate them.
The original idea came from the need to include one or more file attachments in a very simple form that did not require too complicated uploader widgets ; an example is given below :
A simple UI, using plus (!(images/add-small-enabled.png)) and minus (!(images/delete-small-enabled.png)) buttons, allows to duplicate the current set of html elements (here, a form field of type<input type="file"/>*) :
And, when you reach the maximum number of repetitions (4, in this precise example), then the UI changes a little bit :
Note how the plus (!(images/add-small-enabled.png)) button became grayed (!(images/add-small-disabled.png)) : You cannot add more files any more because the limit (4) has been reached. However, you can delete any instance you like using the !(images/delete-small-enabled.png) button.
The code excerpts presented here come from index.html, which contains a small, quick and dirty example, that define a repeatable group of text and file input fields.
Your first task will be to define html content that will be used as a template for duplication.
Here is a div that includes two input fields, one of type text and one of type file, together with their respective labels ; this block of html code will serve as a template for generating instances :
<div id="demo" class="repeatable" min-instances="1" max-instances="4"> <span>Value : </span> <input type="text" id="value" name="values"/> <span>Attached file : </span> <input type="file" name="files" /> </div>
A few remarks here :
1) You first need jQuery and jQuery UI :
2) then include the repeatable.js script :
3) And finally include a CSS for styling (one example stylesheet, css/repeatable.css, is provided with this package) :
<link rel="stylesheet" href="css/repeatable.css"/>
This is done by calling the repeatable() function on selected jQuery elements :
The container you defined at step #1 is transformed and looks this way after processing (there will be as many samples of the code below as there are instances) :
<div id="demo" class="repeatable repeatable-instance"> <span>Value : </span> <input type="text" id="value" name="values"/> <span>Attached file : </span> <input type="file" name="files" /> </div> <div class="repeatable-buttonset repeatable-buttonset-default repeatable-buttonset-last" target="demo"> <div class="repeatable-button repeatable-button-minus" title="Remove this item"></div> <div class="repeatable-button repeatable-button-plus" title="Add an item"></div> </div>
Note the following differences :
The $.repeatable widget then automatically handles user clicks on the plus and minus buttons to add/remove html blocks based on your template.
Initializes a repeatable object on the selected jQuery elements. options is a an object that can have the following members :
A template instance is added the class repeatable-instance, which can be used to further style it (for example, to add a bottom margin to separate consecutive instances).
A button set is appended next to each template instance ; it can have the following classes :
Each button set contains two inner div elements, for the plus and minus buttons. They have the following classes that can be styled :
See css/repeatable.css for an example style sheet. As you might guess, button images are referenced there...
|Version Control||Unique User Downloads||Download Rankings|