Слайдеры – Урок 14 – Уроки Mootools


Введение в слайдеры

Если вы прочитали предыдущие уроки Mootools, то Вам должны быть уже более или менее понятны большинство объектов библиотеки Mootools. Объект Slider особо ничем не отличается от других: создаете новый слайдер (new Slider), определяете элементы слайдера и ручки, определяете параметры и создаете несколько функций для обратного вызова и, в принципе, всё. Но, несмотря на то, что объект Slider и создается примерно по такому шаблону, есть несколько вещей, которые обязательно нужно нам пройти.

Основы

Создание нового объекта Slider

Давайте сразу начнем с кода HTML и CSS. Основным тут является создание длинного, прямоугольного блока div (насколько длинный, зависит от того, для чего слайдер будет использоваться) и его дочернего элемента div, который будет служить “захватом” слайдера – ручкой.
<!--Вертикальный слайдер-->
<div id="slider">
<div id="knob"></div>
</div>
А код CSS будет выглядеть немного позамысловатее:
//полоса прокрутка или слайдер
#slider {
	background-color: #00C;
	border: 1px dashed black;
	height:25px;
	width:250px;
}
//"захват" или ручка
#knob {
	background-color:#FF0;
	height:25px;
	width:25px;
}
Теперь можно смело создавать новый объект Slider, для чего вначале создаем переменные с элементами и потом создаем новый (“new“) объект slider, также, как мы это делали с объектами tween, drag.move и morph:
//создаем переменные для наших блоков
var sliderObject = $('slider');
var knobObject = $('knob');
 
//создаем новый объект slider
//но вначале, определяем элементы слайдера
//а потом определяем объект захвата
var SliderObject = new Slider(sliderObject , knobObject , {
    //а вот и параметры
    //ниже каждый из них рассматривается более подробно
    range: [0, 10],
    snap: true,
    steps: 10,
    offset: 0,
    wheel: true,
    mode: 'horizontal',
    //событие onchange запускается тогда, когда значение параметра step изменится
    //и передаст текущее значение этому параметру
    onChange: function(step){
        //сюда вставляем код того, что должно произойти по событию onchange
        //можно ссылаться на параметр step
    },
    //событие onTick передвигается, когда пользователь передвигает захват
    //и передаст текущее положение (относительно родительского элемента)
    onTick: function(pos){
	//это необходимо для того, чтобы захват настроился
        //ниже остановимся на этом вопросе более подробно
	this.knob.setStyle('left', pos);
    },
    //срабатывает, когда ползунок останавливается
    //и пользователь "отпускает" его
    onComplete: function(step){
        //сюда вставляем код того, что должно произойти по событию onComplete
        //можно ссылаться на параметр step
    }
});
Немного грубовато все получилось, но, надеюсь, далее все прояснится.

Параметры объекта Slider

  • snap – захват (по умолчанию – false): булев тип (думаю, все знают, что это такое). Определяет то, будет ли бегунок закрепляться за шагами по мере передвижения по слайдеру (тут немного запутано, но попробую объяснить этот пункт немного дальше).
  • offset – сбвиг (по умолчанию – 0): относительный сдвиг захвата от первоначального положения. С этим параметром нужно поэкспериментировать, чтобы понять его назначение ;) .
  • range – диапазон (по умолчанию – false): Очень полезный параметр. Можно назначить диапазон значений, на которые будут разбиваться шаги (параметр steps). Например, если был указан диапазон [0, 200], а параметр steps (шаги) имеет значение 10, то расстояние между шагами будет равно 20. Диапазон может также включать в себя отрицательные числа, например [-10, 0], что оказывается очень полезным при инвертировании скроллера (дальше больше© :) ).
  • wheel (по умолчанию – false): если установить параметр на true, то объект будет распознавать движения колеса мышки. При исползовании колёсика мышки, возможно нужно будет скорректировать диапазон, чтобы убедиться в том, что событие mousewheel не будет инвертировано (и снова дальше больше©).
  • steps – шаги (по умолчанию – 100): Значение в 100 шагов очень удобно, так как его можно использовать как процентное соотношение. Однако, можно назначить столько, шагов, сколько душе угодно (в разумных пределах, конечно).
  • mode – режим (по умолчанию – ‘horizontal’ – горизонтально): Режим определяет будет ли слайдер вертикальным или горизонтальным. Хотя, для того, чтобы сделать слайдер вертикальным или горизонтальным, нужно будет проделать еще несколько шагов.

Функции по событиям

  • onChange: это событие запускается, когда текущий шаг изменяет свое значение. Передает новое значение параметра “step”.
  • onTick: срабатывает, когда измеяется положение бегунка. Передает новое значение параметра “position”.
  • onComplete: запускается, когда пользователь отпускает бегунок. Передает новое значение параметра “step”.
Для лучшего понимания за что отвечает каждое событие и когда каждое из них изменяется, смотрите на пример ниже.

И самое вкусное – пример

Итак, давайте создадим, наконец, свой слайдер, который расставит все новые знания по полочкам.

.set();

