Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Button

From PMISwiki
Jump to: navigation, search

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

References

Demo of dijit.form.Button and dijit.Tooltip