JavaScript DHTML/Scriptaculous/Slider

Материал из Web эксперт
Версия от 10:26, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Содержание

Slider with multiple handles

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head>

   <title>Text effects tests</title>
   <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> 
   <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>

</head> <body>

Sliders

Standard horizontal slider

Vertical slider

Slider with predefined values [2,4,6,8] and a non-default range [2,15]

Slider with multiple handles

Slider with multiple handles and predefined values

Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)

 

<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>

Fun with spans

 <style>
   #track7 div.handle {
     background-color:#aaa;
     color:#444;
     top:0;
     left:0;
     position:absolute;
     z-index:2;
     height:100px;
     font-size:20px;
   }
   #track7 div.handle.selected {
     background-color:#444;
     color:#fff;
   }
 </style>
 
1
2
3
 



Slider with span and [1,10] range (test for #3731)

!
!



 <script type="text/javascript">
 
   new Control.Slider("handle1","track1",{
     sliderValue:0.5,
     onSlide:function(v){$("debug1").innerHTML="slide: "+v},
     onChange:function(v){$("debug1").innerHTML="changed! "+v}});
   new Control.Slider("handle2","track2",{axis:"vertical",
       onSlide:function(v){$("debug2").innerHTML="slide: "+v},
       onChange:function(v){$("debug2").innerHTML="changed! "+v}});
   new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),
       onSlide:function(v){$("debug3").innerHTML="slide: "+v},
       onChange:function(v){$("debug3").innerHTML="changed! "+v}});
   new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{
       onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],
       onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});
   var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{
       sliderValue:[0.3, 0.8],
       restricted:true,
       onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",
       { spans:["span7-1","span7-2"],
         startSpan:"span7-start",
         endSpan:"span7-end",
         range:$R(0,300) });
   new Control.Slider(
     ["zoom-handle-1","zoom-handle-2"],"zoom-track",{
       sliderValue:[1,10], range:$R(1,10),
       values:[1,2,3,4,5,6,7,8,9,10],
       restricted:true,
       spans:["zoom-track-selected"] });
 
 </script>
 

</body> </html>

 </source>
   
  


Slider with multiple handles and predefined values

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head>

   <title>Text effects tests</title>
   <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> 
   <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>

</head> <body>

Sliders

Standard horizontal slider

Vertical slider

Slider with predefined values [2,4,6,8] and a non-default range [2,15]

Slider with multiple handles

Slider with multiple handles and predefined values

Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)

 

<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>

Fun with spans

 <style>
   #track7 div.handle {
     background-color:#aaa;
     color:#444;
     top:0;
     left:0;
     position:absolute;
     z-index:2;
     height:100px;
     font-size:20px;
   }
   #track7 div.handle.selected {
     background-color:#444;
     color:#fff;
   }
 </style>
 
1
2
3
 



Slider with span and [1,10] range (test for #3731)

!
!



 <script type="text/javascript">
 
   new Control.Slider("handle1","track1",{
     sliderValue:0.5,
     onSlide:function(v){$("debug1").innerHTML="slide: "+v},
     onChange:function(v){$("debug1").innerHTML="changed! "+v}});
   new Control.Slider("handle2","track2",{axis:"vertical",
       onSlide:function(v){$("debug2").innerHTML="slide: "+v},
       onChange:function(v){$("debug2").innerHTML="changed! "+v}});
   new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),
       onSlide:function(v){$("debug3").innerHTML="slide: "+v},
       onChange:function(v){$("debug3").innerHTML="changed! "+v}});
   new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{
       onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],
       onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});
   var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{
       sliderValue:[0.3, 0.8],
       restricted:true,
       onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",
       { spans:["span7-1","span7-2"],
         startSpan:"span7-start",
         endSpan:"span7-end",
         range:$R(0,300) });
   new Control.Slider(
     ["zoom-handle-1","zoom-handle-2"],"zoom-track",{
       sliderValue:[1,10], range:$R(1,10),
       values:[1,2,3,4,5,6,7,8,9,10],
       restricted:true,
       spans:["zoom-track-selected"] });
 
 </script>
 

