Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Button: Difference between revisions

From PMISwiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 50: Line 50:


==Tips and tricks==
==Tips and tricks==
This is a stub - more to come..
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

References

Demo of dijit.form.Button and dijit.Tooltip