JavaScript Tutorial/Dojo toolkit/Slider

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

Create vertical slider and set value, minimum, maximum and discreteValues

   <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.Slider");
   </script>
 </head>
 <body class="tundra">
 </body>

</html></source>


Format slider value

   <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.HorizontalSlider");
   </script>
 </head>
 <body class="tundra">
   <script type="dojo/method" event="onChange" args="newValue">
       alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
   </script>
    asdf
as

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


Horizontal slider bar

   <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.Slider");
   </script>
 </head>
 <body class="tundra">
 </body>

</html></source>


Max/min slider value

   <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.HorizontalSlider");
   </script>
 </head>
 <body class="tundra">
   <script type="dojo/method" event="onChange" args="newValue">
       alert(newValue);
   </script>

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


Set intermediateChanges for Slider

   <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.Slider");
   </script>
 </head>
 <body class="tundra">
 </body>

</html></source>


Set slide handle image

   <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.Slider");
   </script>
 </head>
 <body class="tundra">
 </body>

</html></source>


Simple slider

   <source lang="javascript">

<html>

 <head>
   <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("dojox.fx._base");
     function testIt() {
       dojox.fx.slideBy({
         node : "my",
         duration : 1000, top : 100, left: 100
       }).play();
     }
   </script>
 </head>
 <body onload=testIt()>
Your text here.
 </body>

</html></source>


Slide back to original spot

   <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.fx");
       dojo.require("dojo.dnd.move");
       dojo.addOnLoad(function(  ){
         var move = new dojo.dnd.Moveable(dojo.byId("my"));
         var coords;
         dojo.subscribe("/dnd/move/start",function(e){
           coords = dojo.coords(e.node);
         });
         dojo.subscribe("/dnd/move/stop",function(e){
           dojo.fx.slideTo({
             node: e.node,
             top: coords.t,
             left: coords.l,
             duration:2000
           }).play(  );
         });
      });
   </script>
 </head>
 <body class="tundra">

Drag and drop me somewhere else

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


Slide in animation

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript">
     var djConfig = {
       baseScriptUri : "js/dojo/"
     };
   </script>
   <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
   <script>
     dojo.require("dojo.fx");
     var toggler = null;
     function fxTest() {
       toggler = new dojo.fx.Toggler({
         node : "myDiv",
         hideFunc : dojo.fx.wipeOut
       });
       toggler.hide();
     }
   </script>
 </head>
 <body onLoad="fxTest();">
Hello
 </body>

</html></source>


Slider on change dojo event

   <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.HorizontalSlider");
   </script>
 </head>
 <body class="tundra">
   <script type="dojo/method" event="onChange" args="newValue">
       alert(newValue);
   </script>

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


Slider on change event

   <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.HorizontalSlider");
   </script>
 </head>
 <body class="tundra">
   <script type="dojo/method" event="onChange" args="newValue">
       alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
   </script>
    asdf
as

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