@patternslib/patternslib
Version:
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
104 lines (97 loc) • 3.69 kB
HTML
<html>
<head>
<title>pat-clone demo page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
</head>
<body>
<h1>Example 1 with hidden template</h1>
<form action=""
class="pat-form"
novalidate>
<fieldset class="vertical">
<div
class="pat-clone"
data-pat-clone="template: #clone-template; trigger-element: .clone-trigger; max: 5">
<!-- First visible instance and also template -->
<fieldset class="clone">
<legend>Family member 1</legend>
<input
name="name-1"
size="20"
type="text"
placeholder="Name"
required="required"
/>
<input
name="date-1"
type="date"
placeholder="birthdate"
/>
<button
type="button"
class="small pat-button remove-clone icon-trash"
>
Remove
</button>
</fieldset>
<fieldset id="clone-template" hidden>
<legend>Family member #{1}</legend>
<input
name="name-#{1}"
size="20"
type="text"
placeholder="Name"
required="required"
/>
<input
name="date-#{1}"
type="date"
placeholder="birthdate"
/>
<button
type="button"
class="small pat-button remove-clone icon-trash"
>
Remove
</button>
</fieldset>
</div>
<div class="button-bar">
<!-- Clone trigger -->
<button type="button" class="pat-button clone-trigger">
Add an extra family member
</button>
<button class="pat-button" id="submit" type="submit">
submit
</button>
</div>
</fieldset>
</form>
<h1>Example 2 with template tag</h1>
<template id="clone-template-2">
<br/>
<label>Manufactor #{1}
<input type="text" name="manufactor-#{1}" />
</label>
<label>Model #{1}
<input type="text" name="model-#{1}" />
</label>
<button type="button" class="remove-clone">Remove</button>
</template>
<form
class="pat-clone"
data-pat-clone="template: #clone-template-2; trigger-element: .clone-trigger-2">
<button type="button" class="clone-trigger-2">Add new row</button>
</form>
<h1>Example 3</h1>
<div class="pat-clone">
<div class="item">
okay!
<button class="add-clone">Clone!</button>
</div>
</div>
</body>
</html>