JavaScript Tutorial/Dojo toolkit/Button

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

Declare dijit.form.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.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="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("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>
Text.
   <button id="signup" disabled dojoType="dijit.form.Button" type="submit">Button</button>
    

</body> </html></source>


dojo button label

   <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.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="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");
     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="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>