JavaScript Tutorial/Dojo toolkit/ColorPalette

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

Create dijit.ColorPalette from code

<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.ColorPalette");
            dojo.addOnLoad(function(  ) {
                var cp = new dijit.ColorPalette({/*attributes go here */});
                dojo.body(  ).appendChild(cp.domNode);
            });
    </script>
  </head>
  <body class="tundra">
 
  </body>
</html>


Create dijit.ColorPalette programmatically

<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.ColorPalette");
      function createProgrammatically() {
        var myDijit = new dijit.ColorPalette({
          palette : "3x4", onChange : function(selectedColor) {
            alert(selectedColor);
          }
        });
        dojo.byId("my").appendChild(myDijit.domNode);
      }
    </script>
  </head>
  <body onLoad="createProgrammatically();">
     <div id="my">&nbsp;</div>
  </body>
</html>


Declare a dijit.ColorPalette

<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.ColorPalette");
    </script>
  </head>
  <body>
    <div dojoType="dijit.ColorPalette"></div>
  </body>
</html>


dijit.ColorPalette on change event

<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.ColorPalette");
        
    </script>
  </head>
  <body class="tundra">
       <div dojoType="dijit.ColorPalette">
    <script type="dojo/method" event="onChange" args="selectedColor">
        alert(selectedColor);
    </script>
</div>
  </body>
</html>


Output dijit.ColorPalette selected value in on change event

<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.ColorPalette");
          
           function myColorPalette(selectColor) {
              console.debug(selectColor);
           }
    </script>
  </head>
  <body class="tundra">
     <div dojoType="dijit.ColorPalette" onChange="myColorPalette"></div>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/ColorPalette&oldid=8619»