Starting with Dojo 2

by b_long

HTML

<html>
    
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/resources/dojo.css" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css" />

    </head>
    
    <body class="claro">
        <!-- note that you can always create a dojoConfig object instead of putting
        everything into data-dojo-config if you want -->
        <div>
            	<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>
    </body>

</html>

JavaScript

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

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

        // Create a button programmatically:
        var myButton2 = new dijit.form.Button({
            label: "Click me2!",
            onClick: function () {
                myDialog.show();
            }
        }, "dialogMaker");

        /**var dlg = new dijit.Dialog({
            title: "Bar",
            executeScripts: true,
            content: "Bah humbug!"
        });
        dlg.startup();
        setTimeout(function () {
            dlg.show();
        }, 2000);
        */
    });
});