Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Button: Difference between revisions
Jump to navigation
Jump to search
(Created page with "==dijit.form.Button== ==How to use== This section show how to declare a dijit.form.Button in two ways: Programmatic implementation and Declarative mark-up. Programmatic implem...") |
(No difference)
|
Revision as of 20:59, 22 September 2011
dijit.form.Button
How to use
This section show how to declare a dijit.form.Button in two ways: Programmatic implementation and Declarative mark-up.
Programmatic implementation:
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Tooltip");
dojo.addOnLoad(function() {
// Create a button programmatically:
// dijit.form.Button({/*props*/}, DomNode);
var button = new dijit.form.Button({
type: 'button', //options: submit/reset/button
name: 'Used if submitted to server',
label: "dijit.form.Button programmed in JavaScript",
onClick: function() {
// Do something:
dojo.byId("result1").innerHTML += "Thank you for clicking programmed button!<br>";
}
}, "b1");
var tt1 = new dijit.Tooltip({connectId: ['b1'],
possition: ['above', 'below'],
label: 'Please click me..I am a programmed button!', showDelay: 600 });
var tt2 = new dijit.Tooltip({connectId: ['result1'],
possition: ['below', 'after'],
label: 'You clicked the button and point to the text!', showDelay: 600 });
});
</script>
HTML5 Declarative mark-up:
<button data-dojo-type="dijit.form.Button" id="b2"
data-dojo-props="onClick: function (){ dojo.byId('result1').innerHTML += 'You clicked the Declared button!<br>';} ,
type: 'button' ">
dijit.form.Button declared in HTML!
</button>
<div data-dojo-type="dijit.Tooltip"
data-dojo-props=" connectId: ['b2'],
position: ['below']">
Please click me.. I am <i>Declared in HTML</i>. The possition is <b>below</b> the button.
</div>
</p><p>
<div id="result1"></div>
</p>
See the demo of: dijit.form.Button and dijit.Tooltip
Tips and tricks
This is a stub - more to come..
Verified in
IE 8, Firefox 3.6.22, Dojo 1.6.1