Introduction

jCloner is a jQuery plugin for the elements on your webpage. It allows you to create clones of any HTML elements on your page with just a single click of a mouse.

jCloner is an extension of the jQuery clone() fuction with more customization and flexibility to fit most of your needs. The footprint is less than 3 KB in size.

Download

(requires jQuery 1.3 or above)

jCloner 1.0 (minified)	2.2 KB
jCloner 1.0 (uncompressed)	2.7 KB
Download working demo	28.7 KB

Demo

Name:
Email Address

Add more users

Installation

Step 1: Include a reference to the jQuery Core library (1.3 or above) and the jCloner plugin.

<script language="javascript" src="jquery.js"><script>
<script language="javascript" src="jquery.jCloner.js"></script>

Step 2: In your HTML file, provide the markup required by jCloner ("TABLE", "DIV" etc).


	
	  
		Name:
		
		  

		
	  
	  
		Email Address 
		
	  
	
	
	

	
		
			
		
	
	Add more users

In the example above, we have a form wrapped around a table. Note that the table has an id and a class attribute.

The following DIV is where the new clone element shall be copied into. This can be placed anywhere in the BODY tag:

 <div id="NewUserInfoContainer"></div>

Step 3: Finally you need to fire a call to the jCloner plugin and supply your parameters:

 <script language="javascript">
	$(document).ready(function () {

		$('#UserInformation').jCloner({
			cloneClass: 'UserInformation',
			addTextID: 'AddMoreUsers',
			removeText: 'Remove User',
			removeClass: 'link',
			removeTextAppend: '',
			confirmOnRemove: true,
			confirmText: 'Sure to remove?',
			maxItemsAllowed: 5,
			appendElement: 'NewUserInfoContainer'

		});
	}
</script>

jCloner accepts the following arguments:

cloneClass: The name of the class for the parent element to be cloned.

addTextID: Specify the ID for the "Add more" link.

removeText: You can specify any text that you'd like the "Remove" link read.

removeClass: This specifies the class for the "Remove" link.

removeTextAppend: This is where you can specify any text or html markup you would like to appened after the "remove" link.

confirmOnRemove: Determines whether a confirmation message to be displayed before deleting the selected element. Accepts a boolean value. Setting it to "True" will display a confirmation box to the user before deleting the element.

confirmText: Specify any text for the remove confirmation prompt window.

maxItemsAllowed: Specifying the maximum number of elements to be cloned. Can be any integer for example 0, 10, 25 etc.

appendElement: This is where the cloned copy shall be copied to. Usually this is an ID for a <DIV> element. The DIV can be placed anywhere within the body tag.