@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
76 lines (75 loc) • 2.52 kB
HTML
<html>
<head>
<title>Switch demo page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/style/common.css" />
<script src="/bundle.min.js"></script>
</head>
<body>
<style>
li.mode-Red {
color: red ;
}
li.mode-Green {
color: green;
}
li.mode-Blue {
color: blue;
}
</style>
<article class="pat-rich">
<h3>Selectively remove class and remember state</h3>
<p>
<button
class="small pat-button pat-switch"
data-pat-switch="selector: ul.test1 li; remove: mode-Blue ; add: mode-Green; store: session"
title="Make all green"
>
Green
</button>
<button
class="small pat-button pat-switch"
data-pat-switch="selector: ul.test1 li; remove: mode-Green ; add: mode-Blue; store: session"
title="Make all blue"
>
Blue
</button>
</p>
<ul class="test1">
<li class="mode-Blue">This entry was originally blue</li>
<li class="mode-Green">This entry was originally green</li>
<li class="mode-Red">This entry will always be red</li>
</ul>
<h3>Remove using prefix</h3>
<p>
<button
class="small pat-button pat-switch"
data-pat-switch="selector: ul.test2 li; remove: mode-* ; add: mode-Red"
title="Make all red"
>
Red
</button>
<button
class="small pat-button pat-switch"
data-pat-switch="selector: ul.test2 li; remove: mode-* ; add: mode-Green"
title="Make all green"
>
Green
</button>
<button
class="small pat-button pat-switch"
data-pat-switch="selector: ul.test2 li; remove: mode-* ; add: mode-Blue"
title="Make all blue"
>
Blue
</button>
</p>
<ul class="test2">
<li class="foo mode-Blue bar">Entry 1</li>
<li class="mode-Green">Entry 2</li>
<li>Entry 3</li>
</ul>
</article>
</body>
</html>