From 25736d8f9f0de17e6cbd95dbbb58306fb3649ed6 Mon Sep 17 00:00:00 2001 From: metallurgical Date: Thu, 7 May 2015 15:19:39 +0800 Subject: [PATCH] update demo page, and fix minors bug on .js file --- index.html | 451 +++++++++++++++++++++++++++++++++++++++++-- jquery.metalClone.js | 106 ++++++---- 2 files changed, 511 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index b95533e..77a8510 100644 --- a/index.html +++ b/index.html @@ -37,22 +37,22 @@

jQuery CheckAll - Demo

Usage : @@ -72,12 +72,40 @@

jQuery CheckAll - Demo

+
+
+
+
+
+
+
+jQuery
+$('.toClone_example1').metalClone({
+	btnClone 	: '.btn_example1',
+	copyValue 	: false
+});
+
+
+
+
- Example 1 - Clone element [immediate after last element] with value copied. + Example 2 - Clone element [immediate after last element] with value copied.
@@ -89,6 +117,353 @@

jQuery CheckAll - Demo

+
+
+
+
+
+
+
+jQuery
+$('.toClone_example2').metalClone({
+	btnClone 	: '.btn_example2',
+	copyValue 	: true
+});
+
+
+
+
+ + + + +
+ Example 3 - Clone element [before first element] without value copied. +
+
+ + +
+
+ +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example3').metalClone({
+	btnClone 	: '.btn_example3',
+	position	: 'before',
+	copyValue 	: false
+});
+
+
+
+
+ + + + +
+ Example 4 - Clone element [before first element] with value copied. +
+
+ + +
+
+ +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example4').metalClone({
+	btnClone 	: '.btn_example4',
+	position	: 'before',
+	copyValue 	: true
+});
+
+
+
+
+ + + + +
+ Example 5 - Clone element [immediate after last element] with specified the number of element to copy. +
+
+ + +
+
+ +
+ +
+
+
+
+
+
+
+jQuery
+$('.toClone_example5').metalClone({
+	btnClone 		: '.btn_example5',
+	position		: 'after',
+	numberToClone 	: 5
+});
+
+
+
+
+ + + +
+ Example 6 - Clone element [immediate after last element] with specified the number of element to copy and the destination to place the newly cloned element. +
+
+ + +
+
+ +
+
+ Please place the newly cloned element here +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example6').metalClone({
+	btnClone 			: '.btn_example6',
+	position			: 'after',
+	numberToClone 		: 5,
+	destination 		: '.toClone_example6_destination'
+});
+
+
+
+
+ + + +
+ Example 7 - Clone element [immediate after last element] with specified the number of element to copy and the destination to place the newly cloned element with unique ID(s). +
+
+ + +
+
+ +
+
+ Please place the newly cloned element here +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example7').metalClone({
+	btnClone 			: '.btn_example7',
+	position			: 'after',
+	numberToClone 		: 5,
+	destination 		: '.toClone_example7_destination',
+	ids					: ['select']
+});
+
+
+
+
+ + + + +
+ Example 8 - Clone element [immediate after last element] without specified clone button(will create new one with name "Create New Element"). +
+
+ + +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example8').metalClone({
+	position	: 'after'
+});
+
+
+
+
+ + +
+ Example 9 - Clone element [immediate after last element] with specified clone and remove button name. +
+
+ + +
+
+
+
+
+
+
+
+jQuery
+$('.toClone_example9').metalClone({
+	position			: 'after',
+	btnRemoveText		: 'Please delete me from this',
+	btnCloneText		: 'Wow, make another copy'
+});
+
+
+
@@ -97,14 +472,64 @@

jQuery CheckAll - Demo

