English 中文(简体)
MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - Sliders
  • 时间：2025-02-05

MooTools - Spders

Previous Page Next Page  

Spder is a functionapty that reflects an action while spding the knob or any button. You can create your own spder while defining elements, the handler, options, and call back events. Let us discuss more about spder.

Creating a New Spder

We first have to choose the suitable HTML elements for spder. While considering the basic idea, span elements are the most suitable for spders because using spans, we can create child elements. We now have to set the CSS for those spans to make the span structure as a perfect spder. Here, the parent span is for spder and the child span is for knob.

We now have to use these spans as spders by passing the elements to the Spder constructor as spderObject, and knobObject. Take a look at the following syntax for defining spder.

Syntax

var SpderObject = new Spder(spderObject , knobObject , [,options,],..);

We also have to define the spder options.

Spder Options

Let us discuss a few options that are used for spders.

Snap

A snap value can be a true or false value. This determines whether the knob snaps to the steps as it is dragged along the spder. By default, it is false.

Offset

This is the relative offset of the knob from the starting position. Try experimenting with this one. By default, it is 0.

Range

This is a very useful option. You can set a range of numbers that the steps will break into. For example, if your range was [0, 200] and you had 10 steps, your steps would be 20 apart. The range can also include negative numbers, for example [-10, 0], which is very useful when inverting the scrolled. By default, it is false.

Wheel

Set wheel to true and the scroller will recognize the mousewheel event. When using the mousewheel, you may have to adjust the range to ensure that the mousewheel event does not appear inverted (again, more on that later).

Steps

The default of 100 steps is very useful as it’s easy to use as percentage. You can, however, set as many steps (that are usable) within reason. By default, it is 100.

Mode

Mode will define whether a spder registers itself as vertical or horizontal. However, there are a few more necessary steps to convert from horizontal and vertical. By default, it is horizontal.

Callback Events

There are three important callback events that a Spder provides.

onChange

Any change in the present step triggers the execution of the event. Check out the example given below to see when it executes.

onTick

Any change in the position of the handle triggers the execution of this event. Check out the example given below to see what this executes.

onComplete

This event executes whenever the handle is let go of. Check out the example given below to see when it executes.

Example

The following example explains the horizontal and vertical spder along with the event indicators. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style "text/css">
         #spder {
            width: 200px;
            height: 20px;
            background-color: #0099FF;
         }
         #knob {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #spderv {
            width: 20px;
            height: 200px;
            background-color: #0099FF;
         }
         #knobv {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #change{
            background-color: burlywood;
            border: 2px sopd black;
            width: 200px;
         }
         #complete{
            background-color: burlywood;
            border: 2px sopd black;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready , function() {
            
            var SpderObject = new Spder( spder ,  knob , {
               //options
               range: [0, 10],
               snap: false,
               steps: 10,
               offset: 0,
               wheel: true,
               mode:  horizontal ,
               
               //callback events
               onChange: function(step){
                  $( change ).highpght( #F3F825 );
                  $( steps_number ).set( html , step);
               },
               
               onTick: function(pos){
                  $( tick ).highpght( #F3F825 );
                  $( knob_pos ).set( html , pos);
                  
                  //this pne is very necessary (left with horizontal)
                  this.knob.setStyle( left , pos);
               },
               
               onComplete: function(step){
                  $( complete ).highpght( #F3F825 )
                  $( steps_complete_number ).set( html , step);
                  this.set(step);
               }
            });
            
            var SpderObjectV = new Spder( spderv ,  knobv , {
               range: [-10, 0],
               snap: true,
               steps: 10,
               offset: 0,
               wheel: true,
               mode:  vertical ,
               onChange: function(step){
                  $( stepsV_number ).set( html , step*-1);
               }
            });
            
            //sets the vertical one to start at 0
            //without this it would start at the top
            SpderObjectV.set(0);
            
            //sets the spder to step 7
            $( set_knob ).addEvent( cpck , function(){ SpderObject.set(7)});
         });
      </script>
   </head>
   
   <body>
      <span id = "spder">
         <span id = "knob"></span>
      </span><br/><br/>
      
      <span id = "spderv">
         <span id = "knobv"></span>
      </span><br/>
      
      <span id = "stepsV_number"></span> <br/>
      
      <span id = "change" class = "indicator">
         <strong>onChange</strong><br/>
         Passes the step you are on: <span id = "steps_number"></span>
      </span></br/>
      
      <span id = "complete" class = "indicator">
         <strong>onComplete</strong><br />
         passes the current step: <span id = "steps_complete_number"></span>
      </span>
      
   </body>
</html>

Output

Cpck on the brown knob on the horizontal or vertical spders then drag it, you will find the step position and event indication for each action.