JavaScript Tutorial/Dojo toolkit/Icon
Add icon to button
<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.Toolbar"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function( ) { var bold = function( ) {alert("bold");} var italic= function( ) {alert("italic");} var underline = function( ) {alert("underline");} var superscript = function( ) {alert("superscript");} var subscript = function( ) {alert("subscript");} dojo.query(".dijitEditorIcon").forEach(function(x) { if (dojo.hasClass(x, "dijitEditorIconBold")) dojo.connect(x.parentNode, "onclick", bold); else if (dojo.hasClass(x, "dijitEditorIconItalic")) dojo.connect(x.parentNode, "onclick", italic); else if (dojo.hasClass(x, "dijitEditorIconUnderline")) dojo.connect(x.parentNode, "onclick", underline); else if (dojo.hasClass(x, "dijitEditorIconSubscript")) dojo.connect(x.parentNode, "onclick", superscript); else if (dojo.hasClass(x, "dijitEditorIconSuperscript")) dojo.connect(x.parentNode, "onclick", subscript); }); }); </script> </head> <body class="tundra">
<button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconBold" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconItalic" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconUnderline" ></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSubscript"></button> <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
</body>
</html></source>
Cut, copy and paste icons
<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.Toolbar"); </script> </head> <body class="tundra">
Cut
Copy
Paste
Bold
</body>
</html></source>
Italic icon
<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.Toolbar"); function italic() { alert("Italic"); } dojo.addOnLoad(function() { dojo.connect(dojo.byId("toolbar1.italic"),"onclick",italic); }); </script> </head> <body class="tundra">
Italic
</body>
</html></source>
Set icon class
<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.Toolbar");
function createProgrammatically() { var myDijit = new dijit.Toolbar({}); dojo.byId("my").appendChild(myDijit.domNode); myDijit.addChild(new dijit.form.Button({ iconClass : "dijitEditorIcon dijitEditorIconCut", showLabel : "true", label : "Cut" })); myDijit.addChild(new dijit.ToolbarSeparator({})); myDijit.addChild(new dijit.form.ToggleButton({ iconClass : "dijitEditorIcon dijitEditorIconBold" })); myDijit.startup(); } </script> </head> <body class="tundra" onLoad="createProgrammatically();">
</body>
</html></source>