@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
77 lines (72 loc) • 2.34 kB
HTML
<html>
<head>
<title>Toggle</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
<style>
.green {
background-color: #23bf42;
}
.blue {
background-color: #94bfdd;
}
.red {
background-color: #cf6400;
}
.blue,
.red,
.green {
display: inline-block;
padding: 5px 15px;
color: white;
}
</style>
</head>
<body>
<div class="row">
<article class="pat-rich six columns">
<h2>Toggle a class</h2>
<p>
<span class="red" id="toToggle"
>This is getting toggled</span
>
</p>
<p>
<button
class="pat-button pat-toggle"
data-pat-toggle="selector: #toToggle; value: red blue; store: session"
>
Change colour
</button>
</p>
<p>Also notice how the status persists across page reloads.</p>
</article>
<!-- XXX Disable because currently it's not possible to toggle other attributes, only classes
<article class="pat-rich six columns">
<h2>Toggling of attributes</h2>
<fieldset class="pat-checklist">
<label for="">
<input type="checkbox" id="toCheck" /> I will be ticked by the button below
</label>
</fieldset>
<br/>
<p><button class="pat-button pat-toggle" data-pat-toggle="#toCheck checked checked">Toggle checkbox</button></p>
</article>
-->
</div>
<section>
<h2>Toggle with checkboxes and pat-checklist</h2>
<div class="red" id="toggle-2">
This is getting toggled
</div>
<label
class="pat-checklist pat-toggle"
data-pat-toggle="selector: #toggle-2; value: red green; store: local">
<input type="checkbox" name="toggler">
change
</label>
</section>
</body>
</html>