jQuery Cloner

A jQuery plugin to clone HTML content

Getting Started

This guide will help you install and use jQuery Cloner. See deployment for notes on how to deploy this plugin on frontend development on a live website.

$3

via bower:
``
bower install jquery-cloner
`

via npm:
`
npm install jquery-cloner
`

or download or clone (pun!) on GitHub.




$3

jQuery Cloner relies on classes and attributes to work.

A simple sample markup:

`html







`
In the example above, the `data-toggle="cloner"` will automatically initialize our HTML.

Manual initialization, then, is as easy as:

`
// main.js
(function ($) {
$('#my-clonable-block').cloner();
})(jQuery);
`


$3

The plugin have options you can modify. Below is the list of options with their default values:

`
$('#my-clonable-block').cloner({
clonableContainer: '.clonable-block',
clonable: '.clonable',
addButton: '.clonable-button-add',
closeButton: '.clonable-button-close',
focusableElement: ':input:visible:enabled:first',

clearValueOnClone: true,
removeNestedClonablesOnClone: true,
limitCloneNumbers: true,

debug: false,

cloneName: 'clonable-clone',
sourceName: 'clonable-source',

incrementName: 'clonable-increment',
decrementName: 'clonable-decrement',
});
`

clonableContainer - The class that should contain all our clonable elements, including the Add Button

clonable - The class of the clonable element. This is the html chunk that will be repeated.

addButton - The class of the button that will fire the toggle method, prompting the cloning action.

closeButton - The class of the button that will fire the remove method, prompting to remove the clonable element. Important: this element should be inside a clonable element.

focusableElement - The attribute or input tag inside a newly cloned clonable to place the cursor over.

clearValueOnClone - The plugin will clone the last instance of the clonable class. This option will toggle to remove or retain all previous input values.

removeNestedClonablesOnClone - Toggle to remove all clone instances of the clonableContainer.

limitCloneNumbers - Will only work for decrementing clonables.

debug - Switch console.logging on/off.

incrementName - this option will increment all values inside a clonable. It uses suffixes (html, value, and any attribute like class, id, etc.) to know which integers will be incremented.
Take the below as an example:

`

`

In this example, we have classes of clonable-increments with suffixes -id and -name which corresponds with the input tag's id=attr_1 and name="attr[0]". Performing a clone, therefore will result in


`


`
It does this using regex.

decrementName - The reverse of increment.

beforeToggle - this is a function callback you can hook into before the cloning action is fired. It accepts parameters $clone( the clone of the last clonable), index (the clonables' length), and self (a catch-all reference of the jQuery-Cloner itself). An example use case:
`
$('#my-clonable-block').cloner({
beforeToggle: function ($clone, i, self) {
// console.log(self);
var $container = self.$container;
if ($clone.find('input:last').val() == "") {
$container.css({border:'1px solid red'});
} else {
$container.css({border:'none'});
}
},
});
`

afterToggle - this will fire after the cloning` action is triggered.

$3

Copy the /dist/\*.js folder to your project

$3

The project uses SemVer for versioning. For the versions available, see the tags on this repository.

$3

* John Lioneil Dionisio

See also the list of contributors who participated in this project.

$3

MIT License

$3

* Andrey Mikhaylov (aka lolmaus) for his jquery.closestchild
* Everyone over at stackoverflow, and other various resources.
* to the Muses of Inspiration