@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
184 lines (171 loc) • 8.86 kB
HTML
<html>
<head>
<title>Demo page</title>
<meta charset="utf-8">
<script src="/bundle.min.js"></script>
<style>
fieldset fieldset {
padding-left: 4em;
}
</style>
</head>
<body>
<div class="functions" id="ElemOutsidePatChecklist">
<h3>Select / Deselect all for example 2</h3>
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
</div>
<form class="vertical row">
<div class="six columns">
<h3>Example 1: Checkboxes</h3>
<fieldset class="pat-checklist checklist">
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label
><input type="checkbox" checked="checked" /> Option
one</label
>
<label><input type="checkbox" /> Option two</label>
<label><input type="checkbox" /> Option three</label>
<label><input type="checkbox" /> Option four</label>
</fieldset>
<h3>Radio buttons</h3>
<fieldset class="pat-checklist checklist radio">
<label
><input type="radio" name="radio" /> Strawberry</label
>
<label><input type="radio" name="radio" checked="checked" /> Banana</label>
<label><input type="radio" name="radio" /> Raspberry</label>
</fieldset>
</div>
<div class="six columns">
<h3>Example 2: Buttons outside of .pat-checklist element</h3>
<p>
The buttons to select or deselect the checklist may lie
outside of the .pat-checklist element. However, to avoid
mismatches, the selectors then need to be disambiguated by
starting with an object id. In other words, the selector
needs to start with <em>#elementId</em>.
</p>
<fieldset
class="pat-checklist checklist"
data-pat-checklist="select: #ElemOutsidePatChecklist .select-all; deselect: #ElemOutsidePatChecklist .deselect-all"
>
<label
><input type="checkbox" checked="checked" /> Option
one</label
>
<label><input type="checkbox" /> Option two</label>
<label><input type="checkbox" /> Option three</label>
<label><input type="checkbox" /> Option four</label>
</fieldset>
</div>
</form>
<form class="vertical row">
<div class="six columns">
<h3>Example 3: Toggle checkbox</h3>
<p>
Clicking the toggle checkbox to change the states.
</p>
<fieldset class="pat-checklist checklist">
<label><input type="checkbox" class="toggle-all" /> Toggle checkboxes</label>
<label><input type="checkbox" checked="checked" /> Option one</label>
<label><input type="checkbox" /> Option two</label>
<label><input type="checkbox" /> Option three</label>
<label><input type="checkbox" /> Option four</label>
</fieldset>
</div>
</form>
<form class="vertical row">
<div class="six columns">
<h3>Example 4: Hierarchy of Checkboxes</h3>
<p>
Clicking select all / deselect all only affects parent of
buttons and its children.
</p>
<fieldset class="pat-checklist">
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<fieldset class="pat-checklist-sub">
<legend>Customer Experience</legend>
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<fieldset class="pat-checklist-sub">
<legend class="label icon-squares">Airport experience and servicing</legend>
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label><input type="checkbox"> A1.1 Fast Bag Drop</label>
<label><input type="checkbox"> A1.2 Self-bag tagging</label>
</fieldset>
<fieldset class="pat-checklist-sub">
<legend>2. Baggage</legend>
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label><input type="checkbox">A2.1 Special baggage procedures</label>
<label><input type="checkbox">A2.2 Baggage Tag Format</label>
</fieldset>
</fieldset>
<fieldset class="pat-checklist-sub">
<legend>Benefits & Recognition</legend>
<fieldset class="pat-checklist-sub">
<legend class="label icon-squares">1. Benefits</legend>
<div class="pat-toolbar">
<div class="toggles list-functions pat-button-cluster">
<button class="pat-button select-all">Select all</button>
<button class="pat-button deselect-all">Deselect all</button>
</div>
</div>
<label><input type="checkbox">B1.1 Star Alliance Gold check-in & Fast Bag Drop</label>
<label><input type="checkbox">B1.2 Star Alliance Gold Track Security / Immigration</label>
</fieldset>
</fieldset>
</fieldset>
</div>
<div class="six columns"></div>
</form>
<section>
<header>
<h3>Infinite scrolling example</h3>
</header>
<form class="pat-checklist">
<label><input type="checkbox" class="toggle-all" />Toggle checkboxes</label><br>
<fieldset id="infinite-boxes">
<label><input type="checkbox" checked="checked" /> Option one</label><br>
<label><input type="checkbox" /> Option two</label><br>
<label><input type="checkbox" /> Option three</label><br>
<label><input type="checkbox" /> Option four</label><br>
<a
href="./index.html#infinite-boxes"
class="pat-inject"
data-pat-inject="trigger: autoload-visible; target:self::element"
>Loading...</a>
</fieldset>
</form>
</section>
</body>
</html>