This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Using dataset attributes</title> | |
| <script data-main="scripts/dataset" src="scripts/require.js"></script> | |
| </head> | |
| <body> | |
| <!-- any attribute whose name is lowercase and starts with "data-" is considered | |
| a valid HTML5 attribute --> | |
| <span class="circle" data-radius="50" data-title="Circle of life"/> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * circle.js | |
| **/ | |
| define({ | |
| "draw": function(node) { | |
| var dataset = node.dataset; | |
| var radius = parseInt(dataset.radius); | |
| var title = dataset.title; | |
| alert("Drawing circle with title '" + title + "' and radius " + radius); | |
| } | |
| }); | |
| /******************************************************************************************************/ | |
| /** | |
| * dataset.js | |
| * | |
| * This demo assumes my project looks like | |
| * projectfolder | |
| * - circle.html | |
| * - scripts | |
| * - dataset.js | |
| * - circle.js | |
| **/ | |
| requirejs(["./circle"], function(circle) { | |
| //let's draw the circle <span class="circle" data-radius="50"/> | |
| circle.draw(document.querySelector(".circle")); | |
| }); |
No comments:
Post a Comment