JavaScript Tutorial/Dojo toolkit/Dialog
Содержание
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"/> | |||
|
</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
|
</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>