// Example 1 $('.toClone_example1').metalClone({ - btnClone : '.btn_example1', - copyValue : true + btnClone : '.btn_example1', + copyValue : false }); // Example 2 $('.toClone_example2').metalClone({ - btnClone : '.btn_example2', - copyValue : false + btnClone : '.btn_example2', + copyValue : true + }); + + // Example 3 + $('.toClone_example3').metalClone({ + btnClone : '.btn_example3', + position : 'before', + copyValue : false + }); + + // Example 4 + $('.toClone_example4').metalClone({ + btnClone : '.btn_example4', + position : 'before', + copyValue : true + }); + + // Example 5 + $('.toClone_example5').metalClone({ + btnClone : '.btn_example5', + position : 'after', + numberToClone : 5 + }); + + // Example 6 + $('.toClone_example6').metalClone({ + btnClone : '.btn_example6', + position : 'after', + numberToClone : 5, + destination : '.toClone_example6_destination' + }); + + // Example 7 + $('.toClone_example7').metalClone({ + btnClone : '.btn_example7', + position : 'after', + numberToClone : 5, + destination : '.toClone_example7_destination', + ids : ['select'] + }); + + // Example 8 + $('.toClone_example8').metalClone({ + position : 'after' + }); + + // Example 9 + $('.toClone_example9').metalClone({ + position : 'after', + btnRemoveText : 'Please delete me from this', + btnCloneText : 'Wow, make another copy' }); diff --git a/jquery.metalClone.js b/jquery.metalClone.js index 7a3f3fd..d79a6bd 100644 --- a/jquery.metalClone.js +++ b/jquery.metalClone.js @@ -1,4 +1,18 @@ -(function($){ +/*=================================================================== + | jQuery Metal Clone Plugins + |=================================================================== + | http://thunderwide.com + | + | @category Plugins + | @author Norlihazmey + | @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + | and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + | @copyright (c) 2015 Norlihazmey(metallurgical) + | @version 1.0.0 + | @Github https://github.com/metallurgical/jquery-metal-clone + |===================================================================*/ + +;(function($){ $.fn.metalClone = function(options , callback){ @@ -36,42 +50,66 @@ | If user did't not provided the class or id name for | cloned button, then system will provided one |================================================*/ - if (opt.btnClone === '.metalBtnClone') { + // initialize global variable for clone button + var currentBtnClone; + + // If user not defined clone button, + // then make new one + if (opt.btnClone === null) { + // create new clone button with unique id + currentBtnClone = "metalBtnClone"+Math.floor(Math.random()*9+1); $('',{ type : 'button', value : opt.btnCloneText, - class : 'btnClone' + class : currentBtnClone }).insertAfter(typeSelector); + + // Concat the . sysmbol at beggining of + // class name for dynamic create button + currentBtnClone = '.'+currentBtnClone; + } + // if user defined the button itself, + // then use user defined button instead + else{ + currentBtnClone = opt.btnClone; } -//console.log(opt.copyValue); - var currentCopyValue = opt.copyValue; - var currentPosition = opt.position; + + // Capture the configuration options + var currentCopyValue = opt.copyValue; + var currentPosition = opt.position; + var currentNumberToClone = opt.numberToClone; + var currentDestination = opt.destination; + var currentIds = opt.ids; + var currentBtnRemoveText = opt.btnRemoveText; + + + console.log(currentBtnClone); /*=============================================== | When Clone button was clicked |================================================*/ - $(document).on('click', opt.btnClone, function(){ - //console.log(p); + $(document).on('click', currentBtnClone, function(){ + // Store the destination of cloned element var destinationClone; // If destination provided, // then use user defined destination - if (opt.destination !== false){ + if (currentDestination !== false){ // Use user defined destination - destinationClone = $(opt.destination); + destinationClone = $(currentDestination); // Put either after or before depend // on user defined position if (currentPosition === "after"){ - loopCloneAppendPrepend(opt.numberToClone, element, destinationClone, currentPosition); + loopCloneAppendPrepend(currentNumberToClone, element, destinationClone, currentPosition); return; } else { - loopCloneAppendPrepend(opt.numberToClone, element, destinationClone, currentPosition); + loopCloneAppendPrepend(currentNumberToClone, element, destinationClone, currentPosition); return; } @@ -84,10 +122,10 @@ destinationClone = $(typeSelector); if (currentPosition === "after"){ - loopCloneAfterBefore(opt.numberToClone, element, destinationClone.last(), currentPosition); + loopCloneAfterBefore(currentNumberToClone, element, destinationClone.last(), currentPosition); return; } else { - loopCloneAfterBefore(opt.numberToClone, element, destinationClone.first(), currentPosition); + loopCloneAfterBefore(currentNumberToClone, element, destinationClone.first(), currentPosition); return; } } @@ -121,36 +159,37 @@ if (position === "after"){ for(var i = 0; i < numberToClone; i++){ var toClone = cloneObj.clone(); - destination.append(toClone.append('')); + destination.append(toClone.append('')); if(currentCopyValue){ /* never copy */}else{clearForm(toClone);} } - return; + } // If want to clone before else if (position === "before"){ for(var i = 0; i < numberToClone; i++){ var toClone = cloneObj.clone(); - destination.prepend(toClone.append('')); + destination.prepend(toClone.append('')); if(currentCopyValue){ /* never copy */}else{clearForm(toClone);} } - return; + } // If the opt.ids is an empty array // Is a default value - if($.isArray(opt.ids) && $.isEmptyObject(opt.ids)){ + if($.isArray(currentIds) && $.isEmptyObject(currentIds)){ + // id will not increament // do nothing - // console.log('ss'); + } // If user provided element in array container // Then call the function // pass the opt.ids array value[* or a few] - else if ($.isArray(opt.ids) && !$.isEmptyObject(opt.ids)){ - + else if ($.isArray(currentIds) && !$.isEmptyObject(currentIds)){ + // call the function - idIncreament(opt.ids); + idIncreament(currentIds); } return; } @@ -182,13 +221,13 @@ for(var i = 0; i < numberToClone; i++){ var toClone = cloneObj.clone(); toClone.insertAfter(destination) - .append(''); + .append(''); if(currentCopyValue){ console.log('a');/* never copy */}else{clearForm(toClone);} } - return; + } // If want to clone before else if (position === "before"){ @@ -197,27 +236,27 @@ for(var i = 0; i < numberToClone; i++){ var toClone = cloneObj.clone(); toClone.insertBefore(destination) - .append(''); + .append(''); if(currentCopyValue){ /* never copy */}else{clearForm(toClone);} } - return; + } // If the opt.ids is an empty array // Is a default value - if($.isArray(opt.ids) && $.isEmptyObject(opt.ids)){ + if($.isArray(currentIds) && $.isEmptyObject(currentIds)){ // id will not increament // do nothing - // console.log('ss'); + } // If user provided element in array container // Then call the function // pass the opt.ids array value[* or a few] - else if ($.isArray(opt.ids) && !$.isEmptyObject(opt.ids)){ + else if ($.isArray(currentIds) && !$.isEmptyObject(currentIds)){ // call the function - idIncreament(opt.ids); + idIncreament(currentIds); } @@ -226,7 +265,7 @@ function clearForm(container){ - console.log('sdf'); + container.find('input:not("input[type=button], input[type=submit]"), textarea, select').each(function(){ $(this).val(''); }) @@ -312,10 +351,11 @@ // - i // - strong // - h1-h6 + // * -> find all element inside container // - ...... // ~~~~~ all HTML tag are availeble - btnClone : '.metalBtnClone', // Put your selector(button class or id name) eg : .clickMe | #clickMe + btnClone : null, // Put your selector(button class or id name) eg : .clickMe | #clickMe copyValue : false, // Clone together the previous element value - available for form element only btnRemoveText : 'Remove me', // Text appear on remove button btnCloneText : 'Create New Element' // Text appear on clone button