scriptaculous_sample.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4         <title>Slider Demo in Scriptaculous</title>
   5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   6
   7         <script src="lib/prototype/prototype.js" type="text/javascript"></script>
   8         <script src="lib/scriptaculous/scriptaculous.js" type="text/javascript"></script>
   9
  10 </head>
  11
  12 <body>
  13
  14         <div id="content">
  15
  16         <h1 id="pageName">
  17
  18                 Scriptaculous Slider Demo
  19         </h1>
  20
  21                 <div id="revision">
  22                         <p><strong>Standard horizontal slider</strong>
  23                         <div id="track1" style="width:200px;background-color:#aaa;height:5px;">
  24
  25                         <div id="handle1" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
  26                  </div>
  27
  28                 <div id="debug1" style="padding-top: 5px;"></div></p>
  29
  30
  31         <p><strong>Vertical slider</strong>
  32   <div id="track2" style="height:100px;background-color:#aaa;width:5px;">
  33     <div id="handle2" style="width:10px;height:5px;background-color:#f00;cursor:move;"> </div></div>
  34
  35   <div id="debug2"></div></p>
  36
  37
  38         <p><strong>Slider with predefined values [0,50,100,150,200]</strong>
  39   <div id="track3" style="width:200px;background-color:#aaa;height:5px;">
  40     <div id="handle3" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
  41   </div>
  42   <div id="debug3" style="padding-top: 5px;"></div></p>
  43
  44         <p><strong>Slider with predefined values [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] and interactions with div area</strong><br /><div id="track4" style="background-color : #CCCCCC; width : 200px; height : 5px;">
  45     <div class="selected" id="handle4" style="width: 5px; height: 10px; background-color: rgb(255, 0, 0); cursor: move; left: 0px; position: relative;"> </div><br /></div><br /><div id="barreSortie4" style="background-color : #DCDCDC; width : 0px; height : 7px; border : #232323 1px dashed; margin-top : 10px;"></div><br /><div id="debug4" style="padding-top: 5px;"></div></p>
  46
  47
  48         <p>
  49   <script type="text/javascript" language="javascript">
  50   // <![CDATA[
  51     new Control.Slider('handle1','track1',{
  52       onSlide:function(v){$('debug1').innerHTML='slide: '+v},
  53       onChange:function(v){$('debug1').innerHTML='changed! '+v}});
  54     new Control.Slider('handle2','track2',{axis:'vertical',
  55         onSlide:function(v){$('debug2').innerHTML='slide: '+v},
  56         onChange:function(v){$('debug2').innerHTML='changed! '+v}});
  57     new Control.Slider('handle3','track3',{range:$R(0,200),
  58         values:[0,50,100,150,200],
  59         onSlide:function(v){$('debug3').innerHTML='slide: '+v},
  60         onChange:function(v){$('debug3').innerHTML='changed! '+v}});
  61    new Control.Slider('handle4','track4',{range:$R(0,20),
  62         values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
  63         onSlide:function(v){$('debug4').innerHTML='slide: '+v; $('barreSortie4').style.width=(v*3)+'px';},
  64         onChange:function(v){$('debug4').innerHTML='changed! '+v}});
  65   // ]]>
  66   </script>
  67 </p>
  68
  69
  70         <p>Available Options.<br /><ul>
  71   <li>axis: (horizontal or vertical)</li>
  72   <li>increment:</li>
  73   <li>step:</li>
  74   <li>alignX &#8211; will move the handle so that it aligns properly on the track.  This will move it x pixels on the x-axis.</li>
  75
  76   <li>alignY &#8211; will move the handle so that it aligns properly on the track.  This will move it x pixels on the y-axis.</li>
  77   <li>disabled &#8211; will set the slider&#8217;s state to being &#8216;locked&#8217; and thus won&#8217;t respond to input.</li>
  78   <li>maximum:</li>
  79
  80   <li>minimum:</li>
  81   <li>sliderValue:</li>
  82   <li>handleImage:</li>
  83   <li>handleDisabled:</li>
  84   <li>values: [10, 20, 30, 40];</li>
  85   <li>onSlide:</li>
  86
  87   <li>onChange:</li><br /></ul></p>
  88
  89
  90         <p>Another easy addition is to add a <b>cursor: move</b> CSS rule on the slider, the default text cursor gives less feedback as to what is going on, and this would compensate for a sometimes laggy slider. Even better, use cursosr:ns-resize, or ew-resize as appropriate.  I know this is obvious, but thought here was the place to do it.<br />Some other obvious note: put the javascript after the body.  If you put the javascript right after the slider divs, it will work in firefox, but IE will start doing weird bugs.</p>
  91         </div>
  92
  93         <div id="changes" style="display: none">
  94
  95                 <p style="background: #eee; padding: 3px; border: 1px solid silver">
  96                         <small>
  97                                 Showing changes from revision #8 to #9:
  98                                 <ins class="diffins">Added</ins> | <del class="diffdel">Removed</del>
  99                         </small>
 100                 </p>
 101
 102                 <p><strong>Standard horizontal slider</strong>
 103   <div id="track1" style="width:200px;background-color:#aaa;height:5px;">
 104
 105     <div id="handle1" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
 106   </div>
 107   <div id="debug1" style="padding-top: 5px;"></div></p>
 108
 109
 110         <p><strong>Vertical slider</strong>
 111   <div id="track2" style="height:100px;background-color:#aaa;width:5px;">
 112     <div id="handle2" style="width:10px;height:5px;background-color:#f00;cursor:move;"> </div></div>
 113
 114   <div id="debug2"></div></p>
 115
 116
 117         <p><strong>Slider with predefined values [0,50,100,150,200]</strong>
 118   <div id="track3" style="width:200px;background-color:#aaa;height:5px;">
 119     <div id="handle3" style="width:5px;height:10px;background-color:#f00;cursor:move;"> </div>
 120   </div>
 121   <div id="debug3" style="padding-top: 5px;"></div></p>
 122
 123         <p><strong>Slider with predefined values [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] and interactions with div area</strong><br /><div id="track4" style="background-color : #CCCCCC; width : 200px; height : 5px;">
 124     <div class="selected" id="handle4" style="width: 5px; height: 10px; background-color: rgb(255, 0, 0); cursor: move; left: 0px; position: relative;"> </div><br /></div><br /><div id="barreSortie4" style="background-color : #DCDCDC; width : 0px; height : 7px; border : #232323 1px dashed; margin-top : 10px;"></div><br /><div id="debug4" style="padding-top: 5px;"></div></p>
 125
 126
 127         <p>
 128   <script type="text/javascript" language="javascript">
 129   // <![CDATA[
 130     new Control.Slider('handle1','track1',{
 131       onSlide:function(v){$('debug1').innerHTML='slide: '+v},
 132       onChange:function(v){$('debug1').innerHTML='changed! '+v}});
 133     new Control.Slider('handle2','track2',{axis:'vertical',
 134         onSlide:function(v){$('debug2').innerHTML='slide: '+v},
 135         onChange:function(v){$('debug2').innerHTML='changed! '+v}});
 136     new Control.Slider('handle3','track3',{range:$R(0,200),
 137         values:[0,50,100,150,200],
 138         onSlide:function(v){$('debug3').innerHTML='slide: '+v},
 139         onChange:function(v){$('debug3').innerHTML='changed! '+v}});
 140    new Control.Slider('handle4','track4',{range:$R(0,20),
 141         values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
 142         onSlide:function(v){$('debug4').innerHTML='slide: '+v; $('barreSortie4').style.width=(v*3)+'px';},
 143         onChange:function(v){$('debug4').innerHTML='changed! '+v}});
 144   // ]]>
 145   </script>
 146 </p>
 147
 148
 149         <p>Available Options.<br /><ul>
 150   <li>axis: (horizontal or vertical)</li>
 151   <li>increment:</li>
 152   <li>step:</li>
 153   <li>alignX &#8211; will move the handle so that it aligns properly on the track.  This will move it x pixels on the x-axis.</li>
 154
 155   <li>alignY &#8211; will move the handle so that it aligns properly on the track.  This will move it x pixels on the y-axis.</li>
 156   <li>disabled &#8211; will set the slider&#8217;s state to being &#8216;locked&#8217; and thus won&#8217;t respond to input.</li>
 157   <li>maximum:</li>
 158
 159   <li>minimum:</li>
 160   <li>sliderValue:</li>
 161   <li>handleImage:</li>
 162   <li>handleDisabled:</li>
 163   <li>values: [10, 20, 30, 40];</li>
 164   <li>onSlide:</li>
 165
 166   <li>onChange:</li><br /></ul></p>
 167
 168
 169         <p>Another easy addition is to add a <b>cursor: move</b> CSS rule on the slider, the default text cursor gives less feedback as to what is going on, and this would compensate for a sometimes laggy slider. <ins class="diffins">Even better, use cursosr:ns-resize, or ew-resize as appropriate.  </ins>I know this is obvious, but thought here was the place to do it.</p><ins class="diffmod"><br />Some other obvious note: put the javascript after the body.  If you put the javascript right after the slider divs, it will work in firefox, but IE will start doing weird bugs.</ins></p>
 170         </div>
 171
 172
 173 </div>
 174
 175 </body>