JavaScript DHTML/Ext JS/Slider

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

Horizontal slider

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>
   
  


Snapping slider

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>
   
  


Vertical slider

   <source lang="html4strict">
 


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

   <script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
   <script type="text/javascript">
   /*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){

   new Ext.Slider({
       renderTo: "basic-slider",
       width: 214,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "increment-slider",
       width: 214,
       value:50,
       increment: 10,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "vertical-slider",
       height: 214,
       vertical: true,
       minValue: 0,
       maxValue: 100
   });
   new Ext.Slider({
       renderTo: "tip-slider",
       width: 214,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });
   var tip = new Ext.ux.SliderTip({
       getText: function(slider){
           return String.format("{0}% complete", slider.getValue());
       }
   });
   new Ext.Slider({
       renderTo: "custom-tip-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: tip
   });
   new Ext.Slider({
       renderTo: "custom-slider",
       width: 214,
       increment: 10,
       minValue: 0,
       maxValue: 100,
       plugins: new Ext.ux.SliderTip()
   });

});

   </script>

</head> <body>

Ext Slider Example

Sliders support keyboard adjustments, configurable snapping, axis clicking and animation.

Basic Slider


Snapping Slider


Vertical Slider


Slider with tip


Slider with custom tip


CSS Customized Slider

</body> </html>


 </source>