Dojo Dijit and HTML5 in Real world applications/Dijit/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

References

Demo of dijit.form.Button and dijit.Tooltip