JavaScript DHTML/Dojo toolkit/Slider — различия между версиями

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

Текущая версия на 07:20, 26 мая 2010

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

 
<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">
     <div dojoType="dijit.form.VerticalSlider"
          value="3"
          minimum="1"
          maximum="6"
          discreteValues="6"
          showButtons="true">
          <div dojoType="dijit.form.VerticalRuleLabels"
            container="topDecoration"
            labels="1,2,3,4,5,6"
            style="height:50.2em;"></div>
     </div>
  </body>
</html>



Format slider value

 
<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">
    <div dojoType="dijit.form.HorizontalSlider" name="caffeine"
    value="100"
    maximum="175"
    minimum="2"
    showButtons="false"
    style="margin: 5px;width:300px; height: 20px;">
    <script type="dojo/method" event="onChange" args="newValue">
        alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
    </script>
    <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
        style="height:10px;font-size:75%;color:gray;" count="6">asdf
    </ol>
    <div dojoType="dijit.form.HorizontalRule" container="topDecoration"
        count=6 style="height:5px;">as
    </div>
</div>
</body>
</html>



Horizontal slider bar

 
<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">
     <div dojoType="dijit.form.HorizontalSlider"
          value="3"
          minimum="1"
          maximum="6"
          discreteValues="6"
          showButtons="true">
          <div dojoType="dijit.form.HorizontalRuleLabels"
            container="topDecoration"
            labels="1,2,3,4,5,6"
            style="height:1.2em;"></div>
     </div>
  </body>
</html>



Max/min slider value

 
<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">
    <div dojoType="dijit.form.HorizontalSlider" name="caffeine"
    value="100"
    maximum="175"
    minimum="2"
    style="margin: 5px;width:300px; height: 20px;">
    <script type="dojo/method" event="onChange" args="newValue">
        alert(newValue);
    </script>
</div>
</body>
</html>



Set intermediateChanges for Slider

 
<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">
    <div dojoType="dijit.form.HorizontalSlider"
         value="5" 
         minimum="-10" 
         maximum="10" 
         discreteValues="11"
         intermediateChanges="true"
         onChange="alert(arguments[0]);"
         handleSrc="preciseSliderThumb.png"
    ></div>
  </body>
</html>



Set slide handle image

 
<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">
    <div dojoType="dijit.form.HorizontalSlider"
         value="5" 
         minimum="-10" 
         maximum="10" 
         discreteValues="11"
         intermediateChanges="true"
         onChange="alert(arguments[0]);"
         handleSrc="preciseSliderThumb.png"
    ></div>
  </body>
</html>



Simple slider

 
<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()>
        <div id="my">Your text here.</div>
  </body>
</html>



Slide back to original spot

 
<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">
       <p style="position : absolute; left : 300px; top : 300px;"
                  id="my"
               >Drag and drop me somewhere else</p>
</body>
</html>



Slide in animation

 
<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();">
    <div id="myDiv" style="background-color:#ff0000;width:40px;top:5px;left:5px;position:absolute;">
     Hello</div>
     
  </body>
</html>



Slider on change dojo 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("dijit.form.HorizontalSlider");
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.HorizontalSlider" name="caffeine"
    value="100"
    maximum="175"
    minimum="2"
    style="margin: 5px;width:300px; height: 20px;">
    <script type="dojo/method" event="onChange" args="newValue">
        alert(newValue);
    </script>
</div>
</body>
</html>



Slider 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("dijit.form.HorizontalSlider");
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.HorizontalSlider" name="caffeine"
    value="100"
    maximum="175"
    minimum="2"
    showButtons="false"
    style="margin: 5px;width:300px; height: 20px;">
    <script type="dojo/method" event="onChange" args="newValue">
        alert(dojo.number.format(newValue,{places:1,pattern:"#mg"}));
    </script>
    <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
        style="height:10px;font-size:75%;color:gray;" count="6">asdf
    </ol>
    <div dojoType="dijit.form.HorizontalRule" container="topDecoration"
        count=6 style="height:5px;">as
    </div>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Slider&oldid=1975»