JavaScript Tutorial/Dojo toolkit/Icon

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

Add icon to button

<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">
        <div dojoType="dijit.Toolbar" style="width:300px">
            <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>
            <span dojoType="dijit.ToolbarSeparator"></span>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSubscript"></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
        </div>
  </body>
</html>


Cut, copy and paste icons

<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">
      <div dojoType="dijit.Toolbar">
        <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="true">Cut</div>
        <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" showLabel="true">Copy</div>
        <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconPaste" showLabel="false">Paste</div>
        <span dojoType="dijit.ToolbarSeparator"></span>
        <div dojoType="dijit.form.ToggleButton" iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div>
      </div>
  </body>
</html>


Italic icon

<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">
    <div id="toolbar1" dojoType="dijit.Toolbar">
    <div dojoType="dijit.form.ToggleButton" id="toolbar1.italic" iconClass="dijitEditorIcon dijitEditorIconItalic" showLabel="false">Italic</div>
    <span dojoType="dijit.ToolbarSeparator"></span>
   </div>
  </body>
</html>


Set icon class

<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();">
    <div id="my">&nbsp;</div>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Icon&oldid=8571»