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 edit summary |
||
Line 25: | Line 25: | ||
var tt1 = new dijit.Tooltip({connectId: ['b1'], | var tt1 = new dijit.Tooltip({connectId: ['b1'], | ||
possition: ['above', 'below'], | possition: ['above', 'below'], | ||
label: 'Please click me..I am a programmed button!', showDelay: 600 }); | label: 'Please click me..I am a programmed button!', showDelay: 600 }); | ||
}); | }); | ||
Line 36: | Line 31: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
HTML5 Declarative mark-up: | The same thing performed in HTML5 Declarative mark-up: | ||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<button data-dojo-type="dijit.form.Button" id="b2" | <button data-dojo-type="dijit.form.Button" id="b2" | ||
Line 53: | Line 48: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
See the demo of: [http://pmis.biz/rwa/dijit.form.Button_1.php dijit.form.Button and dijit.Tooltip] | See the demo of: [http://pmis.biz/rwa/dijit.form.Button_1.php dijit.form.Button and dijit.Tooltip] | ||
==Tips and tricks== | ==Tips and tricks== | ||
This is a stub - more to come.. | This is a stub - more to come.. |
Revision as of 16:34, 23 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 });
});
</script>
The same thing performed in 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