JavaScript Tutorial/Dojo toolkit/Dialog

Материал из Web эксперт
Перейти к: навигация, поиск

Create a dialog declaratively

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.Dialog");
     dojo.addOnLoad(showDialogs);
     function showDialogs() {
       dijit.byId("dialog1").show();
     }
   </script>
 </head>
 <body>
 </body>

</html></source>


Create a dialog with your code

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.Dialog");
     dojo.addOnLoad(showDialogs);
     function showDialogs() {
       var dlg = new dijit.Dialog();
       dlg.setContent("Content");
       dojo.byId("my").appendChild(dlg.domNode);
       dlg.show();
     }
   </script>
 </head>
 <body class="tundra">
 </body>

</html></source>


Create data input dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      function checkPw(dialogFields) {
         alsert(dialogFields.confirmpw);
         
      }
   </script>
 </head>
 <body class="tundra">
     Login Form
<label for="name" title="User name">Username</label> <input dojoType="dijit.form.TextBox" type="text" name="oldpw">
<label for="loc">Password: </label> <input dojoType="dijit.form.TextBox" type="password" name="newpw">
<label for="desc">Confirm Password:</label> <input dojoType="dijit.form.TextBox" type="password" name="confirmpw">
<button dojoType="dijit.form.Button" type="submit">Login</button>
 </body>

</html></source>


Dialog button action

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      function checkPw(dialogFields) {
         alsert(dialogFields.confirmpw);
         
      }
   </script>
 </head>
 <body class="tundra">
     Login Form
<label for="name" title="User name">Username</label> <input dojoType="dijit.form.TextBox" type="text" name="oldpw">
<label for="loc">Password: </label> <input dojoType="dijit.form.TextBox" type="password" name="newpw">
<label for="desc">Confirm Password:</label> <input dojoType="dijit.form.TextBox" type="password" name="confirmpw">
<button dojoType="dijit.form.Button" type="submit">Login</button>
 </body>

</html></source>


Get date from dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      function checkPw(dialogFields) {
         alsert(dialogFields.confirmpw);
         
      }
   </script>
 </head>
 <body class="tundra">
     Login Form
<label for="name" title="User name">Username</label> <input dojoType="dijit.form.TextBox" type="text" name="oldpw">
<label for="loc">Password: </label> <input dojoType="dijit.form.TextBox" type="password" name="newpw">
<label for="desc">Confirm Password:</label> <input dojoType="dijit.form.TextBox" type="password" name="confirmpw">
<button dojoType="dijit.form.Button" type="submit">Login</button>
 </body>

</html></source>


Hide dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.form.Button");
     dojo.require("dijit.Dialog");
     dojo.require("dijit.form.TextBox");
     dojo.addOnLoad(showDialog);
     function showDialog() {
       dijit.byId("dialog1").show();
     }
     function hideDialog() {
       dijit.byId("dialog1").hide();
     }
   </script>
 </head>
 <body class="tundra">
     <form action="" method="post" validate="true" id="resetPasswordForm">
<label>Login Name</label> <input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="userName" id="userName"/>
<button dojoType="dijit.form.Button" type="submit" onclick="alert("ok")" id="reset">Ok </button> <button dojoType="dijit.form.Button" type="submit" onClick="hideDialog()" id="cancel1">Hide Dialog </button>
     </form>
 </body>

</html></source>


Login dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.form.Button");
     dojo.require("dijit.Dialog");
     dojo.require("dijit.form.TextBox");
     dojo.addOnLoad(showDialog);
     function showDialog() {
       dijit.byId("dialog1").show();
     }
   </script>
 </head>
 <body class="tundra">
     <form action="Login" method="post" validate="true" id="loginForm">
<label>Login</label> <input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/>
<label>Password</label> <input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/>
 
                  
                  
<button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="alert("ok");">Ok</button> <button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button> <button dojoType="dijit.form.Button" type="submit" onclick="showDialog();" id="resetPassword"> Show Dialog </button>
     </form>
 </body>

</html></source>


Popup dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css"
     href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.parser");
     dojo.require("dijit.form.Button");
     dojo.require("dijit.Dialog");
     dojo.require("dijit.form.TextBox");
     dojo.addOnLoad(showDialog);
     dojo.addOnLoad(hideDialog);
     function showDialog() {
       dijit.byId("dialog1").show();
     }
   </script>
 </head>
 <body class="tundra">
     <form validate="true">
             Change Password
<label for="desc">Password: </label> <input dojoType="dijit.form.TextBox" type="password" name="confirmpw" id="confirmpw">
<button dojoType=dijit.form.Button type="submit" onclick="alert("submit");">Submit</button>
     </form>
 </body>

</html></source>


Simple dialog

   <source lang="javascript">

<html>

 <head>
   <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/",
       parseOnLoad : true
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
           dojo.require("dojo.parser");
           dojo.require("dijit.Dialog");
           dojo.addOnLoad(function(  ) {
               dijit.byId("dialog").show(  );
           });
   </script>
 </head>
 <body class="tundra" onload=f()>
         Dialog

</body> </html></source>