| New file |
|---|
| 0,0 → 1,66 |
|---|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>Dojo Toolkit - Declaration test</title> |
| <style type="text/css"> |
| @import "../../dojo/resources/dojo.css"; |
| @import "../themes/tundra/tundra.css"; |
| @import "css/dijitTests.css"; |
| </style> |
| <script type="text/javascript" src="../../dojo/dojo.js" |
| djConfig="parseOnLoad: true, isDebug: true"></script> |
| <script type="text/javascript"> |
| dojo.require("dijit.Declaration"); |
| dojo.require("dijit.ProgressBar"); |
| dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
| </script> |
| </head> |
| <body class="tundra"> |
| <h3>Simple macro:</h3> |
| <p>(Check to make sure that links contain employee number) |
| <div dojoType="dijit.Declaration" widgetClass="Employee" defaults="{ empid: 123, name: '' }"> |
| <span>${name}</span> |
| <a href="update.php?id=${empid}">update</a> |
| <a href="delete.php?id=${empid}">delete</a> |
| </div> |
| <div dojoType="Employee" empid="100" name="Alan Allen"></div> |
| <div dojoType="Employee" empid="101" name="Bob Brown"></div> |
| <div dojoType="Employee" empid="102" name="Cathy Cameron"></div> |
| |
| <h3>Using dojoAttachEvent, dojoAttachPoint</h3> |
| <div dojoType="dijit.Declaration" widgetClass="HideButton"> |
| XXX<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>XXX |
| <script type='dojo/method' event='onclick'> |
| this.domNode.style.display="none"; |
| </script> |
| </div> |
| <button dojoType="HideButton">Click to hide</button> |
| <button dojoType="HideButton">Click to hide #2</button> |
| |
| <h3>Extending another widget</h3> |
| <p>HideButton2 extends HideButton (above) and changes the template (but keeps the onclick handler).</p> |
| <span dojoType="dijit.Declaration" widgetClass="HideButton2" mixins="HideButton"> |
| YYY<button dojoAttachEvent="onclick" dojoAttachPoint="containerNode"></button>YYY |
| </span> |
| <button dojoType="HideButton2">Hide me extended</button> |
| <button dojoType="HideButton2">Hide me extended #2</button> |
| |
| <h3>Something more complicated:</h3> |
| <div dojoType="dijit.Declaration" widgetClass="foo" defaults="{ foo: 'thud', progress: 10 }"> |
| <script type='dojo/connect' event='startup'> |
| this.baz.innerHTML += " (modified by dojo/connect event=startup) "; |
| </script> |
| |
| <p>thinger blah stuff ${foo}</p> |
| |
| <div style="width:400px" annotate="true" maximum="200" |
| progress="${progress}" dojoType="dijit.ProgressBar"></div> |
| <p dojoAttachPoint='baz'>baz thud</p> |
| </div> |
| |
| <div dojoType="foo" foo="blah" progress="50"></div> |
| <div dojoType="foo" foo="thinger" progress="73"></div> |
| |
| </body> |
| </html> |