dynamic
Version:
Declarative DOM behaviour
121 lines (104 loc) • 4.04 kB
HTML
<html>
<head>
<title>Dynamic.js demo</title>
<style type="text/css">
section {
border-bottom: solid #333 1px;
margin: 2em;
}
h2 {
display: block;
font-weight: bold;
}
section {
display: block;
}
.hide {
display: none;
}
</style>
<script>
// Shim HTML5 elements in old IE
document.createElement('section');
</script>
</head>
<body>
<h1>Dynamic.js demo</h1>
<section>
<h2>I toggle the message's display via a data attribute</h2>
<label>
On
<input type="radio" name="toggle_radio_data" value="on" data-dyn-toggle-on="change" data-dyn-toggle="#toggle_message_data" checked>
</label>
<label>
Off
<input type="radio" name="toggle_radio_data" value="off" data-dyn-toggle-on="change" data-dyn-toggle="#toggle_message_data">
</label>
<p id="toggle_message_data">I am toggled on!</p>
</section>
<section>
<h2>I toggle the message's display via a data attribute and a selector function</h2>
<label>
On
<input type="radio" name="toggle_radio_data_with_fn" value="on" data-dyn-toggle-on="change" data-dyn-toggle="@closest(section) > #toggle_message_data_with_fn" checked>
</label>
<label>
Off
<input type="radio" name="toggle_radio_data_with_fn" value="off" data-dyn-toggle-on="change" data-dyn-toggle="@closest(section) > #toggle_message_data_with_fn">
</label>
<p id="toggle_message_data_with_fn">I am toggled on!</p>
</section>
<section>
<h2>I toggle the messages' displays via a data attribute with expression</h2>
<p>
<label>
First
<input type="radio" name="toggle_radio_data_with_expr_which" value="1" checked>
</label>
<label>
Second
<input type="radio" name="toggle_radio_data_with_expr_which" value="2">
</label>
</p>
<p>
<button
data-dyn-toggle-on="click"
data-dyn-toggle-toggle-expr="$('#toggle_message_data_with_expr_' + $('[name=toggle_radio_data_with_expr_which]:checked').val())"
>
Toggle
</button>
</p>
<p id="toggle_message_data_with_expr_1">[First] I am toggled on!</p>
<p id="toggle_message_data_with_expr_2">[Second] I am toggled on!</p>
</section>
<section>
<h2>I toggle the message's display via a JSON config</h2>
<div>
<label>
On
<input type="radio" name="toggle_radio_json" value="on" id="json_toggle_on" checked>
</label>
<label>
Off
<input type="radio" name="toggle_radio_json" value="off" id="json_toggle_off">
</label>
</div>
<p id="toggle_message_json">I am toggled on!</p>
<script type="text/x-dyn-json">
{
"#json_toggle_on, #json_toggle_off": {
"on": "change",
"behaviour": "toggle",
"toggle": "#toggle_message_json"
}
}
</script>
</section>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../dist/dynamic.js"></script>
<script>
dynamic.create(jQuery).applyTo(jQuery('html'));
</script>
</body>
</html>