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

From PMISwiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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