Skip to content

Commit

Permalink
update demo page and doc, fix script locater for image source
Browse files Browse the repository at this point in the history
  • Loading branch information
@metallurgical
metallurgical committed Jun 4, 2015
1 parent de6efa1 commit d0a322c
Show file tree
Hide file tree
Showing 4 changed files with 268 additions and 19 deletions.
79 changes: 79 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ Simple plugin to clone DOM element.
- Specified position cloned element.
- Clone the element as many as you want.
- With unique ID(s) auto increment.
- Clone table rows even column also.
- Limit the number of cloned element into specified value.



Expand Down Expand Up @@ -65,6 +67,7 @@ Configurations available for this plugin :
6. **copyValue : false** : Deep copy include value or empty. Available option is **true** and **false**.
7. **btnRemoveText : 'Remove me'** : Text appeared on remove button.
8. **btnCloneText : 'Create New Element'** : Text appeared on clone button.
9. **cloneLimit** : 'infinity' : Accept integer number only. This option limit the number of cloned element. After reach the value provided, user no longer can clone element unless remove cloned element.

# Basic Usage #

Expand Down Expand Up @@ -295,6 +298,82 @@ Configurations available for this plugin :
});
```

**10. Example 10 - Clone element with limit element to clone.**

``` html
<!-- **HTML** -->
<div class="toClone_example10">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
```
``` javascript
//**JS**
// This selector applied for element/container that want to clone
$('.toClone_example10').metalClone({
cloneLimit : 3
});
```

**11. Example 11 - Clone element with limit element to clone and number of element to clone[must be noted that, the limit specified must be higher than number of element to clone.**

``` html
<!-- **HTML** -->
<div class="toClone_example11">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
```
``` javascript
//**JS**
// This selector applied for element/container that want to clone
$('.toClone_example11').metalClone({
cloneLimit : 3,
numberToClone : 2
});
```

**12. Example 11 - Event work with table rows and column to clone.**

``` html
<!-- **HTML** -->
<div class="toClone_example12">
<table border="1">
<tr>
<td>No.</td>
<td>Name</td>
<td>Ic</td>
<td>Gender</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="toClone_example12">
<td><input type="text" size="5" id="kk"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
</div>
```
``` javascript
//**JS**
// This selector applied for element/container that want to clone
$('.toClone_example12').metalClone({
cloneLimit : 3
});
```

# Demo Page #
- **[Click ME](https://metallurgical.github.io/metalClone "Jquery Metal Clone")**

Expand Down
160 changes: 160 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<title>Example 1</title>
<link href="codeHighlighter/prism.css" rel="stylesheet">
<link href="metalClone.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="codeHighlighter/prism.js"></script>
<script src="jquery.metalClone.min.js"></script>
Expand Down Expand Up @@ -467,6 +468,147 @@ <h3>jQuery CheckAll - Demo</h3>
</div>



<div class="container">
<span><strong>Example 10 - Clone element with limit element to clone.</strong></span>
<br/>
<div class="toClone_example10">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
<div class="container_body">
<pre>
<code class="language-markup">
<script type="prism-html-markup">
HTML
<div class="toClone_example10">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
</script>
</code>

<code class="language-javascript">
jQuery
$('.toClone_example10').metalClone({
cloneLimit : 3
});
</code>
</pre>
</div>
</div>



<div class="container">
<span><strong>Example 11 - Clone element with limit element to clone and number of element to clone[must be noted that, the limit specified must be higher than number of element to clone.</strong></span>
<br/>
<div class="toClone_example11">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
<div class="container_body">
<pre>
<code class="language-markup">
<script type="prism-html-markup">
HTML
<div class="toClone_example11">
<input type="text">
<select id="m">
<option value="">--Please Select</option>
<option value="Hello">Hello</option>
</select>
</div>
</script>
</code>

<code class="language-javascript">
jQuery
$('.toClone_example11').metalClone({
cloneLimit : 3,
numberToClone : 2
});
</code>
</pre>
</div>
</div>




<div class="container">
<span><strong>Example 12 - Event work with table TR clone.</strong></span>
<br/>
<div id="toClone_example12">
<table border="1">
<tr>
<td>No.</td>
<td>Name</td>
<td>Ic</td>
<td>Gender</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="toClone_example12">
<td><input type="text" size="5" id="kk"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
</div>
<div class="container_body">
<pre>
<code class="language-markup">
<script type="prism-html-markup">
HTML
<table border="1">
<tr>
<td>No.</td>
<td>Name</td>
<td>Ic</td>
<td>Gender</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="toClone_example12">
<td><input type="text" size="5" id="kk"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
</script>
</code>

<code class="language-javascript">
jQuery
$('.toClone_example12').metalClone({
cloneLimit : 3
});
</code>
</pre>
</div>
</div>


<script>
$(function(){

Expand Down Expand Up @@ -532,6 +674,24 @@ <h3>jQuery CheckAll - Demo</h3>
btnCloneText : 'Wow, make another copy'
});

// Example 10
$('.toClone_example10').metalClone({
cloneLimit : 3
});

// Example 11
$('.toClone_example11').metalClone({
cloneLimit : 3,
numberToClone : 2

});

// Example 12
$('.toClone_example12').metalClone({
cloneLimit : 3

});



});
Expand Down
46 changes: 28 additions & 18 deletions jquery.metalClone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,8 @@

$.fn.metalClone = function(options , callback){


opt = $.extend({}, $.fn.metalClone.defaults, options);
var scriptPath = function () {
var scripts = document.getElementsByTagName('SCRIPT');
var path = '';
if(scripts && scripts.length>0) {
for(var i in scripts) {
if(scripts[i].src && scripts[i].src.match(/\/jquery.metalClone\.js$/)) {
path = scripts[i].src.replace(/(.*)\/jquery.metalClone\.js$/, '$1');
break;
}
}
}
return path;
};


// Get the selector
Expand All @@ -45,8 +33,8 @@
var currentDestination = opt.destination;
var currentIds = opt.ids;
var currentBtnRemoveText = opt.btnRemoveText;
var destinationNodeType = (currentDestination) ? $(currentDestination)[0].nodeName : 'none';
var cloneLimit = opt.cloneLimit;
var destinationNodeType = (currentDestination) ? $(currentDestination)[0].nodeName : 'none';
var cloneLimit = opt.cloneLimit;


// Table list(match with selection)
Expand Down Expand Up @@ -107,7 +95,7 @@
// then make new one
if (opt.btnClone === null) {
// create new clone button with unique id
currentBtnClone = "metalBtnClone"+Math.floor(Math.random()*9+1);
currentBtnClone = "metalBtnClone"+Math.floor(Math.random()*99999999999+1);
//console.log(typeSelector);


Expand Down Expand Up @@ -248,10 +236,31 @@

return;



});


function scriptPath() {
var scripts = $('script');
var path = '';
if(scripts && scripts.length>0) {
for(var i in scripts) {

var regex = /jquery.metalClone*/g;
var regexRep = /jquery.metalClone.js|jquery.metalClone.min.js/g;

if(scripts[i].src && scripts[i].src.match(regex)) {

path = scripts[i].src.replace(regexRep, '');
break;
}
}
}
return path;
};



/*===============================================
| Function to clone element(IF destination provided)
|================================================
Expand Down Expand Up @@ -621,6 +630,7 @@
else
name = typeSelector.replace('#', '');

console.log(name);
return name;
}

Expand Down Expand Up @@ -724,7 +734,7 @@
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
cloneLimit : 'infinity'
cloneLimit : 'infinity' // limit the element that want to clone

// Please wait for callback option.. coming soon..

Expand Down
Loading

0 comments on commit d0a322c

Please sign in to comment.