Although the scrollbar follows this familiar pattern, there is still a little special thing.
Basic usage
Create a new scrollbar (Slider) object
Let's start with HTML and CSS first. The basic idea is to create a div of the scrollbar, so it is a long rectangle (the length depends on what we do with the scrollbar), and a child element as the slider.
Reference code:
<div ><div ></div></div>
Our CSS can be that simple too. Just set width, height, and background color.
Reference code:
#slider {
width: 200px
height: 20px
background-color: #0099FF
}
#knob {
width: 20px
height: 20px
background-color: #993333
}
Now we can create our new scrollbar object. To initialize the scrollbar, first assign your relevant elements to some variables, and then use "new" to create a scrollbar Slider object, which is the same as when we created tween, morph and before:
Reference code:
// Assign elements to variables
var sliderObject = $('slider');
var knobObject = $('knob');
// Create a new slider object
// Define the slider element first
// Then define the slider element
var SliderObject = new Slider(sliderObject , knobObject , {
// Here is your option
// We will talk about these options in detail later
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// Onchange event will be triggered when the step value changes
// It will pass the current step as a parameter
onChange: function(step){
// The code to be executed when placing onchange here
// You can quote step
},
// Ontick event is triggered when the user drags the slider
// It will pass the current position (relative to the position of the parent element)
onTick: function(pos){
// This is required to adjust the position of the slider
// We will explain this in detail below
('left', pos);
},
// Triggered when dragging stops
onComplete: function(step){
// Code to be executed when completed
// You can quote step
}
});
Slider options
Snap: (default is false), can be a true or false value. This determines whether the slider moves with the smallest cell
Offset: (default is 0), which is where the slider is relative to the start. You can do an experiment on this.
Range: (False by default), this is a very useful option. You can set a number range that will trigger the onchange event according to this number and your step. For example: If you set the range [0, 200] and you set the step value to 10, the value of step of the onchange will be 20 each time. This range is also a negative number, such as [-10,0], which is very useful when making reverse scrollbars (there are examples below).
Wheel: (default is false). If this parameter is set to true, this scroll bar will recognize the mouse wheel event. When using the mouse wheel, you Ken needs to adjust the range parameter to ensure that the mouse wheel event behaves not the opposite (again, there will be an example later).
Steps: (default is 100), the default value is 100 is very useful because it can be easily used as a percentage. Of course, you can also set up as many steps as you are for your reasons (this is OK).
Mode: (default is "horizontal"), this parameter defines whether the scroll bar scrolls horizontally or vertically. Of course, there are some other steps to convert from horizontal scrolling to vertical scrolling.
Callback Event
onChange: This event is triggered when step changes. Pass the parameter "step" at the same time. You can see when it triggers in the example below.
onTick: This event is triggered when the position of the control point changes. Pass the parameter "position" at the same time. You can see when it triggers in the example below.
onComplete: This event is triggered when the control point is released. The parameter "step" is passed to death. You can see when it triggers in the example below.
Code Example
Let's build an example to see how they work.
.set(); method: Take a look at the events on the button and see how the .set() method is used. It's very simple to use: call the slider object, append the .set, and then the number of steps you want to scroll.
Reference code:
('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 (left is used for horizontal scrolling)
('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825')
$('steps_complete_number').set('html', step);
(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 (using top vertical scrolling)
('top', pos);
},
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
// Set vertical scrolling starts from 0
// Otherwise, it starts from the top
(0);
// Set the scroll bar starting from 7
$('set_knob').addEvent('click', function(){ (7)});
});
onChange
passes the step you are on: onTick
passes the knob position: onComplete
passes the current step:
Note that in the vertical scrolling example, we not only changed "mode" to "vertical", we also changed the "left" attribute in the .setStyle(); method in the onTick event to the "top" attribute. Also, let's see how we set "range" to start from -10 and then to 0. Then, we display the current number in the onChange event, and we multiply this value by -1, which is exactly the opposite of the position. This accomplishes two things: one is to change this value from 10 to 0, and 0 is at the bottom. But this may set rang to from 10 to 0, causing the mouse wheel event to become the opposite. 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 scrollbar correctly and the value starting at 0 at the bottom is to make this little change.
Note: As for the use of "top" and "left" in the onTick event, I'm not sure if this is the "rule" in MooTools. This is just one way I can get them to work correctly and I'm interested in hearing some other clear statements.
Basic usage
Create a new scrollbar (Slider) object
Let's start with HTML and CSS first. The basic idea is to create a div of the scrollbar, so it is a long rectangle (the length depends on what we do with the scrollbar), and a child element as the slider.
Reference code:
Copy the codeThe code is as follows:
<div ><div ></div></div>
Our CSS can be that simple too. Just set width, height, and background color.
Reference code:
Copy the codeThe 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 scrollbar object. To initialize the scrollbar, first assign your relevant elements to some variables, and then use "new" to create a scrollbar Slider object, which is the same as when we created tween, morph and before:
Reference code:
Copy the codeThe code is as follows:
// Assign elements to variables
var sliderObject = $('slider');
var knobObject = $('knob');
// Create a new slider object
// Define the slider element first
// Then define the slider element
var SliderObject = new Slider(sliderObject , knobObject , {
// Here is your option
// We will talk about these options in detail later
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// Onchange event will be triggered when the step value changes
// It will pass the current step as a parameter
onChange: function(step){
// The code to be executed when placing onchange here
// You can quote step
},
// Ontick event is triggered when the user drags the slider
// It will pass the current position (relative to the position of the parent element)
onTick: function(pos){
// This is required to adjust the position of the slider
// We will explain this in detail below
('left', pos);
},
// Triggered when dragging stops
onComplete: function(step){
// Code to be executed when completed
// You can quote step
}
});
Slider options
Snap: (default is false), can be a true or false value. This determines whether the slider moves with the smallest cell
Offset: (default is 0), which is where the slider is relative to the start. You can do an experiment on this.
Range: (False by default), this is a very useful option. You can set a number range that will trigger the onchange event according to this number and your step. For example: If you set the range [0, 200] and you set the step value to 10, the value of step of the onchange will be 20 each time. This range is also a negative number, such as [-10,0], which is very useful when making reverse scrollbars (there are examples below).
Wheel: (default is false). If this parameter is set to true, this scroll bar will recognize the mouse wheel event. When using the mouse wheel, you Ken needs to adjust the range parameter to ensure that the mouse wheel event behaves not the opposite (again, there will be an example later).
Steps: (default is 100), the default value is 100 is very useful because it can be easily used as a percentage. Of course, you can also set up as many steps as you are for your reasons (this is OK).
Mode: (default is "horizontal"), this parameter defines whether the scroll bar scrolls horizontally or vertically. Of course, there are some other steps to convert from horizontal scrolling to vertical scrolling.
Callback Event
onChange: This event is triggered when step changes. Pass the parameter "step" at the same time. You can see when it triggers in the example below.
onTick: This event is triggered when the position of the control point changes. Pass the parameter "position" at the same time. You can see when it triggers in the example below.
onComplete: This event is triggered when the control point is released. The parameter "step" is passed to death. You can see when it triggers in the example below.
Code Example
Let's build an example to see how they work.
.set(); method: Take a look at the events on the button and see how the .set() method is used. It's very simple to use: call the slider object, append the .set, and then the number of steps you want to scroll.
Reference code:
Copy the codeThe code is as follows:
('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 (left is used for horizontal scrolling)
('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825')
$('steps_complete_number').set('html', step);
(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 (using top vertical scrolling)
('top', pos);
},
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
// Set vertical scrolling starts from 0
// Otherwise, it starts from the top
(0);
// Set the scroll bar starting from 7
$('set_knob').addEvent('click', function(){ (7)});
});
onChange
passes the step you are on: onTick
passes the knob position: onComplete
passes the current step:
Note that in the vertical scrolling example, we not only changed "mode" to "vertical", we also changed the "left" attribute in the .setStyle(); method in the onTick event to the "top" attribute. Also, let's see how we set "range" to start from -10 and then to 0. Then, we display the current number in the onChange event, and we multiply this value by -1, which is exactly the opposite of the position. This accomplishes two things: one is to change this value from 10 to 0, and 0 is at the bottom. But this may set rang to from 10 to 0, causing the mouse wheel event to become the opposite. 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 scrollbar correctly and the value starting at 0 at the bottom is to make this little change.
Note: As for the use of "top" and "left" in the onTick event, I'm not sure if this is the "rule" in MooTools. This is just one way I can get them to work correctly and I'm interested in hearing some other clear statements.
More learning
As before, please refer to thesliders section。
Download a zip package with 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 the example above.