Although the scroll bar (Slider) follows this familiar pattern, there is still a special place.
Basic usage
Create a new scroll bar (Slider) object
We start with HTML and CSS first. The basic idea is to create a scroll bar div, so it's a long rectangle (depending on what we do with the scroll bar) and a child element as a slider.
Reference code:
Copy Code code as follows:
<div id= "Slider" ><div id= "Knob" ></div></div>
Our CSS can be as simple as that. You only need to set the width, height, and background color.
Reference code:
Copy Code code 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, you first assign the relevant elements to some variables, and then use "new" to create a ScrollBar slider object that we used to create tween, Morph, and Drag.move:
Reference code:
Copy Code code as follows:
Assigning elements to variables
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's your option.
We'll talk about 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 to the
Onchange:function (step) {
Code to execute when placing onchange here
You can quote step
},
Triggers the Ontick event when the user drags the slider
It passes the current position (relative to the location of the parent element)
Ontick:function (POS) {
This is required to adjust the position of the slider
We'll explain this in more detail below.
This.knob.setStyle (' left ', POS);
},
Triggered when drag is stopped
Oncomplete:function (step) {
Code to execute when finished
You can quote step
}
});
Options for Slider
Snap: (Default to False), can be a true or false value. This determines whether the slider moves in the smallest cell
Offset: (default is 0), which is the position of the slider relative to the beginning. You can do an experiment on it.
Range: (default is False), which is a very useful option. You can set a range of numbers that will trigger the OnChange event in accordance with this number and your steps (step). For example, if you set the range to [0, 200], and you set the step value to 10, then each onchange step will have a value of 20. This range is also a negative number, such as [ -10,0], which is useful when doing a reverse scroll bar (examples below).
Wheel: (default is False), if this parameter is set to True, the scroll bar will recognize the mouse wheel event. When using the mouse wheel, you will need to adjust the range parameter to ensure that the mouse wheel event behavior is not the opposite (again, there will be examples later).
Steps: (default is 100), the default value of 100 is useful because it can be easily used as a percentage. Of course, you can also set any number of steps for your reasons (this is possible).
Mode: (Default is "horizontal"), this parameter defines whether the scroll bar is scrolling horizontally or vertically. Of course, there are other steps you need to convert from horizontal scrolling to vertical scrolling.
Callback Event
OnChange: This event is triggered when step changes. The parameter "step" is passed at the same time. You can see from the example below what time it was triggered.
Ontick: This event is triggered when the position of the control point changes. The parameter "position" is passed at the same time. You can see from the example below what time it was triggered.
OnComplete: This event is triggered when the control point is released. Stabbed to death pass the parameter "step". You can see from the example below what time it was triggered.
code example
Let's build an example to see how they work.
. Set (); Method: Look at the events on the button to see how the. Set () method is used. It's very simple to use: Call the Slider object, attach. Set, and then the number of steps you want to scroll (step).
Reference code:
Copy Code code as follows:
Window.addevent (' Domready ', function () {
var sliderobject = new Slider (' Slider ', ' knob ', {
Options
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 line is required (horizontal scrolling using left)
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: ' Vertical ',
Ontick:function (POS) {
This line is required (vertical scrolling uses top)
This.knob.setStyle (' Top ', POS);
},
Onchange:function (step) {
$ (' Stepsv_number '). Set (' HTML ', step*-1);
}
});
Sets the vertical scrolling starting from 0
Otherwise, it starts at the top.
Sliderobjectv.set (0);
Set the scroll bar to start at 7
$ (' Set_knob '). Addevent (' click ', Function () {Sliderobject.set (7)});
});
OnChange
Passes the step for you are On:ontick
Passes the Knob Position:oncomplete
Passes the current step:
Note that in the case of vertical scrolling, we are not just changing "mode" to "vertical", we have also changed the. SetStyle () in the Ontick event, the "left" property in the method is the "top" property. Also, look at how we set "range" starting with-10 and then to 0. We then display the current number in the OnChange event, and we multiply the value by-1, just as opposed to the position. This completes two things: first, let's change this value from 10 to 0, 0 at the bottom. However, this may be set to rang from 10 to 0, which causes the mouse wheel event to be reversed. That's our second reason--the mouse wheel reads the value, not the direction you want to control, so the only way to get the mouse wheel to read the scroll bar correctly and start at the bottom of 0 is to do this little bit of 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. It's just a way for me to get them to work correctly, and I'm interested in hearing some other clear statements.
Learn More
As before, refer to the Sliders Section of the documentation.
Download a Zip package that contains everything you need to start
Includes the core and extension libraries of MooTools 1.2, as well as an external JavaScript file, a simple HTML page and a CSS file and examples above.
