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 |
||
(One intermediate revision by the same user not shown) | |||
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== | ||
The HTML onclick format is not supported in earlier dijit versions (before 1.7). | |||
<syntaxhighlight lang="html5"> | |||
<button data-dojo-type="dijit.form.Button" id="deferredB_1" onClick="createDeferred();"> | |||
Create deferred! (work in dojo 1.7.x 0nly)</button> | |||
<button id="deferredB_2" onClick="createDeferred();">Create deferred! (html button work always)</button> | |||
<button data-dojo-type="dijit.form.Button" id="deferredB_3" | |||
data-dojo-props="onClick : function (){createDeferred();}"> | |||
Create deferred! (Work in dojo 1.6 > 1.7.2)</button> | |||
</syntaxhighlight> | |||
The three buttons may be tested here: [http://pmis.biz/rwa/dojo.Deferred.php Real world examples..] | |||
===Verified in=== | ===Verified in=== | ||
IE 8, Firefox 3.6.22, Dojo 1.6.1 | IE 8, Firefox 3.6.22, Dojo 1.6.1, Dojo 1.7.2 | ||
==References== | ==References== |
Latest revision as of 18:21, 13 April 2012
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
The HTML onclick format is not supported in earlier dijit versions (before 1.7).
<button data-dojo-type="dijit.form.Button" id="deferredB_1" onClick="createDeferred();">
Create deferred! (work in dojo 1.7.x 0nly)</button>
<button id="deferredB_2" onClick="createDeferred();">Create deferred! (html button work always)</button>
<button data-dojo-type="dijit.form.Button" id="deferredB_3"
data-dojo-props="onClick : function (){createDeferred();}">
Create deferred! (Work in dojo 1.6 > 1.7.2)</button>
The three buttons may be tested here: Real world examples..
Verified in
IE 8, Firefox 3.6.22, Dojo 1.6.1, Dojo 1.7.2