Tuesday, September 17, 2019

Dojo Dialog





<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>

<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>

</head>
<body class="claro">



<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="Name and Address">
    <table class="dijitDialogPaneContentArea">
        <tr>
            <td><label for="name">Name:</label></td>
            <td><input data-dojo-type="dijit/form/TextBox" name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="address">Address:</label></td>
            <td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"></td>
        </tr>
    </table>

    <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" id="ok">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myDialog.hide();}"
                id="cancel">Cancel</button>
    </div>
</div>

<button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
    Show me!
</button>

<script>
require(["dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button"]);
</script>
</body>
</html>

No comments: