JavaScript DHTML/Dojo toolkit/Button
Содержание
Declare dijit.form.Button
<source lang="html4strict">
<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"); </script> </head> <body class="tundra"> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconRedo" onClick="alert("Clicked!");"> Click me </button> </body>
</html>
</source>
Disable, enable button
<source lang="html4strict">
<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("dijit.form.Button"); dojo.require("dijit.form.CheckBox"); </script> </head> <body class="tundra">
<script type="dojo/method" event="onClick" args="evt"> if (this.checked) dijit.byId("signup").setAttribute("disabled", false); else dijit.byId("signup").setAttribute("disabled", true); </script>
<button id="signup" disabled dojoType="dijit.form.Button" type="submit">Button</button>
</body> </html>
</source>
dojo button label
<source lang="html4strict">
<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.addOnLoad(bn); function bn() { var myDijit = new dijit.form.Button({ label : "Label", onClick : function() { alert("Clicked"); } }); dojo.byId("my").appendChild(myDijit.domNode); } </script> </head> <body class="tundra">
</body>
</html>
</source>
Show label off
<source lang="html4strict">
<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.Toolbar"); dojo.addOnLoad(show); function show() { var myDijit = new dijit.Toolbar({ style : "width:26px;" }); myDijit.addChild(new dijit.form.ToggleButton({ iconClass : "dijitEditorIcon dijitEditorIconUnderLine", showLabel : false })); dojo.byId("my").appendChild(myDijit.domNode); } </script> </head> <body class="tundra">
</body>
</html>
</source>
Use predefined icons for buttons
<source lang="html4strict">
<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.Toolbar"); </script> </head> <body class="tundra">
Cut
Copy
Paste
Bold
</body>
</html>
</source>