Adding dataset demo
This commit is contained in:
parent
a1510f9566
commit
2c1586a8e2
|
@ -1,4 +1,13 @@
|
|||
[
|
||||
{
|
||||
"desc": "dataset (data-* attributes)",
|
||||
"url": "dataset",
|
||||
"tags": "dataset",
|
||||
"support": {
|
||||
"live": "chrome",
|
||||
"nightly": "safari"
|
||||
}
|
||||
},
|
||||
{
|
||||
"desc": "History API using pushState",
|
||||
"url": "history",
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
<style>
|
||||
#test {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 20px 0;
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
padding: 10px;
|
||||
border: 1px dashed #ccc;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<title>data-*</title>
|
||||
<article>
|
||||
<section>
|
||||
<p>The <code>data-[name]</code> attribute on elements can now be accessed directly via the DOM using <code>element.dataset.[attr]</code>.</p>
|
||||
<p>Try openning the Web Console and editing <code>element.dataset</code> directly: <br /><code>element.dataset.foo = 'bar';</code></p>
|
||||
</section>
|
||||
<p id="status">Not connected</p>
|
||||
<section>
|
||||
<div id="test" data-name="rem" data-height="short">This element has data</div>
|
||||
<input type="button" value="Show data" id="show" />
|
||||
<input type="button" value="Change data via dataset" id="change1" />
|
||||
<input type="button" value="change data via setAttribute" id="change2" />
|
||||
</section>
|
||||
<pre><code id="element">[click buttons above to show element html]</code></pre>
|
||||
</article>
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
function show() {
|
||||
code.innerHTML = test.outerHTML.replace(/[<>]/g, function (m) {
|
||||
return { '<': '<', '>': '>' }[m];
|
||||
});
|
||||
|
||||
for (var prop in test.dataset) {
|
||||
code.innerHTML += '\nel.dataset.' + prop + ' = "' + test.dataset[prop] + '"';
|
||||
}
|
||||
}
|
||||
|
||||
var state = document.getElementById('status'),
|
||||
code = document.getElementById('element');
|
||||
|
||||
var test = window.element = document.getElementById('test');
|
||||
|
||||
if (test.dataset === undefined) {
|
||||
state.innerHTML = 'dataset not supported';
|
||||
state.className = 'fail';
|
||||
} else {
|
||||
state.className = 'success';
|
||||
state.innerHTML = 'element.dataset supported';
|
||||
}
|
||||
|
||||
addEvent(document.getElementById('show'), 'click', function () {
|
||||
show();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('change1'), 'click', function () {
|
||||
test.dataset.name = 'via el.dataset';
|
||||
show();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('change2'), 'click', function () {
|
||||
test.setAttribute('data-name', 'via setAttribute');
|
||||
show();
|
||||
});
|
||||
|
||||
|
||||
})();
|
||||
</script>
|
Loading…
Reference in New Issue