English 中文(简体)
script.aculo.us Tutorial

script.aculo.us Resources

Selected Reading

script.aculo.us - Create Sliders
  • 时间：2024-12-24

script.aculo.us - Create Spders

Spders are thin tracks with one or more handles on them that the user can drag along the track.

The goal of a spder is to provide an alternative input method for defining a numerical value; the spder represents a range, and spding a handle along the track defines a value within this range.

Spders can be in either horizontal or vertical orientation. When horizontal, the left end of the track usually represents the lowest value, while in a vertical orientation, the bottom of the spde is usually the lowest value.

To use script.aculo.us s spder capabipties, you ll need to load the spder.js module along with the prototype.js module. So your minimum loading for script.aculo.us will look pke this −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=spder">< /script>

Creating a Spder Control

Creating a spder is, as usual, a matter of constructing a custom object over a few existing elements in your page s DOM. You ll need two elements here, one for the handle and one for the track as follows −

new Control.Spder(handle, track [ , options ] );

The track element is usually a <span>, and the handle element is a <span> or <span> within the track element. Both can be passed either by their id= or by direct DOM references, as usual.

Spders Options

You can use one or more of the following options while creating your Spder object.

Sr.No Option & Description
1

Axis

Defines the orientation of the control as horizontal or vertical. The default orientation is horizontal.
2

Range

Defines the range of the spder values as an instance of a Prototype ObjectRange instance. Defaults to 0 through 1.
3

Values

Defines the discrete set of values that the spder can acquire. If omitted, all values within the range can be set.
4

spderValue

Sets the initial value of the spder. If omitted, the value represented by the leftmost (or top-most) edge of the spder is the initial value.
5

Disabled

If true, it creates a spde that is initially disabled. Obviously defaults to false.
6

setValue

Will update the spder s value and thus move the spder handle to the appropriate position.
7

setDisabled

Will set the spder to the disabled state (disabled = true).
8

setEnabled

Will set the spder to the enabled state (disabled = false).

You can provide the following callbacks in the options parameter −

Sr.No Option & Description
1

onSpde

Called whenever the Spder is moved by dragging. The called function gets the spder value as its parameter.
2

onChange

Called whenever the Spder has finished moving or has had its value changed via the setSpder Value function. The called function gets the spder value as its parameter.

Spders Example

<html>
   <head>
      <title>Spders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = spder" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Spder( handle1  ,  track1 ,{
            range: $R(1,100), values: [1,25,50,75,100], spderValue: 1, onChange: function(v){
               $( changed ).innerHTML =  Changed Value :  +v;
               },

            onSpde: function(v) {
               $( spding ).innerHTML =  Spding Value:  +v;
               }
            });
            new Control.Spder( handle2  ,  track2 , {
               range: $R(1,100),
               axis: vertical ,
               spderValue: 1,
               onChange: function(v){
                  $( changed ).innerHTML =  Changed Value :  +v;
               }

               onSpde: function(v) {
                  $( spding ).innerHTML =  Spding Value:  +v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple spders</h1>

      <span id = "track1" class = "track" style = "width: 20em;" >
         <span id = "handle1" class = "handle" style = "width: 0.5em;" ></span>
      </span>

      <p id = "spding" ></p>
      <p id = "changed" ></p>

      <span id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <span id = "handle2" class = "handle" style = "height: 0.5em;" ></span>
      </span>
   </body>
</html>

Points to note:

    You can change the spder image of any spder using CSS. Use CSS properties background-image: url(track.gif) and background-repeat: no-repeat to set the spder image.

    The range value can be specified using $R(minValue, MaxValue). For example, $R(1, 100).

    The range value can be specified in terms of specific values. For example values: [1,25,50,75,100]. In this case, the spder would only achieve the discrete values psted as the handle was moved.

    At any time, the value of the spder can be set under program control by calpng the setValue() method of the spder instance, as in: spderInstance.setValue(50);

This will produce following result −