Посмотрев на событие на элементе button и мы увидим метод .set() в действии. Он очень прост в использовании: просто вызываем слайдер, добавляем к нему метод .set() и шаг, с которым мы будем двигать бегунок.
window.addEvent('domready', function() {
	var SliderObject = new Slider('slider-h', 'knob-h', {
		range: [0, 10],
		snap: false,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'horizontal',
	    onChange: function(step){
			$('change').highlight('#F3F825');
			$('steps_number').set('html', step);
	    },
	    onTick: function(pos){
			$('tick').highlight('#F3F825');
			$('knob_pos').set('html', pos);
			this.knob.setStyle('left', pos);
 
	    },
	    onComplete: function(step){
			$('complete').highlight('#F3F825')
			$('steps_complete_number').set('html', step);
			this.set(step);
    	}
	});
 
	var SliderObjectV = new Slider('slider-v', 'knob-v', {
		range: [-10, 0],
		snap: true,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'vertical',
	    onChange: function(step){
			$('changeV').highlight('#F3F825');
			$('stepsV_number').set('html', step*-1);
	    },
	    onTick: function(pos){
			$('tickV').highlight('#F3F825');
			$('knobV_pos').set('html', pos);
			this.knob.setStyle('top', pos);
 
	    },
	    onComplete: function(step){
			$('completeV').highlight('#F3F825')
			$('stepsV_complete_number').set('html', step*-1);
			this.set(step);
    	}
	});
 
	SliderObjectV.set(0);
	$('set_knob').addEvent('click', function(){
		SliderObject.set(7);
	});		
	$('set_knobV').addEvent('click', function(){
		//чтобы установить ползунок на 5, нужно установить его на -5
		//т.к. в нашем случае идет поднятие ползунка вверх, а это значит мы уходим
		//по ту сторону нуля
		SliderObjectV.set(-5);
	});
 
});
<div id="slider_wrap">
	<div id="change" class="indicator"><strong>onChange</strong> передаёт шаг, на котором Вы находитесь: <span id="steps_number"> </span></div>
	<div id="tick" class="indicator"><strong>onTick</strong> передаёт положение ползунка: <span id="knob_pos"> </span></div>
	<div id="complete" class="indicator"><strong>onComplete</strong> передаёт текущий шаг: <span id="steps_complete_number"> </span></div>
	<div id="slider-h">
		<div id="knob-h"></div>
	</div>
	<button id="set_knob" class="b">Установить ползунок на 7-й шаг</button>
	<div id="changeV" class="indicator"><strong>onChange</strong> передаёт шаг, на котором Вы находитесь: <span id="stepsV_number"> </span></div>
	<div id="tickV" class="indicator"><strong>onTick</strong> передаёт положение ползунка: <span id="knobV_pos"> </span></div>
	<div id="completeV" class="indicator"><strong>onComplete</strong> передаёт текущий шаг: <span id="stepsV_complete_number"> </span></div>
	<button id="set_knobV" class="b">Установить ползунок на 5-й шаг</button>
	<div id="slider-v">
		<div id="knob-v"></div>
	</div>
</div>
onChange передаёт шаг, на котором Вы находитесь:
onTick передаёт положение ползунка:
onComplete передаёт текущий шаг:
onChange передаёт шаг, на котором Вы находитесь:
onTick передаёт положение ползунка:
onComplete передаёт текущий шаг:

Обратите внимание на пример с вертикальным слайдером: мы не только изменяем параметр “mode” (режим) на “vertical” (вертикальный), но мы также используем свойство стиля “top” вместо “left” в событии onTick, и передаем ему новое значение с помощью функции .setStyle(). Далее, при отображении числа для события onChange, мы умножаем его на -1 (минус один), что делает из отрицательного числа, положительное (если кто помнит базовую математику ;) ). Это позволяет сделать две вещи: первое – заменить 10 на 0, где 0 – нижняя точка слайдера. Практически такого же результата, в принципе, можно добиться и установив параметр “range” на [10,0], но, при этом, колесо мышки будет работать наоборот. И это подводит нас ко второй вещи: только так можно заставить скрипт правильно понимать движение колеса мышки, ведь оно получает значения, а не слова (“vertical/horizontal”), а если пропустить первую “вещь” (с умножением на -1), то колесо прокрутки становится инвертированным. А проделав такой незамысловатый трюк, можно добиться правильного движения колеса прокрутки И получить правильные значения, где 0 (ноль) – минимальное значение, находящееся внизу.

К сожалению, не я это все придумал, а программист сайта ConsiderOpen.com, потому тут еще следует заметить, что этот трюк с умножением на -1 – это решение одного человека. Если Вам известен путь сделать тоже самое, но меньшими усилиями, все будут рады, если Вы этим поделитесь!

, , , ,

  1. #1 by Kostya on 04.04.2013 - 1:24 pm

    Подскажите как исправить проблему, после выполнения скрипта ошибка присвоения блоку эффекта highlight
    TypeError: Cannot call method ‘highlight’ of null
    mootools библиотека вся стоит, пробовал создать через
    var myDivFx = new Fx.Tween(‘myDiv’) и дальше присвоить через onChange: function(step){
    mydiv.highlight(‘#ddf’); },

    • #2 by proglammer on 04.04.2013 - 4:00 pm

      Костя, судя по ошибке, скрипт не может применить метод, т.к. объекта mydiv несуществует. Методу highlight нужно просто скормить какой-нибудь элемент, тот же #myDiv подойдет

  2. #3 by Kostya on 08.04.2013 - 1:33 pm

    еще вопрос, как работает этот объект “knob” и от куда он взялся, если он ни где не объявлен, и если прописать другой объект, работать не будет.
    onTick: function(pos){
    $(‘tick’).highlight(‘#ddf’);
    $(‘knob_pos’).set(‘html’, pos);
    this.knob.setStyle(‘left’, pos);
    },

(никто не узнает)

Код на картинке: