https://github.com/lienoil/jquery-cloner
A jQuery plugin to clone HTML content
https://github.com/lienoil/jquery-cloner
clonable-elements decrement increment jquery jquery-cloner jquery-plugin
Last synced: 9 days ago
JSON representation
A jQuery plugin to clone HTML content
- Host: GitHub
- URL: https://github.com/lienoil/jquery-cloner
- Owner: lienoil
- License: mit
- Created: 2016-11-23T07:32:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T16:43:02.000Z (about 3 years ago)
- Last Synced: 2025-08-11T03:37:26.536Z (4 months ago)
- Topics: clonable-elements, decrement, increment, jquery, jquery-cloner, jquery-plugin
- Language: JavaScript
- Homepage: https://lienoil.github.io/jquery-cloner/
- Size: 947 KB
- Stars: 13
- Watchers: 2
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
### Installation
via bower:
```
bower install jquery-cloner
```
via npm:
```
npm install jquery-cloner
```
or download or clone (pun!) on [GitHub](https://github.com/lioneil/jquery-cloner).
### Usage
jQuery Cloner relies on classes and attributes to work.
A simple sample markup:
```html
Attribute 1
Delete
Add Attributes
```
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);
```
### Options
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.log`ging 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-increment`s 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.
### Deployment
Copy the /dist/\*.js folder to your project
### Versioning
The project uses SemVer for versioning. For the versions available, see the tags on this repository.
### Authors
* John Lioneil Dionisio
See also the list of [contributors](#) who participated in this project.
### License
[MIT License](https://raw.githubusercontent.com/lioneil/jquery-cloner/master/LICENSE)
### Acknowledgment
* Andrey Mikhaylov (aka lolmaus) for his [jquery.closestchild](https://github.com/lolmaus/jquery.closestchild)
* Everyone over at [stackoverflow](http://stackoverflow.com/tags/jquery), and other various resources.
* to the Muses of Inspiration