</body> </html>

 </source>
   
  


Slider with preset value

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head>

   <title>Text effects tests</title>
   <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> 
   <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>

</head> <body>

Sliders

Standard horizontal slider

Vertical slider

Slider with predefined values [2,4,6,8] and a non-default range [2,15]

Slider with multiple handles

Slider with multiple handles and predefined values

Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)

 

<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>

Fun with spans

 <style>
   #track7 div.handle {
     background-color:#aaa;
     color:#444;
     top:0;
     left:0;
     position:absolute;
     z-index:2;
     height:100px;
     font-size:20px;
   }
   #track7 div.handle.selected {
     background-color:#444;
     color:#fff;
   }
 </style>
 
1
2
3
 



Slider with span and [1,10] range (test for #3731)

!
!



 <script type="text/javascript">
 
   new Control.Slider("handle1","track1",{
     sliderValue:0.5,
     onSlide:function(v){$("debug1").innerHTML="slide: "+v},
     onChange:function(v){$("debug1").innerHTML="changed! "+v}});
   new Control.Slider("handle2","track2",{axis:"vertical",
       onSlide:function(v){$("debug2").innerHTML="slide: "+v},
       onChange:function(v){$("debug2").innerHTML="changed! "+v}});
   new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),
       onSlide:function(v){$("debug3").innerHTML="slide: "+v},
       onChange:function(v){$("debug3").innerHTML="changed! "+v}});
   new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{
       onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],
       onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});
   var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{
       sliderValue:[0.3, 0.8],
       restricted:true,
       onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",
       { spans:["span7-1","span7-2"],
         startSpan:"span7-start",
         endSpan:"span7-end",
         range:$R(0,300) });
   new Control.Slider(
     ["zoom-handle-1","zoom-handle-2"],"zoom-track",{
       sliderValue:[1,10], range:$R(1,10),
       values:[1,2,3,4,5,6,7,8,9,10],
       restricted:true,
       spans:["zoom-track-selected"] });
 
 </script>
 

</body> </html>

 </source>
   
  


Vertical slider, standard slider

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head>

   <title>Text effects tests</title>
   <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> 
   <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>

</head> <body>

Sliders

Standard horizontal slider

Vertical slider

Slider with predefined values [2,4,6,8] and a non-default range [2,15]

Slider with multiple handles

Slider with multiple handles and predefined values

Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)

 

<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>

Fun with spans

 <style>
   #track7 div.handle {
     background-color:#aaa;
     color:#444;
     top:0;
     left:0;
     position:absolute;
     z-index:2;
     height:100px;
     font-size:20px;
   }
   #track7 div.handle.selected {
     background-color:#444;
     color:#fff;
   }
 </style>
 
1
2
3
 



Slider with span and [1,10] range (test for #3731)

!
!



 <script type="text/javascript">
 
   new Control.Slider("handle1","track1",{
     sliderValue:0.5,
     onSlide:function(v){$("debug1").innerHTML="slide: "+v},
     onChange:function(v){$("debug1").innerHTML="changed! "+v}});
   new Control.Slider("handle2","track2",{axis:"vertical",
       onSlide:function(v){$("debug2").innerHTML="slide: "+v},
       onChange:function(v){$("debug2").innerHTML="changed! "+v}});
   new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),
       onSlide:function(v){$("debug3").innerHTML="slide: "+v},
       onChange:function(v){$("debug3").innerHTML="changed! "+v}});
   new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{
       onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],
       onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});
   var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{
       sliderValue:[0.3, 0.8],
       restricted:true,
       onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},
       onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});
   new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",
       { spans:["span7-1","span7-2"],
         startSpan:"span7-start",
         endSpan:"span7-end",
         range:$R(0,300) });
   new Control.Slider(
     ["zoom-handle-1","zoom-handle-2"],"zoom-track",{
       sliderValue:[1,10], range:$R(1,10),
       values:[1,2,3,4,5,6,7,8,9,10],
       restricted:true,
       spans:["zoom-track-selected"] });
 
 </script>
 

</body> </html>

 </source>