JavaScript Tutorial/Dojo toolkit/Icon

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

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>