jquery-cloner
Version:
A jQuery plugin to clone HTML content
111 lines (102 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Cloner Test</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 10px;
font-family: 'Open Sans', Roboto, Helvetica, Arial, sans-serif;
}
code {
background: #f1f1f1;
display: inline-block;
padding: 10px;
}
.result {
border: 1px solid #f1f1f1;
padding: 2rem;
}
</style>
</head>
<body>
<div style="margin-top:1rem"></div>
<div class="container">
<div class="col-sm-12 form-horizontal">
<div class="clonable-block" data-toggle="cloner" data-options='{"clearValueOnClone":false}'>
<div class="clonable" data-ss="1">
<label for="" class="clonable-increment-html">1 2</label>
<input id="person_1" class="form-control clonable-decrement-value clonable-increment-placeholder" type="text" name="person[0]" placeholder="person[0][name][1]" value="5 4">
</div>
<button id="hap" class="clonable-button-add btn btn-primary" type="button">Add person</button>
</div>
<div class="clonable-block" data-toggle="cloner">
<div class="clonable" data-ss="1">
<div class="row">
<div class="col-sm-10">
<div class="form-group row">
<label for="person_1" class="col-sm-2 clonable-increment-for">Person <span class="clonable-increment-html">#1</span></label>
<div class="col-sm-10">
<input id="person_1" class="form-control clonable-increment-id clonable-increment-placeholder clonable-increment-name" type="text" name="person[0]" placeholder="person[0][name][1]">
</div>
</div>
<div class="attributes row">
<div class="col-sm-10 col-sm-offset-2">
<!-- attr -->
<div class="clonable-block" data-toggle="cloner">
<div class="clonable form-group row" data-clone-number="1">
<label for="attr_1" class="col-sm-2 clonable-increment-for">Child <span class="clonable-increment-html">#1</span></label>
<div class="col-sm-9">
<input id="attr_1" class="form-control clonable-increment-id clonable-increment-name" type="text" name="attr[0]">
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger clonable-button-close">Delete</button>
</div>
</div>
<div class="clonable form-group row" data-clone-number="1">
<label for="attr_2" class="col-sm-2 clonable-increment-for">Child <span class="clonable-increment-html">#2</span></label>
<div class="col-sm-9">
<input id="attr_2" class="form-control clonable-increment-id clonable-increment-name" type="text" name="attr[1]">
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger clonable-button-close">Delete</button>
</div>
</div>
<button id="sad" class="clonable-button-add btn btn-default" type="button">Add Child</button>
</div>
<!-- end attr -->
<br><br>
<!-- top ten songs -->
<div class="clonable-block" data-toggle="cloner">
<div class="clonable form-group row clonable-clone-number-decrement" data-clone-number="3">
<label for="songs_1" class="col-sm-2 clonable-increment-for">Top <span class="clonable-decrement-html">3</span> Songs</label>
<div class="col-sm-9">
<input id="songs_1" class="form-control clonable-increment-id clonable-increment-name" type="text" name="attr[0]">
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-danger clonable-button-close">Delete</button>
</div>
</div>
<button class="clonable-button-add btn btn-default" type="button">Add Song</button>
</div>
<!-- top ten songs -->
</div>
</div>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger clonable-button-close">Delete Person</button>
</div>
</div>
<hr>
</div>
<button id="hap" class="clonable-button-add btn btn-primary" type="button">Add person</button>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../dist/jquery.cloner.min.js"></script>
</body>
</html>