Until now, initialization of these MooTools plug-in objects has become increasingly familiar. The scroll bar (Slider) is no different. You need to create a new scroll bar, define the elements related to the scroll bar and the Slider, set your options, and create some control functions for the callback event. Although Slider follows this familiar pattern, there is something special.
Basic usage
Create a new Slider object
We start with HTML and CSS. The basic idea is to create the p of a scroll bar, so it is a long rectangle (the length depends on what we do with the scroll bar) and a child element as the slider.
Reference code:
The Code is as follows:
Our CSS can also be so simple. You only need to set the width, height, and background color.
Reference code:
The Code is as follows:
# Slider {
Width: 200px
Height: 20px
Background-color: # 0099FF
}
# Knob {
Width: 20px
Height: 20px
Background-color: #993333
}
Now, we can create our new scroll bar object. To initialize the scroll bar, first assign your related elements to some variables, and then use "new" to create a scroll bar Slider object, which is similar to the previous creation of tween, morph, and drag. same when moving:
Reference code:
The Code is as follows:
// Assign an element to a variable
Var sliderObject = $ ('slider ');
Var knobObject = $ ('knob ');
// Create a new slider object
// First define the slider Element
// Then define the slider Element
Var SliderObject = new Slider (sliderObject, knobObject ,{
// Here is your option
// We will give you a closer look at these options later.
Range: [0, 10],
Snap: true,
Steps: 10,
Offset: 0,
Wheel: true,
Mode: 'horizontal ',
// The onchange event is triggered when the value of step changes.
// It will pass the current step as a parameter
OnChange: function (step ){
// Code to be executed when onchange is placed here
// You can reference step
},
// Triggers the ontick event when you drag the slider.
// It will pass the current position (relative to the location of the parent element)
OnTick: function (pos ){
// This is required to adjust the slider position
// We will explain this in detail below
This. knob. setStyle ('left', pos );
},
// Triggered when the drag is stopped
OnComplete: function (step ){
// Code to be executed upon completion
// You can reference step
}
});
Slider options
Snap: (the default value is false). It can be a value of true or false. This determines whether the slider is moved with the smallest cell.
Offset: (the default value is 0). This is the position of the slider relative to the start position. You can perform a test on this.
Range: (the default value is false), which is a very useful option. You can set a number range to trigger the onchange event based on this number and your step. For example, if the range you set is [0,200] and the value of the step you set is 10, the value of the onchange step is 20 each time. This range is also a negative number, for example, [-10, 0]. This number is very useful for reverse scrolling (as shown in the following example ).
Wheel: (the default value is false). If this parameter is set to true, the scroll bar recognizes the scroll Wheel event. When you use the scroll wheel, you will need to adjust the range parameter to ensure that the scroll wheel event is not the opposite (similarly, there will be an example later ).
Steps: (the default value is 100). The default value is 100, which is very useful because it can be easily used as a percentage. Of course, you can also set any multiple steps for your reasons (this is acceptable ).
Mode: (the default value is "horizontal"). This parameter defines whether the scroll bar is horizontal or vertical. Of course, some other steps are required to convert from horizontal scrolling to vertical scrolling.
Callback event
OnChange: this event is triggered when the step changes. The parameter "step" is also passed ". The following example shows when it is triggered.
OnTick: this event is triggered when the position of the control point changes. The parameter "position" is also passed ". The following example shows when it is triggered.
OnComplete: this event is triggered when the control point is released. The transfer parameter "step" is stabbed to death ". The following example shows when it is triggered.
Sample Code
Let's create an example to see their effect.
. Set (); Method: Check the events on the button to see how the. set () method is used. It is very easy to use: Call the slider object, append. set, and then the number of steps you want to scroll ).
Reference code:
The Code is as follows:
Window. addEvent ('domainready', function (){
Var SliderObject = new Slider ('slider', 'knob ',{
// Option
Range: [0, 10],
Snap: false,
Steps: 10,
Offset: 0,
Wheel: true,
Mode: 'horizontal ',
// Callback event
OnChange: function (step ){
$ ('Change'). highlight ('# F3F825 ');
$ ('Steps _ number'). set ('html', step );
},
OnTick: function (pos ){
$ ('Tick'). highlight ('# F3F825 ');
$ ('Knob _ pos'). set ('html', pos );
// This row is required (left is used for horizontal scrolling)
This. knob. setStyle ('left', pos );
},
OnComplete: function (step ){
$ ('Complete'). highlight ('# F3F825 ')
$ ('Steps _ complete_number '). set ('html', step );
This. set (step );
}
});
Var SliderObjectV = new Slider ('sliderv', 'knobv ',{
Range: [-10, 0],
Snap: true,
Steps: 10,
Offset: 0,
Wheel: true,
Mode: 'signature ',
OnTick: function (pos ){
// This row is required (top is used for vertical scrolling)
This. knob. setStyle ('top', pos );
},
OnChange: function (step ){
$ ('Stepsv _ number'). set ('html', step *-1 );
}
});
// Set the vertical scroll from 0
// Otherwise, it starts from the top
SliderObjectV. set (0 );
// Set the scroll bar to start from 7
$ ('Set _ knob'). addEvent ('click', function () {SliderObject. set (7 )});
});
OnChange
Passes the step you are on: onTick
Passes the knob position: onComplete
Passes the current step:
Note that in the vertical scroll example, we not only changed "mode" to "vertical", but also changed the onTick event. setStyle (); the "left" attribute in the method is the "top" attribute. In addition, let's take a look at how we set "range" from-10 to 0. Then, we show the current number in the onChange event. we multiply this value by-1, which is exactly the opposite of the position. This completes two things: first, let's change the value from 10 to 0, and 0 at the bottom. However, this may be set to rang from 10 to 0, which leads to the opposite of the scroll wheel event. This is our second reason-reading the value with the mouse wheel, not the direction you want to control, therefore, the only way for the scroll wheel to correctly read the scroll bar and the value starting from 0 at the bottom is to make this change.
Note: As for the use of "top" and "left" in the onTick event, I am not sure if this is the "rule" in MooTools ". This is only one way for them to run correctly. I am very interested in hearing other clear statements.
Learn more
As before, see the scyclers section in this document.
Download a zip package containing everything you need
Includes the core library and extension library of MooTools 1.2, as well as an external JavaScript file, a simple HTML page, a CSS file, and the above example.
