Dojo:如何以声明方式显示页面加载时的模态对话框

时间:2012-05-15 08:57:10

标签: dojo

我在dojo中以声明方式创建了模态对话框,我想在页面加载时向用户显示它,但我不明白为什么下面的代码没有在页面上的浏览器上显示任何内容加载。谁能告诉我我做错了什么?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Dijit!</title>
    <!-- load Dojo -->

    <link rel="stylesheet" href="../lib/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="../../css/style.css">


    <script src="../lib/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
        <script>
     require(["dojo/ready","dojo/parser","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button"]);</script>
     </script>

</head>
<!-- set the claro class on our body element -->
<body class="claro">
  <div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
  <div class="dijitDialogPaneContentArea">
    <div class = "formQuestion">
         <span>Personal Details</span>
        </div>    
        <div>

          <label class = "firstLabel" for="Pname">Name </label>
          <input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
          data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
          <label class = "secondLabel" for = "combo">Role </label>
            <Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
                <option>Admin</option>
                <option>User</option>
            </Select><br>
            <label class = "firstLabel" for="Pemail">Email</label>
                <input type="text" id="Pemail" name="address" 
                    data-dojo-type="dijit.form.ValidationTextBox"
                    data-dojo-props = "placeHolder:'(will be the username)',
                    trim:'true',
                    ucfirst : 'true'" tabindex = '3'/>
            <label class = "secondLabel" for="Pmobile">Mobile</label>
                <input type="text" id="Pmobile" name="address" tabindex = '4'
                    data-dojo-type="dijit.form.ValidationTextBox"
                    data-dojo-props = " trim : 'true',
                    regExp : '(\\d){10}',
                    invalidMessage : 'Mobile number is invalid',
                    ucfirst : 'true'" /><br>
            <div dojoType="dojox.form.PasswordValidator"
            name="password">
            <div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
                pwType="new" tabindex = '5'/>
                <label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
                pwType="verify" tabindex = '6'/></div>
        </div><br>
<div class ="dijitDialogPaneActionBar">
            <button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
            <button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
            </div>
    </div>
    <!-- This event is not firing -->
    <script type="dojo/method" data-dojo-event="onLoad" >
        dialogOne.show();
    </script>
  </div>
 </body>
</html>​

2 个答案:

答案 0 :(得分:4)

尝试以下代码。对加载dojo部分进行更改以指向道道的正确路径。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello Dijit!</title>
        <!-- load Dojo -->

        <link rel="stylesheet" href="../dijit/themes/claro/claro.css">


        <script src="../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
        <script>
            require(["dojo/ready","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button","dojo/domReady!"]
            , function(ready){
                ready(function(){
                    console.debug("Ready!");
                    dialogOne.show();
                });
            });
        </script>

    </head>
    <!-- set the claro class on our body element -->
    <body class="claro">
        <div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
            <div class="dijitDialogPaneContentArea">
                <div class = "formQuestion">
                    <span>Personal Details</span>
                </div>    
                <div>
                    <label class = "firstLabel" for="Pname">Name </label>
                    <input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
                    <label class = "secondLabel" for = "combo">Role </label>
                    <Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
                        <option>Admin</option>
                        <option>User</option>
                    </Select><br>
                    <label class = "firstLabel" for="Pemail">Email</label>
                    <input type="text" id="Pemail" name="address" 
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = "placeHolder:'(will be the username)',
                           trim:'true',
                           ucfirst : 'true'" tabindex = '3'/>
                    <label class = "secondLabel" for="Pmobile">Mobile</label>
                    <input type="text" id="Pmobile" name="address" tabindex = '4'
                           data-dojo-type="dijit.form.ValidationTextBox"
                           data-dojo-props = " trim : 'true',
                           pattern : '(\\d){10}',
                           invalidMessage : 'Mobile number is invalid',
                           ucfirst : 'true'" /><br>
                    <div dojoType="dojox.form.PasswordValidator"
                         name="password">
                        <div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
                                                                                             pwType="new" tabindex = '5'/>
                            <label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
                                                                                                        pwType="verify" tabindex = '6'/>
                        </div>
                    </div><br>
                    <div class ="dijitDialogPaneActionBar">
                        <button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
                        <button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>​

答案 1 :(得分:2)

尝试在dialogOne.show()函数的回调中调用require,将"dojo/ready"更改为"dojo/domReady!"并将其放在模块数组的末尾