Starting with Dojo

by b_long

HTML

<!-- note that you can always create a dojoConfig object instead of putting
everything into data-dojo-config if you want -->
<div class="claro">
    	<h3>Demo: Custom Modules with CDN</h3>

    <button id="welcomeButtonNode" type="button">
        <!-- This text is optional -->Click me!</button>
    <br/>
    <div id="welcomeMsgBoard"></div>
    <button id="dialogMaker" type="button">Show a dialog</button>
</div>

JavaScript

// load our custom/Hello module and wait for the DOM to be ready
require(["dojo/parser", "dojo/ready", "dojo/dom", "dijit/form/Button", "dojox/widget/DialogSimple"], function (ready, dom, Button, Dialog) {
    ready(function () {
        // Create a button programmatically:
        var myButton = new Button({
            label: "Click me!",
            onClick: function () {
                // Do something:
                dom.byId("welcomeMsgBoard").innerHTML += "Welcome to Dojo! " + "<br/>";
            }
        }, "welcomeButtonNode");

        /*var myDialog = new Dialog({
            title: "My Dialog",
            content: "Test content.",
            style: "width: 300px"
        });

        // Create a button programmatically:
        var myButton2 = new Button({
            label: "Click me2!",
            onClick: function () {
                myDialog.show();
            }
        }, "dialogMaker");
	*/
        var dlg = new dojox.widget.DialogSimple({
            title: "Bar",
            executeScripts: true,
            content: "Bah humbug!"
        });
        dlg.startup();
        setTimeout(function () {
            dlg.show();
        }, 2000);
    });
});