Основы

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

Итак, вначале нам необходимо произвести обычную процедуру по передаче необходимых элементов нашей основной переменной. Если есть необходимость, чтобы несколько списков имели функционал сортировки, нужно добавить их ID через запятую:

var sortablesArray = $$('#listA, #listB');

Этот код помещает 2 списка (элемент <UL>/ <OL>) в переменную, с помощью которой можно создать новый объект Sortables:

var sortables  = new Sortables(sortablesArray);

Если использовать следующий HTML код

<ul id="listA">
	<li>Элемент A1</li>
	<li>Элемент A2</li>
	<li>Элемент A3</li>
	<li>Элемент A4</li>
</ul>
<ul id="listB">
	<li>Элемент B1</li>
	<li>Элемент B2</li>
	<li>Элемент B3</li>
	<li>Элемент B4</li>
</ul>

то сортируемые списки выглядели бы так:

• Элемент A1
• Элемент A2
• Элемент A3
• Элемент A4

• Элемент B1
• Элемент B2
• Элемент B3
• Элемент B4

Параметры сортируемого списка

Если есть необходимость расширить или уточнить функциональность вашего сортируемого списка, объект Sortables поддерживает целый ряд дополнительных параметров, которые окажут сильное подспорье в этом.

constrain (false)

Этот параметр определяет, можно ли будет переносить элементы списка из одного списка в другой. Скажем, в текущем объекте Sortables храняться 2 списка <UL>, а установив constrain: true, говорим обработчику, что выносить элемент за пределы его родительского тега нельзя.

var sortables  = new Sortables(sortables Array, {
    constrain: false //значене по умолчанию: false
});

clone (false)

Этот параметр клонирует текущий сортируемый элемент, прикрепляя его положение к курсору мыши, оставляя оригинальный элемент в своем месте. Ниже будет пример, в котором все это показывается.

var sortables  = new Sortables(sortables Array, {
    clone: true //значение по умолчанию: false
});

handle (false)

Параметр определяет элемент, который будет играть роль “ручки” определенного элемента списка. Назначение “ручки” становится полезным, когда нужно сохранить возможность выделять текст в элементах списка или же возможность совершать другие действия в элементе <LI>, а значение по умолчанию (false) делает весь элемент LI одной сплошной ручкой.

var handles = $$('.handlesClass');
var sortables = new Sortables(sortablesArray, {
    handle: handles //по умолчанию false, но сейчас передаем массив с элементами handle

opacity (1)

Определяет степень прозрачности элемента. Если clone был установлен на true, то opacity относится к элементу, который остается на месте, а не к элементу, который следует за курсором.

var sortables  = new Sortables(sortables Array, {
    opacity: 1 //по умолчанию 1, т.е. вообще без прозрачности
});

revert (false)

Принимает либо false, либо параметр объекта Fx.options. Если укажете Fx.options, при “установке” сортируемого элемента будут использоваться указанные параметры для создания мягких переходов и т.д. Например, можно установить “duration:long” и клону потребуется некоторое время для установки себя на выбранное место. В примере ниже используется похожий эффект, так что можете посмотреть, как это все действует.

var sortables  = new Sortables(sortables Array, {
    revert: false //по умолчанию
});
 
//не по умолчанию
var sortables  = new Sortables(sortables Array, {
    revert: {
        duration: 50
    }
});

snap (4)

Как и в случае с перетаскиванием и прокруткой, параметр snap определяет, сколько пикселей должен пройти курсор мыши, чтобы элемент начал его “преследовать”.

var sortables  = new Sortables(sortables Array, {
    snap: 10 //нужно провести курсором 10 пикселей, чтобы сортировка заработала
});

События Sortables

События для объекта Sortables просты и понятны. Каждое из них работает с элементом, которые сортируется (не с его клоном, в случаях, когда clone: true).

• onStart – запускается при начале перетаскивания;
• onSort – запускается при изменении порядка элементов списка;
• onComplete – запускается, когда перетаскиваемый элемент отпускается на новое место обитания.

Немного подробнее остановимся на событиях, когда рассмотрим примеры.

Методы объекта Sortables

До сих пор как-то не заходил у нас разговор о методах вообще, несмотря на то, что мы их уже не раз использовали. По сути, методы – это функции, которые принадлежат классам. Классы мы рассмотрим немного позже, но все-равно, рассмотрим основную идею, что такое классы. Этот плагин (и другие, которые мы уже использовали) использует примерно одну и ту же схему – инициализируется новый экземпляр класса с помощью ключевого слова “new“, определяются несколько параметров и опций, добавляются несколько событий и всё – вот вам новый объект Sortables или эффект Tween. Эта схема и является основой работы с классами. В своей основе, класс позволяет сохранять опции и функции, которые можно использовать тогда, когда это необходимо. Методы – это специальные функции, которые существуют внутри классов и добавляют определенный функционал этим классам. Например .set() и .get() – это методы, которые расширяют функциональность объектов Element. Если смотреть на класс Fx.Tween, .start() является его методом. Для более глубокого понимания методов, далее рассмотрим методы класса Sortables.

.detach()

Этот метод позволяет отключить все “ручки”, что сделает весь список не сортируемым. Метод полезен для отмены действия метода .attach();

.attach();

Этот метод используется для присоединения “ручек” к сортируемому списку. Используется для возобновления “сортируемости” списков после использования метода .detach().

.addItems();

Позволяет добавлять новые элементы в список. Скажем, к примеру, что имеется список, в который пользователь может добавить новый элемент, но тогда нужно будет включить “сортируемость” этого нового элемента.

.removeItems();

Этот метод позволяет удалить “сортируемость” с элемента в сортируемом списке. Полезно, когда нужно закрепить какой-то определенный элемент списка.

.addLists();

Вместо того, чтобы добавлять несколько элементов в список, возможно будет полезнее и быстрее вставить в объект Sortables сразу целый список? Именно это и делает метод .addLists();.

.removeLists();

Следующий метод в списке отвечает за удаление целых списков, в отличие от .removeItems();, который удаляет “сортируемость” с отдельных элементов. Эти методы предотвращают перемещение элементов, закрепляя их содержимое на одном месте.

.serialize();

Сортирование – это конечно хорошо, но а что, если появится необходимость произвести какие-нибудь действия над данными? Метод .serialize(); возвращает два списка: один с id всех элементов списка и их порядковый номер в нем. С помощью этого метода можно выбирать из какого списка брать данные и лишь указав его индексное значение (порядковый номер) в обекте.

Чтобы полностью пройти по теме методов нужно намного больше времени и писанины, чем эти несколько строчек. Но эти строчки сойдут для того, чтобы можно было ознакомиться с этим новым в наших уроках принципах. Ну а дальше мы немного углубимся в эту тему.

Вкуснотища!

Итак, вот оно, самое сладкое (по крайней мере для меня) Вот примерик, в котором у нас будет несколько нумерованных списков, которые будут принадлежать объекту Sortables. Конечно же, используем все методы, описанные выше. Помните одно: весь код, указанный ниже, нужно вставить в событие domready.

window.addEvent('domready', function() {
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);
 
var sortableListsArray = $$('#numberList, #letterList');
var sortableLists = new Sortables(sortableListsArray, {
	clone: true,
	handle: '.handle',
	revert: {
	    //принимают эффекты FX
		duration: 50
	},
	opacity: .5,
	onStart: function(el){
		//передается перетаскиваемый элемент
		$('onStartEvent').highlight('#F3F865');
		el.highlight('#F3F865');
	},
	onSort: function(el) {
		//передается перетаскиваемый элемент
		$('onSortEvent').highlight('#F3F865');
	},
	onComplete: function(el) {
		//передается перетаскиваемый элемент
		$('onCompleteEvent').highlight('#F3F865');
		var listOne = sortableLists.serialize(0);
		var listTwo = sortableLists.serialize(1);
		$('numberListOrder').getElement('span').set('text', listOne);
		$('numberListOrder').highlight('#F3F865')
		$('letterListOrder').getElement('span').set('text', listTwo);
		$('letterListOrder').highlight('#F3F865');
	}
}).detach(); //отключает ручки, потому нужно понажимать на кнопочки, чтобы включить
 
var addListoSort = $('addListTest');
 
$('addList').addEvent('click', function(){
	sortableLists.addLists(addListoSort);
});
 
$('removeList').addEvent('click', function(){
	sortableLists.removeLists(addListoSort);
});
 
$('handlesON').addEvent('click', function(){
	sortableLists.attach();
});
 
$('handlesOFF').addEvent('click', function(){
	sortableLists.detach();
});
 
var itemOne = $('one');
 
$('addItem').addEvent('click', function(){
	sortableLists.addItems(itemOne);
});
 
$('removeItem').addEvent('click', function(){
	sortableLists.removeItems(itemOne);
});
 
});

Ручки не включены по умолчанию, как и указано в комментариях к коду. Для того, чтобы запустить “сортируемость” списка нужно будет поднажимать на кнопочки

Включить ручки
Включить ручки

Добавить сортируемость элементу с id=”one”
Убрать сортируемость этого элемента

• 1
• 2
• 3
• 4
• 5
• 6

• A
• B
• C
• D
• E
• F

Добавить “сортируемость” списку
Убрать “сортируемость” у списока

• добавить A
• добавить B
• добавить C
• добавить D
• добавить E
• добавить F
• добавить G

В этом уроке мы рассмотрим две “полки” библиотеки: первая, это функция .periodical();, после которой мы проведем короткое введение в хеш-массивы. Periodical будет делать именно то, для чего её и придумали (вот так открытие!): она будет выполнять функцию с заданной периодичностью. Вторя “полка”, хеш-массивы – это наборы данных, состоящих из связки ключа и значения, записанных определенным образом. Итак, далее представим краткое введение в хеш-массивы и, если Вы все правильно поймёте, а я уверен в этом на 100% (ведь я то понял ), то эти знания окажутся весьма полезными.

.periodical()

Основы

Всё просто: добавляем .periodical(); к названию функции и эта функция будет периодически запускаться. Вроде бы всё, но не всё. Как и всегда, есть ещё несколько вещей, которые нужно упомянуть. Итак, нам нужна будет функция, которую будем выполнять, и периодичность, в миллисекундах, с которой эта функция будет выполняться.

var periodicalFunction = function(){
	alert('ещё!');
}
	//в этом примере ф-ция periodical() запускаетя при загрузке страницы,
    //но, как будет показано далее, не обязательно на этом ограничиваться
    window.addEvent('domready', function() {
    	//число в скобках означает частоту запуска функции, в миллисекундах
        	var periodicalFunctionVar = periodicalFunction.periodical(100);
    });

Встроенная привязка с .bind();

.periodical позволяет делать одну очень полезную вещь: она автоматически подставит переменную в качестве второго параметра. Например, если есть необходимость передать переменную за пределы domready, можно просто привязать эту переменную как второй параметр к функции, к которой привязываем periodical.

window.addEvent('domready', function() {
	//передаем что-нибудь переменной
    var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

Остановка запущенной по циклу функции

$clear()

Для того, чтобы остановить выполнение функции, запущенной с помощью .periodical(), нужно использовать функцию $clear();. Тут все предельно просто:

	//удаляем из памяти переменную, которая содержала функцию и ее использование с periodical();
    $clear(periodicalFunctionVar);

Пример

Итак, подытожим… примером. Попробуем использовать несколько вещей, которые мы только что узнали (и немного до сели неизведанного), чтобы создать таймер. Вначале напишем HTML код таймера, где будем использовать кнопки старта и обнуления. Также, нужно будет создать полосу, которая будет увеличиваться по истечении времени. И ещё, нужно будет показать, сколько времени уже таймер запущен.

	<button id="timer_start">пуск</button><br />
    <button id="timer_stop">пауза</button><br />
    <button id="timer_reset">обновить</button>
    <div id="timer_bar"></div>
    <div id="timer_display">0</div>

Код Mootools в студию!

var timerFunction = function(){
	//каждый раз, по вызову этой функции
    //переменная currentTime будет увеличиваться на 1
    //дальше остановимся более подробно на этом
    //также, обратите внимание на использование конструкции "this.counter"
    //"this" - это хеш-массив
    //и "counter" это ключ
    //и снова, более подробно остановимся на этом позже
	var currentTime = this.counter++;
    /*я изменил первоначальный счетчик:
    дело в том, что если оставить счетчик на долго включенным
    строка может вытянуться довольно далеко, потому, пришлось
    доавить проверку ширины родительского элемента, что делается
    с помощью функции .getParent(), параметром которой можно указать не только
    название родительского тега, но даже и класс этого самого родительского элемента,
    а в моем случае, родительский класс называется post.
    Также обратите внимание на использование функции toInt(). Я думаю вы читали
    пост про фильтрацию и обработку чисел?
    */
	if(currentTime == $('timer_bar').getParent('.post').getStyle('width').toInt()+1) $('timer_stop').fireEvent('click');
    //тут изменяем содержимое блока div, с данными о текущем времени таймера
	else $('timer_display').set('text', currentTime);
    //тут изменяем ширину блока с графическим отображением длительности выполнения функции
	$('timer_bar').setStyle('width', currentTime);
	//устанавливаем атрибут disabled на true, чтобы выключить кнопку Пуска после самого пуска
    //ниже я более подробно остановился на этом моменте
	$('timer_start').set('disabled', true);
}
var timerFunction = function(){
    var currentTime = this.counter++;
 
    $('timer_display').set('text', currentTime);
 
    $('timer_bar').setStyle('width', currentTime);
}
	window.addEvent('domready', function() {
    //заодно познакомьтесь: простой хеш-массив, состоящий из одной пары ключ/значение
    var currentCounter = new Hash({counter: 0});
    //запускаем периодическое выполнение
    //и вторым параметром привязываем this к необходимой переменной
    var simpleTimer = timerFunction.periodical(100, currentCounter);
    //так как нам не нужно, чтобы таймер запускался при загрузке страницы, мы его и не запускаем
    $clear(simpleTimer);
    //добавим событие к кнопке старта
    //это позаботится о том, что таймер снова затикает
    $('timer_start').addEvent("click", function(){
    	simpleTimer = timerFunction.periodical(100, currentCounter);
	});
    //следующая функция очищает периодичную функцию и подсвечивает строку таймера
    $('timer_stop').addEvent("click", function(){
    	$clear(simpleTimer);
        $('timer_bar').highlight('#EFE02F');
	});
    $('timer_reset').addEvent("click", function(){
    	//сброс вначале очищает периодичную функцию $clear(simpleTimer);
        //устанавливая счетчик на 0
        //немного далее немного более :)
        currentCounter.set('counter', 0);
        //изменяем содержимое соответствующих элементов таймера
        $('timer_display').set('text', currentCounter.counter);
        $('timer_bar').setStyle('width', 0);
    });
});

Опробуем таймер в действии?

Небольшое объяснения того, почему я выключаю кнопку Пуска при ее нажатии (она включается обратно при Паузе и Сбросе). Дело в том, что если повторно нажать Пуск, предварительно не остановив, счетчик “забежит” в два раза быстрее и его уже не остановить. А если потом ещё и ещё нажимать, скорость будет увеличиваться. Как бороться с этим явлением, я без понятия… Почему так происходит? Это, видимо, нужно разбираться в недрах и логике программирования, а мне сейчас не до этого.

И еще один момент: почему я установил

$('timer_start').set('disabled', true);

в саму функцию, а не в

    $('timer_start').addEvent("click", function(){
    	simpleTimer = timerFunction.periodical(100, currentCounter);
	});

Тут получается довольно интересно и закручено, как в английском детективе. И тоже нужно разбираться в недрах, но в недрах функции .periodical(). Насколько я понимаю, все происходит примерно так: при клике на кнопку Пуск, мы повторно вызываем переменную simpleTimer, которая является хранителем периодичного запуска функции timerFunction. Итак, вызвав переменную simpleTimer, поделать уже ничего нельзя: определенная функция будет запускаться, пока ее не остановить. И вот, при каждом запуске функции она выполняет $('timer_start').setStyle('disabled', 'true').

Кстати, просто использовать

$('timer_start').removeEvent('click')

вместо

$('timer_start').set('disabled', true);

не получилось. Кнопка Пуск все равно работает, а почему, не могу себе даже представить .

Введение в хеш-массивы

Создание нового хеш-массива

В примере, приведенном выше, возможно есть некоторые вещи, с которыми Вы еще не сталкивались (точнее я Вас с ними еще не сталкивал, а где-то еще вы с ними уже сталкивались). В некоторых местах мы используем хеш-массива. Хешы – это наборы, состоящие из пары ключ/значение, которые очень схожи с массивами, так как они содержать несколько объектов, однако к каждому содержащемуся в хеше объекту привязывается ключ. Итак, посмотрим под лупой на хеши:

	var hashVar = new Hash({ 'первыйКлюч': 0, 'второйКлюч': 0 });

Итак, слева у нас получается ключ, которому присваивается значение справа (те из Вас, о читатели, которые все-таки знают что такое хеш-массива и уже задумываются о том, чтобы просмотреть другие посты моего блога, хочу лишь сообщить, что я рассматриваю сейчас только основы основ хеш-массивов. Написание функций для хранения данных с помощью хешей я оставлю на тот момент, когда можно будет поговорить о классах). Итак, существует много плюсов в том, чтобы использовать именно хеш-массивы. Во-первых, в одном объекте можно хранить многочисленные наборы данных, процесс обратного получения которых довольно прост, также как и хранение комплексных структур данных.

.set() и .get()

При работе с хеш-массивами можно использовать знакомые функции .set() и .get(). Если нужно задать ключу какое-либо значение, вначале нужно определить ключ, потом задать ему значение через .set(). Если нужно получить значение, просто нужно определить ключ и применить к нему .get(). В принципе, это всё!

	//взяв за основу хеш-массив, определенный выше
	//первому ключу можно дать значение 200 вот так
    hashVar.set('первыйКлюч', 200);
    //с помощью .get() можно получить значение первого ключа
    //после того, как мы дли ему значение 200, это значение мы и получим
    var hashValue = hashVar.get('первыйКлюч');

Если использовать латинские буквы для назначение ключа, то значение этого ключа можно получить в формате имя_хеш_массива.имя_ключа. Вот так:

var hashValue = hashVar.pervyi;
//что означает тоже самое, что и
var hashValue = hashVar.get('pervyi');

Добавляем новые данные в массив

.extend();

Любой уже определенный хеш-массив можно дополнить новыми парами данных с помощью .extend(). Пример:

	//вначале создадим новый массив. Обычный массив.
    //такой массив также состоит из пар ключ/значение
    //но он не имеет возможностей хеша
    var simpleObject = { 'третий': 450, 'четвертый': 89 };

Если есть необходимость добавить эти данные к уже существующему хеш-массиву, мы просто используем .extend(); для того, чтобы создать свободное место для этих данных.

	//так хеш-массив hashVar пополняется всеми данными массива simpleObject
    hashVar.extend(simpleObject);

Очень важно помнить, что все дубликаты ключей будут переписаны вторым вариантом, т.е. тем, которым пополняем первый массив. Так, если у нас в первом массив была пара “первыйКлюч” : “буква А”, а в массиве, которым мы расширяем первый массив есть пара “первыйКлюч” : “буква Б”, то в окончательном массиве именно второй вариант выживет.

Если не хотите, чтобы второй вариант выжил, и вам нужно, что бы выжил именно первый вариант, нужно вместо .extend() использовать .combine(). В остальном функция .combine() работает также, как и .extend().

Удаляем пару данных из хеш-массива

.erase()

Слово “erase” с английского переводится как “удалить”. Функция полностью оправдывает свое название: называете массив, добавляете .erase() и в скобках указываете ключ.

hashVar.erase('первыйПлюч');

Хеш-массивы и функция .each()

С функцией .each() многие, скорее всего, уже знакомы из урока про массивы. Как и в случае с массивами, .each() перебирает каждую единицу данных хеш-массива, применяя к ней пользовательскую функцию.

hashVar.each(function(value, key) {
	//простая функция по выводу сообщения со значением ключа и его значения
    //обратите внимание, что при передаче данных функции
    //вначале нужно передать значение, а потом уже и его ключ
    //как и в случае с массивами: вначале item (значение), потом и index (его порядковый номер в массиве)
    alert(key + ":" + value);
});

На этом, пожалуй, всё! Надеюсь, урок пригодится вам также, как и мне.

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

Основы

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

<!--Вертикальный слайдер-->
<div id="slider">
<div id="knob"></div>
</div>

//полоса прокрутка или слайдер
#slider {
	background-color: #00C;
	border: 1px dashed black;
	height:25px;
	width:250px;
}
//"захват" или ручка
#knob {
	background-color:#FF0;
	height:25px;
	width:25px;
}

//создаем переменные для наших блоков
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();

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>

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

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

Очень и очень трудно мне далось написание этого урока. Регулярные выражения вообще не самое простое, что есть в программировании, а уж для меня, так тем более. Например, пока я писал его, познакомился с функцией escapeRegExp(), которую хотел применить при доработке под свои нужды класса Mootools для поиска и подсветки текста на странице (аналог обычного поиска в Firefox и некоторых других браузерах, но не все ж умеют пользоваться встроенным поиском браузера…). Так вот там у меня ничего не получилось. Дебаггер ФФ всё твердил, что «escapeRegExp() is not a function» (не является функцией). Я так и не понял, что я делал не правильно. А здесь все получилось (в самом конце урока).

Основы

test()

В своем самом простом выражении, регулярное выражение – это простой текст, который нужно найти в документе. Несмотря на то, что JavaScript уже имеет встроенный объект RegExp, который отвечает за формирование регулярных выражений, со своей собственной функцией test(), но функция test() в Mootools является более дружелюбной её версией, чем яваскриптовская.

Для начала, посмотрим на самый простой пример использования функции test(), в котором будем искать определенный текст, в более объемном тексте.

//Текст или строка, в которой будем искать
var string_to_test = "Найти что-нибудь здесь";
 
//Регулярное выражение, которое будем использовать для поиска

var regular_expression = "здесь";
 
//применяем функцию test(), которая возвращает true или false
var result = string_to_test.test(regular_expression);

 
//переменная result имеет значение true

По сути, это такой же результат, если бы использовалась функция contains(). Однако, в то время, как contains() ищет целые слова, test() находит вхождения сочетания символов:

var string_to_match = "слово";

 
//вернёт false
string_to_match.contains('лов')
 
//вернёт true
string_to_match.test('лов');

И ещё обращу внимание на то, что регулярное выражение не будет чувствительным к регистру, если этого явно не указать с помощью специального ключа. Потому, поиск по регулярному выражению «слово», в слове «Слово» вернёт false. Пример:

var regex_demo = function(){
	//определяем функцию обработки

	var regex_demo_1 = function(){
	//определяем исходный текст
	var test_string = $('regex_1_value').get('value');

	//определяем регулярное выражение
	var regex_value = $('regex_1_match').get('value');

	//производим поиск в исходном тексте
	var test_result = test_string.test(regex_value);
 

	//сообщаем пользователю о текущем положении дел
	if (test_result){$('regex_1_result').set('html', "Есть совпадение!");}

	else {$('regex_1_result').set('html', "Нет совпадения");}

}
}

Обращаю внимание на то, что есть некоторые символы, использовать которые нужно очень осторожно. Если использовать один из нижеуказанных символов в примере ниже, это может привести к непредвиденной ошибке и потому, нужно будет перезагрузить страницу, чтобы все примеры страницы работали.

- . * + ? ^ $ { } ( ) | [ ] / \

Игнорируем регистр

Существует масса ситуаций, когда нет необходимости, чтобы регулярное выражение было чувствительным к регистру текста. Для того, чтобы это уточнить для функций, работающих с регулярными выражениями, нужно использовать параметр «i», как это указано в следующем примере.

//Строка, в которой будем производить поиск
var string_to_test = "ИгнОр РЕгИстрУ";
 
//вернёт false
string_to_test.test("игнор");

 
//вернёт true
string_to_test.test("игнор", "i");

Функции test() можно передать несколько параметров, но, так как JavaScript поддерживает только 3 параметра регулярного выражения (2 из которых включены по умолчанию в функции test()), параметр «i», вероятно, единственный, который нужно будет передавать. Ниже, в форме, можете протестировать функцию test() с параметром игнорирования регистра.

var regex_demo = function(){
	//Получить строку для тестирования из поля input
	var test_string = $('regex_value').get('value');

 
	//Получить регулярное выражение из поля input
	var regex_value = $('regex_match').get('value');

 
	//Проверить, требуется ли игнорирование регистра
	var regex_param = "";
	if ($('regex_param').checked){

		regex_param = "i";
	}
 
	//Произвести поиск и получить результат
	var test_result = test_string.test(regex_value, regex_param);

 
	//Обновить приготовленный контейнер для сообщения результатов поиска
	if (test_result){
       	$('regex_result').set('html', "Есть находка!  ");

	}
	else {
       	$('regex_result').set('html', "Ничего нет!  ");

	}
}

Интересная часть

Итак, мы уже просмотрели примеры простого поиска по регулярным выражениям, можно начать смотреть в сторону более сложных выражений. Охватить всю функциональность и возможности регулярных выражений сейчас не получится (да я и не претендую на это), но ознакомиться то «самое, самое», что можно будет использовать в своих простых приложениях, у нас получится. Даже этого должно будет хватить для решения простых задач (меня регуляри не раз спасали – некоторые до сих пор использую в DreamWeaver-е).

Находим начало строки с помощью оператора «^»

Оператор «^» при использовании в регулярных выражениях, помогает найти текст в начале строки, вне зависимости от того, существует ли этот текст далее в строке поиска. Установите оператор в начале строки для поиска, вот так:

//Строка, в которой будем производить поиск
var string_to_test = "поищем в начале текста"

 
//тестирует верхний текст на предмет того, начинается ли он с данной строки
//возвращает true
var is_true = string_to_test.match("^поищем");

Далее, если выражение не находится в начале текста, этот поиск
вернет, соотвественно, false:

//Строка, в которой будем производить поиск
var string_to_test = "поищем в начале текста"
 
//тестирует верхний текст на предмет того, начинается ли он с данной строки
//возвращает (удивление) false

var is_true = string_to_test.match("^начал");

Эти два примера можно и протестировать здесь:

Поиск по концам с помощью оператора «$»

Этот оператор работает также, как и предыдущий («^»), только с двумя исключениями:

1. Поиск только по концу строк
2. Устанавливается в конце регулярного выражения

В остальном, регЭкспы с этим оператором работают как и ожидается :

//Строка, в которой будем искать
var string_to_test = "поиск по концам строк";

 
//проверяет, заканчивается ли строка на слово "строк"
//и возвращает "true"
var is_true = string_to_test.match("строка$");

 
//проверяет, заканчивается ли строка на слово "металлика"
//и вовращает "false"
var is_false = string_to_test.match("металлика$");

Используя оба этих оператора, можно протестировать исходный текст на полное совпадение с регулярным выражением:

//Исходная строка
var string_to_test = "проверим на полное совпадение";
 
//Проверяет на полное совпадение со строкой "проверим на полное совпадение"

//возвращает true
var is_true = string_to_test.match("^проверим на полное совпадение$");
 
//Проверяет на полное совпадение со строкой "проверим на полное совпадение"

//возвращает false
var is_false = string_to_test.match("^проверим на совпадение$");

Классы символов

Классы символов – это ещё один инструмент регулярных выражений (жутко полезный, нужно заметить), позволяющий производить поиск нескольких определенных символов («А» или «Я», «f» или «r») или символов из определенного диапазона (от «A» до «Z» или от «r» до «z»). Если, например, есть необходимость проверить строку на наличие слов «бее» или «мее», мы заключаем две первые буквы этих слов в [квадратные] скобки, таким образом формируя класс символов и использовать следующее регулярное выражение:

//строка, в которой будем искать слово "мее"

var first_string_to_test = "овцы разговаривают словом мее";
 
//строка, в которой будем искать слово "бее"
var second_string_to_test = "козы разговаривают словом бее";

 
//это выражение найдет совпадение в первой строке, но не во второй
var returns_true = first_string_to_test.test("мее");
var returns_false = second_string_to_test.test("мее");

 
//следующее найдет совпадение во второй строке, но не в первой
returns_false = first_string_to_test.test("бее");
returns_true = second_string_to_test.test("бее")

 
//следующее найдет совпадение в обеих строках
returns_true = first_string_to_test.test("[мб]ее");
returns_true = second_string_to_test.test("[мб]ее");

Для того, чтобы использовать диапазон символов для поиска, нужно лишь указать начальную и окончательную точку диапазона, разделив их дефисом («-»). Так можно определять диапазоны как цифр, так и букв, причем необязательно ограничиваться латинскими: кириллические символы также хорошо понимаются движком регулярных выражений, как и латинские. Хотя, стоит оговориться, что букву «ё» движок регулярных выражений не понимает, хотя, возможно я чего-то не знаю (буду благодарен, если кто-нибудь ткнет меня носом в проблему ) .

//строка, в которой будем искать
var string_to_test  = " b, д или 3";

 
//поиск символов a, b, c, или d. Вернёт true.
string_to_test.test("[a-d]");
 
//поиск по символам г, д, е, ж или з. Вернёт true.
//Обратите внимание, "ё" в списке нет. "ё" не находится. Почему, пока не знаю...
string_to_test.test("[г-з]");

 
//поиск 1, 2, 3, 4 или 5. Вернёт true.
string_to_test.test("[1-5]");

Если необходимо искать несколько классов символов, нужно будет заключить такие классы в свои собственные [квадратные] скобки и разделить их логическим оператором «|» (OR – или). Таким образом, у нас появляется регулярное выражение с использованием вложенных квадратных скобок.

//строка, в которой будем искать
var string_to_test  = "b, д или 3";

//Вернёт true, так как все три выражения верны.
string_to_test.test("[a-d] | [г-з] | [1-5]");

Вот пример, в котором можно немного поиграться с полями: воодите туда любой текст, кликайте по соответствующим кнопка регЭкспа и следите за тем, что возвращает true, а что false. «Да прибудет с тобой сила!»

escapeRegExp()

Если ты, о читатель моего поста про регулярные выражения, дочитал до сего момента, и о тебе можно сказать, что ты человек с логическим типом мышления, то ты наверняка заметил, использование многочиленных специальных символов в определении регулярного выражения, например классов символов или его логики (ИЛИ – «|«, в начале строки – «^«, в конце строки – «$» и т.д.). Ты ведь наверняка уже понял, что все эти символы сильно затрудняют поиск самих специальных символов в определенной строке… На первый взгляд. А на второй взгляд, все что нужно сделать, это экранировать специальные символы другим специальным символом – обратный слэш «\«, а если нужно искать сам обратный слэш, то используются два обратных слэша «\\«. Логика проста, если не думатьо ней !

//Строка для поиска. Обратите внимание на специальные символы [ ] - и $
var string_to_match = "[всякий-разный-текст] или $300";
 
//Было бы неправильно составить такое регулярное выражение
//потому что движок будет их воспринимать, как специальные символы
//а нам этого не нужно

string_to_match.test("[всякий-разный-текст]");
string_to_match.test("$300");
 
//Правильно было бы так:

//обратите внимание на обратный слэш \ перед символами [ ] - и $
string_to_match.test("\[stuff\-in\-here\]");

string_to_match.test("\$300");

Когда регулярное выражение не большое, не составит особого труда экранировать каждый спец. символ. Но с другой стороны никто не отменял банальной человеческой невнимательности (которая у меня, например, хроническая), и такой специальный символ можно просто упустить из виду, или же, на стадиях своего обучения, можно и не подозревать, что ты пропустил специальный символ, не экранировал его и регЭксп не дает нужного результата. На всякий случай, если запомните сразу, вот специальные, рабочие символы регулярных выражений, которые НУЖНО экранировать:

- . * + ? ^ $ { } ( ) | [ ] / \

К счастью, Mootools – это не та библиотека, которая позволит своему пользователю бездарно убивать время на экранирование каждого рабочего символа, когда есть такая функция, как escapeRegExp(), чья работа – это избавить тебя, о начинающий программист, от экранирования специальных символов в регулярном выражении. Эта функция работает с любой строкой, потому ее можно использовать всегда, когда нужно произвести поиск какого-либо текста.

//Нужно экранировать
var unescaped_regex_string = "[текст-регулярного-выражения]";
 
//Экранируем строку

var escaped_regex_string = unescaped_regex_string.escapeRegExp();
 
//escaped_regex_string стала такой: "\[текст\-регулярного\-выражения\]"

Обратите внимание, что это значит, что любой специальный символ, который нужно использовать в регулярном выражении, нужно добавить к регулярному выражению после использования функции escapeRegExp():

//Строка, которую нужно экранировать
var unescaped_regex_string = "[текст-регулярного-выражения]";
 
//Экранировать строку, для поиска по началу строки
var escaped_regex_string = "^" + unescaped_regex_string.escapeRegExp();

 
 
//переменная escaped_regex_string стала такой:  "^\[текст\-регулярного\-выражения\]"

Ниже представлен пример, в котором видна разница между использованием и неиспользованием функции escapeRegExp():

var regex_demo = function(){

	//Получаем строку для проверки
	var test_string = $('regex_7_value').get('value');

 
	//Получаем регулярное выражение
	var regex_value = $('regex_7_match').get('value');

 
	//Проверяем, нужно ли экранировать текст
	if ($('regex_7_escape').checked){

		//Если да, применяем соотв. функцию
		regex_value = regex_value.escapeRegExp();
	}
 

	//Определяем параметры регулярного выражения
	var regex_param = "";
	//Проверяет, нужно ли игнорировать регистр
	if ($('regex_7_param').checked){

		regex_param = "i";
	}
 
	//Запуск теста
	var test_result = test_string_1.test(regex_value, regex_param);

	if      (test_result){$('regex_7_result').set('html', "Есть совпадения");}

	else {$('regex_7_result').set('html', "Нет совпадений!");}

}

Помните, что все примеры можно «сломать», если использовать неэкранированные специальные символы. Потому, если вдруг случается, что что-то перестало работать, после того, как только что это работало – не удивляйтесь, а просто перезагрузите страницу .

Если все пойдет по плану, то у меня на готовке еще несколь интересных материалов и уроков, потому не забудьте подписаться на мою RSS ленту.

Drag.Move – Перемещение с помощью Mootools 1.2

С 10-го урока я начал публиковать уроки, посвященные спец. эффектам, которые можно создавать с помощью библиотеки Mootools. Если Вы еще не взглянули в эти уроки, очень рекомендую посмотреть.

В сегодняшнем уроке мы поставим под прицел класс Drag.Move – очень сильный инструмент, который позволяет добавить возможность перемещения/перетаскивания элементов на странице. Вообще, эта возможность – это одна из моих самых любимых функций JavaScript и всех библиотек на его основе.

Используется этот класс также, как и все остальные плагины библиотеки: создается новый («new») объект Drag.Move и назначается переменной. Далее назначаются параметры и события объекта. В принципе, это и есть вся основа. Кстати, объекты Drag и Drag.Move не определены в основной библиотеке, потом нужно будет создавать свою собственную сборку Mootools с помощью онлайн инструмента на сайте разработчиков.

Основы

Drag.Move

Установка перетаскиваемого элемента довольно проста. Давайте рассмотрим пример ниже. Обратите внимание, как отделяются параметры и события класса Drag.Move от событий и параметров класса Drag. Drag.Move расширяет и дополняет класс Drag, потому он будет принимать не только свои параметры и события, но и те, что относятся к классу Drag. Сегодня мы не будем углубляться в работу Drag, но мы взглянем на несколько его интересных параметров и событий.

var myDrag = new Drag.Move(dragElement, {

	        // параметры класса Drag.Move
		droppables: dropElement,
		container: dragContainer,

		// параметры класса Drag
		handle: dragHandle,
		// событие класса Drag.Move
		onDrop: function(el, dr) {

                        // вызовет предупреждение с атрибутом id сброшенного элемента
                        // в элемент, принимающий сброшенные элементы
                        // (это может показаться запутанным, на первый взглад, но, надеюсь,
                        // далее все проясниться
                        alert(dr.get('id'));

		},
                // События Drag
                // передаются перетаскиваемому элементу
                onComplete: function(el) {

			alert(el.get('id'));
		}
	});

Разберем всё это по полочкам…

Параметры Drag.Move

Параметры Drag.Move позволяют назначить два основных типа элементов:

• droppables – опеределяет элементы, которые будут способны «принять» сброшенный элемент
• container – установить контейнер перетаскиваемого элемента (будет удерживать элемент внутри этого элемента-контейнера)

Установка параметров доволно проста:

//определяем один элемент по id, который можно будет перетаскивать
var dragElement = $('drag_element');
//определяем массив элементов по их классу, которые смогут принят сброшенный элемент

var dropElements = $$('.drag_element');
//определяем контейнер
var dragContainer = $('drag_container');

//определяем объект Drag.Move
var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag.Move
                // назначаем элементу droppables массив элементов, определённых немного выше
		droppables: dropElements ,
               // назначаем элементу container элемент, определенный немного выше
		container: dragContainer
	});

Теперь наш перетаскиваемый элемент имеет свой контейнер, а также у нас имеется класс элементов, который будет принимать сбросы других элементов. Тут можно провести аналогию с современными аэропортами: не все аэропорты предназначены для принятия и обслуживания определенных типов самолётов. Так и в нашем случае: необходимо определить, какой класс сможет принимать «на посадку» перетаскиваемые элементы.

События объекта Drag.Move

События этого объекта дают возможность запускать определенные заранее функции в определенные этапы существования объекта, как например в тот момент, когда пользователь «совершил захват» передвигаемого элемента, когда он начинает его передвигать или когда он его сбрасывает. События объекта Drag.Move передаются каждому перетаскиваемому и сбрасывамому элементу в качестве параметров.

• onDrop – запускается при сбросе элемента в соответствующий принимающий элемент;
• onLeave – запускается когда перетаскиваемый элемент покидает границы элемента, способного принимать перетаскиваемые элементы;
• onEnter – запускается при входе перетаскиваемого элемента в зону принимающего элемента.

Как и любые другие события, которые мы до этого обсуждали, события объекта Drag.Move вызывают функцию, которая выполняется когда событие исполняется.

var dragContainer = $('drag_container');

 
var myDrag = new Drag.Move(dragElement , {
	// Параметры Drag.Move

	droppables: dropElements ,
	container: dragContainer ,
	// События Drag.Move

	// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')
	// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')
	onDrop: function(el, dr) {

		// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"
		if (!dr) {
			//ничего не делать
		}

		// в противном случае, т.е. элемент принимающий
		// делать то-то, то-то
		else {
			// действия, который произойдут,
			// когда элемента будет сброшен на принимающий элемент

		};
	},
	onLeave: function(el, dr) {

		// эта функция будет запущена, когда перетаскиваемый элемент
		// покинет границы принимающего элемента
	},
	onEnter: function(el, dr) {

		// эта функция будет запущена, когда перетаскиваемый элемент
		// входит в границы принимающего элемента
	}
});

Несколько событий объекта Drag

У объекта Drag есть совсем немного событий и параметров, но и я не все буду рассматривать:

Параметр – snap

Параметр snap позволяет определить, на сколько пикселей пользователь должен передвинуть курсор прежде чем начнется сам процесс перемещения элемента. Значение по умолчанию – 6, но можно указать любое число или переменную, содержащую число. Конечно же, существуют некие логические рамки (установив это значение на 1000, никакой пользы не принесешь своему приложению), но все-таки этот параметр может сослужить хорошую службу разработчику при улучшении своего приложения.

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		snap: 10
	});

Параметр – handle

Данный параметр добавляет “ручку” к вашему перетаскиваемому элементу. Эта «ручка» определяет единственную область элемента, которой можно воспользоваться для “захвата” перетаскиваемого элемента, что позволяет использовать оставшуюся часть элемента для других целей. Для определения “ручки”, просто вызовите элемент.

// определяет массив элементов по классу
// это позволит нам добавить несколько "ручек",
// если нам нужно будет определять несколько передвигаемых элементов
var dragHandle = $('drag_handle');

var myDrag = new Drag.Move(dragElement , {
	        // параметры Drag

		handle: dragHandle
	});

Событие onStart

Событие onStart определяет функцию, которая будет запускаться при начале перетаскивания. Если значение параметра snap установлено большое, то событие не начнется до тех пор, пока заданное количество пикселей не будет пройдено.

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		onStart: function(el) {
                    // сюда вставляем всё, что должно произойти вначале перетаскивания

               }
	});

Событие – onDrag

Событие onDrag будет работать постоянно во время перетаскивания элемента.

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag

		onDrag: function(el) {
                    // сюда вставляем всё, что должно происходить во время перетаскивания
               }

	});

Событие onComplete

Событие onComplete запускается когда происходит сброс перетаскиваемого элемента и оно будет запущено вне зависимости от того, будет этот элемент приземлен в элементе droppable или нет.

var myDrag = new Drag.Move(dragElement , {

	        // Параметры Drag
		onComplete: function(el) {
                    // сюда вставляем всё, что должно произойти при сбросе элемента

               }
	});

Примеры

Снова подошло время моей любимой части любого урока: Пример!

Давайте, для упрощения процесса переваривания всей информации этого урока, соорудим пример, который бы содержал максимум из представленных параметров, событий и т.д. Поехали!

window.addEvent('domready', function() {

	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');

	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');

	var startEl = $('start');
	var completeEl = $('complete');

	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');

	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable'); 

 
	var myDrag = new Drag.Move(dragElement, {

	    // Параметры Drag.Move
		droppables: dropElement,
		container: dragContainer,

		// Параметры Drag
		handle: dragHandle,
		// События Drag.Move
		onDrop: function(el, dr) {

			if (!dr) { }
 
        	        else {

				dropDrop.highlight('#FB911C'); //мигает оранжевым
				el.highlight('#fff'); //мигает белым

				dr.highlight('#667C4A'); //мигает зеленым
			};
		},

		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //мигает оранжевым

		},
		onEnter: function(el, dr) {

			enterDrop.highlight('#FB911C'); //мигает оранжевым
		},
		// Drag Events

		onStart: function(el) {
			startEl.highlight('#FB911C'); //мигает оранжевым

		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //мигает оранжевым

		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //мигает оранжевым

		}
	});
});

В этом примере, в отличие от большинства ранее представленных, мы будем серьезно использовать CSS, потому нужно добавить некоторые пояснения к таблице CSS. Для того, чтобы контейнер Drag.Move нормально определялся в IE, нужно будет подробно объяснить позиционирование элементов этому популярному браузеру. Очень важно определить элементу-контейнеру «position:relative», а перетаскиваемому элементу «position:absolute». Далее нужно удостовериться в том, что знаяения «left» и «top» для этого элемента тажке установлены. Ну, а если вы создаете приложение с перетаскиваемыми элементами, которое никоим образом не предназначается для IE, можете вообще не обращать внимание на эту часть.

body {

	margin: 0;
	padding: 0;
}
 

/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/
#drag_me {
	width: 100px;
	height: 100px;

	background-color: #333;
	position: absolute;
	top: 0;

	left: 0;
}
 
#drop_here {
	width: 200px;

	height: 200px;
	background-color: #eee;
}
 

/* убедитесь в том, что элемент-контейнер имеет "position:relative" */
#drag_cont {
	background-color: #ccc;
	height: 600px;

	width: 500px;
	position: relative;
	margin-top: 100px;

	margin-left: 100px;
}
 
#drag_me_handle {
	width: 100%;

	height: auto;
	background-color: #666;
	cursor:move;

}
 
#drag_me_handle span {
	display: block;
	padding: 5px;

}
 
.indicator {
	width: 100%;
	height: auto;

	background-color: #0066FF;
	border-bottom: 1px solid #eee;

}
 
.indicator span {
	padding: 10px;
	font-size:14px;

	display: block;
}
 
.draggable {
	width: 200px;

	height: 200px;
	background-color: blue;
}

Далее следует HTML код, который создаст нам плацдарм для восхощения возможностями Mootools.

<div id="drag_cont">
<div id="start" class="indicator"><span>Начало</span></div>

<div id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div id="complete" class="indicator"><span>Завершен</span></div>

<div id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>

<div id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div id="drag_me">

<div id="drag_me_handle"><span>ручка</span></div>
</div>
<div id="drop_here" class="draggable"></div>

</div>

Mootools 1.2 Fx.Morph, Fx.Options, и Fx.Events

Сегодня продолжим исследовать раздел спец. эффектов нашей любимой библиотеки. Вначале, мы научимся тому, как использовать библиотеку Fx.Morph (которая, по сути, позволяет изменять несколько свойств объектов), после чего посмотрим на несколько примеров использования общих параметров спец. эффектов, применимых как к Fx.Tween и Fx.Morph. Ну а в конце, рассмотрим такие события раздела Fx как “onComplete” и “onStart“. Все эти параметры и события позволят нам получить больше контроля над анимированными переходами.

Fx.Morph

Создание нового эффекта Fx.Morph

Запуск нового превращения (morph с англ. – превращение) происходит примерно также, как и запуск нового эффекта tween, с той разницей, что указывать изменения нужно в нескольких свойствах.

//вначале, назначим нашему элементу переменную
var morphElement = $('morph_element');

 
//теперь создаем объект превращения
var morphObject = new Fx.Morph(morphElement);

 
//далее задаем параметры свойств, также как в случае с Fx.Tween
//только сейчас можно будет устанавливать несколько свойств
morphObject.set({
    'width': 100,

    'height': 100,
    'background-color': '#eeeeee'
});

 
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах
morphObject.start({
    'width': 300,

    'height': 300,
    'background-color': '#d3715c'
});

Вот это и есть тот минимум, который необходим для создания, настройки и запуска эффекта morph – превращения.

Ну, а для того, что бы сделать всё по-хорошему, нужно создать еще несколько переменных, отделить функции друг от друга, создать несколько событий и прослушек для хорошего контроля всего процесса:

var morphSet = function(){
	//далее задаем параметры свойств стилей, также как в случае с Fx.Tween

	//только сейчас можно будет устанавливать несколько свойств стилей
	this.set({
		'width': 100,

		'height': 100,
		'background-color': '#eeeeee'
	});

}
 
var morphStart = function(){
//еще можно начать превращение также, как и в случае с tween
//с помощью функции start, но назначить изменения в нескольких свойствах

	this.start({
		'width': 300,
		'height': 300,

		'background-color': '#d3715c'
	});
}
 
 
var morphReset = function(){

	//устанавливаем первоначальные значения
	this.set({
		'width': 0,

		'height': 0,
		'background-color': '#ffffff'
	});

}
 
window.addEvent('domready', function() {
	var morphElement = $('morph_element');

	var morphObject = new Fx.Morph(morphElement);
 
	//тут добавляем прослушку соответствующим кнопкам

	//и соединяем переменную morphObject с функцией
	//что позволяет нам использовать "this"
	$('morph_set').addEvent('click', morphSet.bind(morphObject));
	$('morph_start').addEvent('click', morphStart.bind(morphObject));

	$('morph_reset').addEvent('click', morphReset.bind(morphObject));

});

<div id="morph_element"></div>
<button id="morph_set">Установить</button>

<button id="morph_start">Запустить</button>
<button id="morph_reset">Сбросить</button>

Установить

Запустить

Сбросить

Fx Options

Вот несколько параметров, которые принимаются как Fx.Tween, так и Fx.Morph. Их просто использовать и они дают массу возможностей по управлению над вашими эффектами. Для использования этих настроек, нужно использовать конструкции такой формы:

//объявляем объекты morph и tween
//а все параметры вставляем в фигурные скобки

var morphObject = new Fx.Morph(morphElement, {
    //вначале объявляем название параметра

    //потом двоеточие - :
    //и значение параметра
    duration: 'long',
    transition: 'sine:in'

});

fps (frames per second) – кадры в секунду

Данный параметр определяет скорость анимации. По умолчанию скорость анимации установлена на 50 кадров в секунду и этот параметр может принимать данные в виде чисел и переменные, содержащие числа.

//определяем объект, а параметры в фигурные скобки { }
var morphObject = new Fx.Morph(morphElement, {

    fps: 60
});
 
//или
var framesPerSecond = 60;

 
var tweenObject = new Fx.Tween(tweenElement, {
    fps: framesPerSecond

});

unit

Параметр unit определяет единицу измерения. Например, нужно, чтобы число 100 означало px – пиксели, % – проценты или что-лобо еще.

//все как и выше
var morphObject = new Fx.Morph(morphElement, {

    unit: '%'
});

link

Параметр link позволяет управлять несколькими вызовами эффекта. Например, если имеется объект с эффектом mouseover, вы же не хотите начинать его каждый раз, как пользователь наводит на него указатель? Или, если пользователь наводит мышь на объект дважды, нужно ли игнорировать следующий вызов эффекта или его нужно поставить в очередь и запустить сразу по окончании первого вызова? У параметра link есть 3 возможных значения:

• ‘ignore’ (по умолчанию) – это значение игнорирует все вызовы пока предыдущее выполнение эффекта не выполнено.
• ‘calcel’ – отменяет текущее выполнение эффекта и запускает его с начала.
• ‘chain’ – позволяет чередовать вызовы эффектов и выполнять каждый из них по очереди.

//и снова назначаем объект в переменную
var morphObject = new Fx.Morph(morphElement, {

    link: 'chain'
});

duration – длительность

Параметр duration определяет длительности анимации. Этот параметр не является идентичным параметру speed (скорость), но пока всей разницы лично я пока не понял. Может кто объяснит? Этот параметр принимает числа (милисекунды), переменную, содержащую числа, или же одно из ключевых слов, обозначающих длительность в милисекундах:

• ‘short’ = 250
• ‘normal’ = 500 (по умолчанию)
• ‘long’ = 1000

//определяем объект и вставляем его параметры в фигурные скобки
var morphObject = new Fx.Morph(morphElement, {

    duration: 'long'
});
 
//или
var morphObject = new Fx.Morph(morphElement, {

    duration: 1000
});

transition – переход

И последний параметр, который мы рассмотрим, это параметр transition, который определяет тип перехода. Например, это должен быть плавный переход или он должен начинаться плавно, а потом ускориться под конец. В полиграфии есть штука под названием «пантонница». Предлагаю вашему вниманию «транзитницу» библиотеки Mootools :

var tweenObject = new Fx.Tween(tweenElement, {
    transition: 'quad:in'

});

Примечание: Первая полоса перехода оснащена зарядом красного highlight, переходящий в оранжевый highlight (мы о нем говорили в прошлом уроке). А вот и она, «транзитница», собственно:

Всего существует 30 видов переходов, которые состоят из 10 основных типов, имеющих каждый по 3 параметра.

Основные типы:

• Quad
• Cubic
• Quart
• Quint
• Expo
• Circ
• Shine
• Back
• Bounce
• Elastic

Параметры:

• Ease In
• Ease Out
• Ease In Out

Эти три параметра отвечают за следующее: при использовании параметра In спец.эффект перехода будет использоваться только при увеличении некоторых свойств объекта, тогда как параметр Out отвечает за спец.эффект перехода при уменьшении свойствf (знаю, что звучит немного непонятно, но обратите внимание на то, как себя ведут объекты с переходом одного типа с параметрами in и out нашей «транзитницы» при наведении курсора и при его заборе с объекта). InOut, соответственно, определяет использование спец. эффекта перехода, в обоих случаях, т.е. как при увеличении определенных свойств, так и при их уменьшении.

Fx Events – события

События спец. эффектов позволяют выполнять определенный код в различные стадии анимационного эффекта. Эти события могут быть очень полезны для создания обратной связи с пользователями и создает еще один уровень управления над своими эффектами:

• onStart – срабатывает при начале эффекта
• onCancel – срабатывает при отмене эффекта
• onComplete – срабатывает при завершении эффекта
• onChainComplete – срабатывает при завершении поочередных эффектов.

При создании эффекта tween или morph, события определяются по тому же принципу, что и параметры эффекта, только в качестве значения событию передается функция:

//определяем новый объект переменной
//и объявляем его новым объектом класса Fx.Tween
quadIn = new Fx.Tween(quadIn, {

        //тут выставляем опции
	link: 'cancel',
	transition: 'quad:in',

 
       //несколько событий
	onStart: function(passes_tween_element){
                //эти события применяются к нашему объекту

                //потому эффект "highlight" применяется к
                //началу анимации
	        passes_tween_element.highlight('#C54641');
	},

 
        //обратите внимание на разделители между функциями, в виде запятых,
        //тогда как, после последнего параметра или события
        //запятые не ставятся
        onComplete: function(passes_tween_element){

                //а тут мы применяем эффекст highlight к завершению анимации 
	        passes_tween_element.highlight('#C54641');
	}
});

Пример

Попробуем сгенерировать все переходы, показанные выше и попробуем использовать наши функции немного другими методами, какими ранее еще не пользовались. Все элементы переходов используют по две функции: одна функция запускает анимацию по наведению курсора, другая при его отводе.

//эту функцию будем запускать по событию mouseenter
var enterFunction = function() {

	this.start('width', '700px');
}
 
//эту функцию будем запускать по событию mouseleave

var leaveFunction = function() {
	this.start('width', '300px');

}
 
window.addEvent('domready', function() {
    //определим переменными некоторые элементы на странице

    var quadIn = $('quadin');
    var quadOut = $('quadout');

    var quadInOut = $('quadinout');
 
    //потом создаем по одному элементу tween каждой переменной, объявленной выше
    quadIn = new Fx.Tween(quadIn, {

	link: 'cancel',
	transition: Fx.Transitions.Quad.easeIn,

	onStart: function(passes_tween_element){
		passes_tween_element.highlight('#C54641');

	},
	onComplete: function(passes_tween_element){
		passes_tween_element.highlight('#E67F0E');

	}
    });
 
   quadOut = new Fx.Tween(quadOut, {

	link: 'cancel',
	transition: 'quad:out'
    });

 
    quadInOut = new Fx.Tween(quadInOut, {
	link: 'cancel',

	transition: 'quad:in:out'
    });
 
    //теперь добавим каждому элементу по прослушке на события
    //обратите внимание на использование функции .addEvents

    //которая работает также, как и .addEvent
    //только можно добавлять несколько событий, используя определённый шаблон
    $('quadin').addEvents({
        //вначале нужно объявить событие, поместив его в единичные кавычки,

        //отделить их двоеточием (":")
        //и объявить функцию, которая будет выполняться при этом событии.
        //в данном случае, это функция, которая связана с эффектом tween
        //разделения событий производится с помощью запятой;
        //после последнего события запятая НЕ ИСПОЛЬЗУЕТСЯ
        'mouseenter': enterFunction.bind(quadIn),

        'mouseleave': leaveFunction.bind(quadIn)
    });
 
    $('quadout').addEvents({

        //обратите внимание, как мы снова используем те же функции в этом коде
        'mouseenter': enterFunction.bind(quadOut),
        'mouseleave': leaveFunction.bind(quadOut)

    });
 
    $('quadinout').addEvents({
        //тут мы также используем те же функции

        //просто они каждый раз вызываются для работы с событием над разными элементами
        //и привязаны они к разным объектам tween
        'mouseenter': enterFunction.bind(quadInOut),

        'mouseleave': leaveFunction.bind(quadInOut)
    });

Еще раз добро пожаловать в наш класс по изучению библиотеки Mootools 1.2. Если вы пришли сюда впервые, советую посмотреть и предыдущие уроки, особенно, если вы не совсем знакомы с этой библиотекой (внизу страницы, около комментариев есть специальная ссылка).

Итак, сегодня мы рассмотрим возможности создания спец. эффектов в Mootools из библиотеки эффектов Fx.Tween. Функции этого дополнения, как и многие другие функции библиотеки, очень просты в применении, но при этом дают разработчикам очень большую свободу действий, позволяя улучшить эстетичность веб-приложений и конечно же «юзабилити» (очень модное слово сегодня в интернете; в переводе с англицкого: usability – «удобство (ис)пользования«).

Быстрые спец.эффекты

Обычно я начинаю с основ той или иной темы, но функции работы со спец. эффектами так просты в использовании, что не могу удержаться от того, чтобы именно их поставить на передовую рассмотрения.

.tween();

Английское слово tween означает мягкий переход из одного свойства в другое. В нашем случае можно сказать, что переход осуществляется от одного значения свойства, к другому. Например можно сделать так, чтобы блок div мягко и красиво растянулся с ‘width:100px’ до ‘width:300px’. А фреймворк Mootools позаботился о том,
чтобы создание таких эффектов не занимало более секунды!

//создаем функцию
var tweenerFunction  = function() {

        //выбираем элемент, над которым будем издеваться
        //и добавляем к нему .tween
        //а в качестве атрибутов добавляем свойство, которое будет изменяться
        //и значение на которое это свойство нужно мягко изменить
	$('tweener').tween('width', '300px');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_button').addEvent('click', tweenerFunction);

});

Ну а HTML код для этой функции выглядит так:

<button id="tween_button">растянуть до 300 px</button>

.fade();

Еще одна потрясающая функция, которая позволяет тонко настроить прозрачность элемента. А настройка выглядит примерно также, как показано в коде выше:

//создаем функцию
var tweenFadeFifty = function() {

       //выбираем объект
       //добавляем к нему .fade
       //и задаем значение между 0 и 1, к которому нужно привести прозрачность элемента
       //(0 - невидимка, 1 - полный видимка)
	$('tweener').fade('.5');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);

});

Вот и HTML код:

<button id="tween_fade_fifty">Снижаем видимость до 50%</button>

.highlight();

Снова не могу обойтись без слова «замечательная»! .highlight() – это замечательная функция! Она очень узконаправленная, при этом также очень полезна. Она имеет две функции:

1. Использование для мягкого перехода к иному цвету фона (можно посмотреть пример немногой ниже).
2. Мгновенно изменяет цвет фона, потом мягко переходит к другому цвету.

Если спросите, зачем вообще тратить время на создание и потом еще и изучение таких функции, могу сказать в их оправдание, что они очень полезны, когда создаешь обратную связь с пользователями. Например, можно привлечь внимание к определенному элементу, когда что-нибудь выделяется; или изменяете цвет, потом этот цвет вспыхивает когда элемент сохраняется и закрывается. Вообще, возможностей уйма. Все зависит от опыта и воображения разработчика.

А пока предлагаю рассмотреть пример использования функции. Создадим два блока div, и применим к ним оба типа функции .highlight().

//создаем функцию
var tweenHighlight = function(event) {

        //тут мы будем использовать конструкцию, которую пока еще не использовали - event.target
        //которая будет передаваться как параметр функции
        //на человеческом языке это звучит как "цель события"
        //а так как эффект применим к тому же элементу, к которому прикреплена прослушка на событие
        //не нужно будет снова создавать селектор.
        //обратите внимание, что addEvent автоматически передаст объект события в качестве параметра

        //в функцию, которую вызывает... оч полезно  
	event.target.highlight('#eaea16');
}
 
//создаем вторую функцию

//тут нужно передать сразу параметр
//так как функция будет вызываться при определенном событии
//и ей в параметры автоматически припишут событие (как в функции выше)
//а элемент можно вызывать с помощью конструкции .target
//(цель события)
var tweenHighlightChange = function(item) {

        //тут, вместо одного значения цвета, через запятую добавляем второй цвет
        //что установит первый цвет, и целевой цвет перехода
        item.target.highlight('#eaea16', '#333333');

}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);

    $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

Вкусные примеры

Вот она – самая интересная часть любого урока. Помните, еще со школы – все что там училка трындит, очень часто кажется бессмыслицей, но если правильно подобрать пример – все обретает очень четкий смысл. Вот они наши примеры. Понажимайте на кнопки в разном порядке и обратите внимание на поведение объекта:

var tweenerFunction  = function() {

	$('tweener').tween('width', '300px');
}

 
var tweenerGoBack  = function() {
	$('tweener').tween('width', '100px');

}
 
//функция .fade еще принимает ключевые слова 'out' и 'in',
//что эквивалентно 0 и 1 соответственно
var tweenFadeOut = function() {

	$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {

	$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {

	$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {

	event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {

	$('tween_button').addEvent('click', tweenerFunction);
	$('tween_reset').addEvent('click', tweenerGoBack);

	$('tween_fade_out').addEvent('click', tweenFadeOut);
	$('tween_fade_fifty').addEvent('click', tweenFadeFifty);

	$('tween_fade_in').addEvent('click', tweenFadeIn);
	$('tweener').addEvent('mouseover',tweenHighlight);

});

При наведении курсора, кстати, работает первый тип функции .highlight().

Ширина 300 — Ширина 100 — В невидимку — На половину видно/невидно — Видимка

А этот одинокий квадратик иллюстрирует работу второго типа функции .highlight().

И это еще не всё…

Создание нового эффекта

Если потребовалось больше гибкости в управлении эффектами, или еще какие-то дополнительные возможности, а такое бывает, скажу я вам, нужно будет всего навсего создать новый эффект, вместо использования уже имеющихся эффектов в Mootools. Ниже пример создания нового эффекта. Обратите внимание на ключевое слово new, которое используется для создания нового объекта Fx.Tween:

window.addEvent('domready', function() {
        //вначале назначаем объект, над которым собираемся издеваться своим новым эффектом,
//и назначаем этот объект новой переменной

        var newTweenElement = $('newTween');
 
       //теперь создаем новый эффект, которому передаем переменную с объектом в качестве параметра
       var newTween = new Fx.Tween(newTweenElement);

});

<div id="newTween"><!-- это элемент, к которому применим новый Tween эффект--></div>
<!-- а это кнопка, которая очень скоро сыграет свою главную роль -->

<button id="netTween_set">Назначить</button>

Установка стилей

При создании нового объекта Tween из элемента, можно начинать назначать свойства стилей с помощью функции .set();. Эта функция работает моментально и прицип ее работы практически ничем не отличается от .setStyle();, рассмотренной нами в 7-м уроке:

var newTweenSet = function() {
        //обратите внимание на использование ключевого слова "this"
        //немного далее рассмотрю более подробно использование этого слова

	this.set('width', '300px');
}

Когда-то, уже очень давно, я говорил, что определять функции нужно за пределами события domready, но в этом случае, мы создадим эффект внутри этого события, после чего сошлемся на него извне. Мы уже также как-то говорили о том, как можно передавать параметры извне события domready (путем созания анонимной функции).

.bind()

С помощью функции .bind(); можно сделать любой параметр равным ключевому слову “this” в спектре работы определенной функции:

//вначале добавляем событие клика к кнопке, которую видели немного выше
//потом, помимо простого вызова функции
//мы добавляем к ней ".bind()"
//и помещаем в скобки все, что мы хотим передать этой функции

//и теперь, внутри функции "newTweenSet," ключевое слово "this"
//будет относиться к переменной "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

Таким образом, если взглянем на функцию выше, “this” теперь ровняется тому, что мы говорим «newTween» (который, по совместительству, и является нашим объектом классса tween)

А теперь, соединим все это в единое целое:

//вот наша функция
var newTweenSet = function() {

        //так как мы использовали bind, "this" теперь относится к "newTween"
        //т.е. на самом деле мы говорим
        //newTween.set('width', '300px')
	this.set('width', '300px');

}
 
window.addEvent('domready', function() {
    //вначале назначаем нашему элементу переменную

	var newTweenElement = $('newTween');
 
    //потом создаем новый эффект FX.Tween и назначаем его своей собственной переменной
    var newTween = new Fx.Tween(newTweenElement);

 
    //а сейчас добавляем наше событие, в котором связываем newTween и newTweenSet с помощью bind
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

});

Запуск эффекта tween

А теперь, когда мы полностью настроили наш объект, наша функция находится вне события domready и мы помним, как с помощью функции .set(); назначить параметр стиля, потому, давайте пройдем к, собственно, спец.эффектам. Запустить эффект – очень просто! Аналогично .fade(); использовать .start(); можно двумя методами.

1. Провести преобразование от одного значения свойства стиля до другого
2. Назначить значение свойства стиля, потом перейти у другому

//эта строчка изменит текущее значение свойства width на 300px
newTween.start('width', '300px');

 
//эта строчка установит свойство width на 100px, потом сделает плавный переход на 300px
newTween.start('width', '100px', '300px');

Теперь можно начать (с помощью функции .start();) выполнение эффекта из функции и спользовать «this», если была использована функция .bind(); для связи с «newTween».

По эффектам tween пока все…

Несмотря на то что о эффектах tween еще можно долго говорить. Например, если нужно наложить спец. эффекты на несколько свойств стилей одновременно, можно использовать функцию .morph();. Можно использовать библиотеку эффектов и переходов для изменения тех самых переводов. Но этот урок и так получается довольно длинным, потому оставим это все на другие уроки.

Всем удачи и успехов!

Привет, люди планеты Земля! 1) хочу перед всеми извинится, если это кому-либо важно, за много месяxный перерыв… Мне стыдно!!!! Сам не ожидал, что так получится, но свадьба – дело тонкое, трудоемкое, которое требует много времени. Да, я женился, отдохнул, и готов к новым урокам. Еще, в качестве оправдания хочу сказать, что все это время я не забывал о блоге, своем не развитом, и хотя бы записывал идеи постов, которые, как мне кажется, окажутся полезными. Некоторые темы уже даже наполовину готовы, осталось только их дописать и опубликовать – всего ничего! Ну а пока, внимание! Смотрим на доску!

Если кто не заметил, я перешел от вручную написанного моим знакомым программистом движка на более популярный вордпрес. Это не означает, что ЦМСка моего знакомого не хороша – наоборот, она хороша тем, что она заточена под определенные действия, а именно под продвижение. Но, так как эту систему управления написал не я, я в ней совсем не разбираюсь, а дергать человека постоянно не хочу, решил перейти на вордпрес. Благо, по этой тематике в интернете много всего понаписано, да и просто покопаться в коде вордпреса тоже полезно для развития. Итак, все старые посты перекинуты, теперь все по-прежнему. Продолжаю публиковать уроки Mootools. Вот он следующий урок, о фильтрации текста.

Функции обработки строк

В этом уроке поговорим о том, какие возможности нам предоставляет библиотека Mootools при работе с данными в виде строк. Сразу нужно отметить, что то, что будет показано в этом уроке – это лишь ничтожная часть того, что Mootools может предоставить для работы со строками. В качестве небольшой иллюстрации можно привести функцию сamelCase(), которая переделывает текст такого-типа в текст ТакогоТипа (или любую другую функцию обработки текста, основанную на регулярных выражениях). Итак, в этом уроке мы пробежимся по основам работы с текстовыми строками, а потом углубимся дальше.

Перед тем, как мы продолжим, взглянем на то, как такие функции вызываются:

var my_text_variable = "Сюда вставляем текстовую строку";
 
//  результат переменная с исходником.наименование функции
var result_of_function = my_text_variable.someStringFunction();

Только ради большей эрудиции, следует отметить, что строковые функции можно вызывать и непосредственно с исходником:

var result_of_function = "Сюда вставляем текст".someStringFunction();

Обратите внимание, что так же можно вызвать и функцию для обработки числа:

//Обратите внимание на использование скобок
 
//тогда как при работе со строками используются кавычки
var limited_number = (256).limit(1, 100);

Также, хочет отметить вот что: Ява скрипты не должны вычищать пользовательский текст перед посылкой его на сервер для дальнейшей обработки. Все, что пишится на JavaScript может быть видно ВСЕМ посетителям страницы, эти скрипты можно включать/выключать, потому настоятельно рекоммендую не использовать JavaScript для обеспечения безопасности. Надеюсь не забуду провести небольшой дискурс по поводу безопасности с помощью PHP, когда мы дойдем до класса Mootools Request. И еще раз – все скрипты обеспечивающие безопасность должны выполняться на сервере, подальше от пользователя, а не с помощью JavaScript и всего к нему относящемуся!!!

trim()

Функция trim() позволяет, как и в языке PHP, быстро и эффективно избавить строку от лишних пробелов и пустого пространсва по обеим сторонам.

//Текст, который мы "тримируем"
var text_to_trim =  "    \nСтрока с ненужным пустым местом     ";
 
//  переменная trimmed_text стала такой: "Строка с ненужным пустым местом"
var trimmed_text = text_to_trim.trim();

Если вы еще не сталкивались с таким символом, как “\n”, сообщаю, что этот символ соответствует новой строке (от англ. “Newline“). Этот символ можно использовать в тексте, который нужно разбить на строки. Такой символ, или разрыв строк, фунцией trim() считается как пустое пространство, потому от него функция тоже избавляется. Жаль только, что trim() не избавляет от пустого пространства внутри текста:

var trimDemo = function(){
	//дадим тексту переменную
 
	var text_to_trim =  '            \nочень       много       белого\n              ';
 
	//тримируем
 
	var trimmed_text = text_to_trim.trim();
 
	//Смотрим результат
	alert('До тримирования: \n' + 
		  '|-' + text_to_trim + '-|\n\n' +
 
		  'После тримирования : \n' +  
	      '|-' + trimmed_text + '-|');
}

Тримирование

clean()

Понятно, заваливать весь текст пробелами – нехорошо. Потому, разработчики Mootools пошли навстречу тем, кто так считает. Функция clean() очистит не только пробелы и «пробело-образные» символы до и после текста, но и внутри него:

//Текст для очистки
var text_to_clean =  "    \nТекст     \nс      большим \n \n    количеством     \nпробелов  \n   ";
 
//  очищенный текст будет таким "Текст с большим количеством пробелов"
var cleaned_text  = text_to_trim.clean();

Как показывает пример, функция clean() – это тотже trim(), только с возможностью чистки пробелов внутри текста. Таким образом, эта функция почистит весь текст от пробелов в количестве более 2-х поряд, и от всех табов (\t) и разрывов строк (\n). Давайте сравним результаты работы этих двух функций:

var cleanDemo = function(){
	//Прикрепляем исходник к переменной
	var text_to_clean =  '            слишком \n       много\n       пробелов              ';
 
 
	//Чистим
	var cleaned_text = text_to_clean.clean();
 
 
	//Выводим результат в окно alert()
	alert('До чистки : \n' + 
		  '|-' + text_to_clean + '-|\n\n' +
 
		  'После чистки : \n' +  
	      '|-' + cleaned_text + '-|');
 
}

Чистка

contains()

Как и 2 предыдущие рассмотренные функции, функция Mootools contains() делает одну очень простую вещь, без особенностей и заморочек: она проверяет, содержиться ли в исходном тексте заданная строка. В качестве результата работы возвращается True если вхождения есть и False – если нет.

//Строка с исходным текстом
var string_to_match = "В этом тексте ведем поиск?";
 
//Ищем слово "тексте", did_string_match возвращает true
var did_string_match = string_to_match.contains('тексте');
 
 
//Ищем слово "ужас", функция возвращает False
did_string_match = string_to_match.contains('ужас');

Эта функция может пригодится во многих приложениях на Вашем сайте/блоге/сайте, особенно в комплексе с другими Mootools функциями. Например, если использовать функцию clean() с функцией each() для приминения пользовательской функции к каждому элементу массива (см. урок 3), можно сделать довольно многое, засоряя лишь несколько строк. Например, если мы создадим некий массив слов, запрещенных к использованию в комментариях, можно просмотреть весь текст на предмет использования этих слов. При этом, используется не такая уж и большая фукнция:

	string_to_match = "сюда вставляем любой текст, в котором нужно проводить поиски";
	word_array = ['слова', 'которые', 'нужно', 'найти'];
 
	//Передаем каждое слово в качестве переменного аргумента функции
	word_array.each(function(word_to_match){
		//Поиск текущего слова
		if (string_to_match.contains(word_to_match)){
 
			alert('было найдено слово' + word_to_match + '! НЕХОРОШО!');
		};
 
	});

На базе такого примера можно сотворить много чудесных скриптиков, как например такой инструмент, вылавливающий нецензурные и бранные слова или названия конкурентных товаров или брендов

var containsDemo = function (textAreaID){
 
	//Создаем список запрещенных слов
	var banned_words = ['BMW', 'Audi', 'Fererro Roche', 'хрень', 'херня', 'мудак'];	
 
 
	//берем содержимое тега textarea
	var textarea_input = $(textAreaID).get('value');
 
 
	//эта переменная будет отвечать за количество НЕ найденых совпадений
    //чтобы можно было отблагодарить пользователей
    //за чистоту речи, если вдруг такое случится
	var i = 0;
 
 
   	//используя функцию each() пробегаем по каждому слову этого текста
	banned_words.each(function(banned_word){
		//ищем запрещенные слова указанные в списке
 
		if (textarea_input.contains(banned_word)){
 
			//Сообщаем пользователю, что такие плохие слова использовать очень плохо!
			alert('Слово ' + banned_word + ' тут использовать нельзя!');
 
		}
		//Если совпадение по очередному слову не найдено
        //перемнная i увеличивается на 1
		else ++i;
	});
 
    //Если i ровняется количеству запрещенных слов, значит пользователь их не использовал
    //Благодарим пользователя за чистоту речи
	if (i==banned_words.length) alert ("Спасибо, что не используете ненависные нам слова!");
 
}

Как-то раз ехал на своем BMW на фабрику Fererro Roche и тут меня подрезает какой-то мудак на своем Audi. Я ему вдогонку кричу «Ты что за хрень вытворяешь, мудак!!! Что за херня!»
Проверка на запрещенные слова

Как-то раз ехал на своем автомобиле на фабрику одной известной компании по производству всяких разных сладостей и тут меня подрезает какой-то нехороший человек на своем автомобиле. Я ему вдогонку кричу «Ты что за нехорошую вещь вытворяешь, нехороший человек!!! Ну как же так?! Что за люди то неприличные!?!»
Проверка на запрещенные слова

substitute()

Функция substitute() – это очень мощный инструмент несмотря на свою кажущююся простоту. Сегодня мы затронем лишь ее основы, но отметим, что основная мощь ее исходит из возможности использовать ее с регулярными выражениями, которые мы рассмотрим в последующих уроках. Однако, только лишь основные возможности этой функции уже позволяет немного поиздеваться над исходным текстом.

//Это текст, который функция будет использовать
//в качестве шаблона. Обращаю внимание, что слова, которые 
//нужно заменить, помещаются в фигурные скобки
var text_for_substitute = "Майонез - это {один},  Кетчуп - это {два}, Горчица - это {три}.";
 
//Далее содаем объекс, в котором содержаться правила замены
 
//Слова справа, не помещенные в кавычки - это слова
//которые будут заменены словами слева, помещенными
//в кавычки
var substitution_object = {
	один: 'лучшая заправка для салата', 
	два: 'соус, который хорошо подходит к мясу, особенно к шашлыку', 
	три: 'такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит'
 
    };
 
//вызываем функцию substitute() с объектом, 
//в котором находятся шаблоны замены   
var new_string = text_for_substitute.substitute(substitution_object); 
 
 
//теперь наш текст выглядит вот так:
//"Майонез - это лучшая заправка для салата,
//Кетчуп - это соус, который хорошо подходит к мясу, особенно к шашлыку,
//Горчица - это такая замазка, иногда горькая, но в основном не очень. Хорошо  к мясу тоже подходит."

Вообще не всегда обязательно нужно создавать объект с шаблонами, т.к. можно обойтись и таким кодом:

//Создаем текст с отметками для замены
var text_for_substitute = "{это_нужно_заменить} и оригинальный текст";
 
//А шаблон для замены в виде объекта можно передать функции substitute()
//в виде параметра
var result_text = text_for_substitute.substitute({это_нужно_заменить: 'Значение замены'});
 
//результатом функции будет "Значение замены и оригинальный текст"

Чем дальше, тем глубже! Вместо стандартных словоформ в кавычках (слова слева) можно использовать элементы DOMа, т.е. можно создавать более интерактивные приложения на сайте:

var substituteDemo = function(){
	//Берем оригинальный тест из соответствующего элемента DOM
 
	var original_text = $('substitute_span').get('html');
 
 
	//Определяем, чем будем заменять:
	//а заменять мы будем текстом введеным в текстовое поле
	var new_text = original_text.substitute({
 
		первый  : $('first_value').get('value'),
		второй : $('second_value').get('value'),
 
		третий  : $('third_value').get('value'),
	});
 
 
	//Заменяем первоначальный текст на новый
	$('substitute_span').set('html', new_text);
 
 
 
	//Отключаем кнопку замены и включаем кнопку сброса
	$('simple_substitute').set('disabled', true);
 
	$('simple_sub_reset').set('disabled', false);
}
 
 
var substituteReset = function(){
	//Создаем переменную для первоначального текста
	var original_text = "|- {first} -- {second} -- {third} -|";
 
 
	//Заменяем текст в соответствующем элементе на первоначальный 
	$('substitute_span').set('html', original_text);
 
 
	//Выключаем кнопку сброса и включаем кнопку замены
	$('simple_sub_reset').set('disabled', true);
 
	$('simple_substitute').set('disabled', false);
}

|- {первый} — {второй} — {третий} -|

Первая замена: Вторая замена: Третья замена: Замена Сброс

И, напоследок, еще немного теории. При приминении функции substitute() к строке, всегда нужно предоставлять функции объект со всеми парами «ключ : значение», так как иначе функция просто удалит все, что найдет между фигурными скобками (включая сами фигурные скобки). Потому, будьте осторожны, при использовании такой строки в качестве полигона действий:

("{раз} блаблабла {два} и пусть бе-бе-бе").substitute({раз : 'текст на замену'});

В конечном итоге получится

Продолжаем наши уроки Mootools и сегодня рассмотрим, как можно использовать Mootools для фильтрации пользовательских данных. Начнем с простой фильтрации чисел, а потом продолжим с фильтрацией текстовых строк в следующем уроке.

Примечание:Фильтрация входящих данных в Javascript используется для того, чтобы обеспечить нормальную работу ваших скриптов. Не нужно использовать ее для полной замены серверной фильтрации, которая используется для защиты приложений от внешних атак.

Числа

Помните, в 4-м уроке мы брали значения текстовых полей, отображающих RGB значения цветов, и использовали их для замены фонового цвета страницы, а сегодня мы снова возьмем за основу этот код, приделав к нему небольшие модификации.

rgbToHex()

С точки зрения структуры, функция rgbToHex() принадлежит коллекции функции для работы с массивами. Но, т.к. эта функция для работы с числовыми массивами, мы будем рассматривать ее именно в этом уроке. С точки зрения предназначения и использования, функция rbgtoHex() вполне проста:

function changeColor(red_value, green_value, blue_value){

  	var color = [red_value, green_value, blue_value].rgbToHex();

   	alert('Конвертируется в : ' + color);
   }
     changeColor('5', '41', '18')

changeColor(‘54′, ‘41′, ‘18′);

Этот код идеально работает, если передавать в качестве аргументов цифры. Посмотрите, как поведет себя браузер, когда вместо одного из аргументов мы передадим текст:

changeColor(‘54′, ‘41′, ‘опля’);

«Nan» виднеющийся в конце сообщения имеет значение Not a Number (Не Число). Если именно вы вводите вручную массив цифр для значения цвета, такой ошибки может вы и не увидите. Но если используется какой-либо внешний источник, очень вероятно, что придется частенько почитывать такие ошибочки.

toInt()

Теперь нам нужно убедиться в том, что фукнция rgbToHex() получает в качестве аргумента, именно числа, а не данные в каком-либо другом формате. Для этого мы можем использовать функцию toInt() – это еще одна относительно простая и понятная функция. Ей можно передать любую переменную, а она позаботится о том, чтобы извлеч из данных этой переменной число.

var toIntDemo = function(make_me_a_number){

var number = make_me_a_number.toInt();
 
alert ('Что получилось : ' + number);

}

toIntDemo(’613.234′)
toIntDemo(’83_ура!’)
toIntDemo(’а_нет_ли_тут_26?’)

Ну вот! Как видно, toInt() несправляется с каждой неоднозначной ситуацией, но, благодяра другой классной вещи в Mootools, которая называется $type(), мы можем спокойно разобраться и с этой проблемкой!

$type()

$type() – это еще одна вкусняшка нашей любимой библиотеки. Она анализирует переданную ей перменную и возвращает текстовую строку с названием типа данных, которому придлажала переменная. Что-то я тут запутал… Лучше разюерем на примере:

var checkType = function(variable_to_check){
	var variable_type = $type(variable_to_check);

	alert("Данные являются типом : " + variable_type);
}

checkType(43)checkType(’a string’)checkType(false)

На самом деле, функция $type() не ограничивается определением этих трех типов данных. $type() возвращает следующие значения в текстовой форме:

• ‘element’ – Если переданный объект является элементом DOMa
• ‘textnode’ – текстовый элемент DOMa.
• ‘whitespace’ – пустое пространство DOMa.
• ‘arguments’ – аргумент.
• ‘array’ – массив.
• ‘object’ – объект.
• ‘string’ – текстовая строка.
• ‘number’ – число.
• ‘date’ – дата.
• ‘boolean’ – булев тип.
• ‘function’ – функция.
• ‘regexp’ – регулярной выражение.
• ‘class’ – класс (созданный с помощью new Class или является расширением другого класса).
• ‘collection’ – когда переданный объект – это набор из html-элементов, как при вызове childNodes, getElementsByTagName, и т.д.
• ‘window’ – окно.
• ‘document’ – документ.
• false – (булев тип – единственный в своем роде при использовании $type()) Возвращается тогда, когда объект имеет тип undefined, null, NaN или ни один ииз вышеперечисленных.

var toIntDemo = function(make_me_a_number){
	//попробуем сделать число из введенного текста
	var number = make_me_a_number.toInt();

 
	//Если это не срабатывает, устанавливаем число ноль (0)
	if ($type(number) != 'number'){number = 0;}

	alert('Что получилось : ' + number);
}

toIntDemo_2(’613.234?)

toIntDemo_2(’83_Ё_моЁ!’)
toIntDemo_2(’а_что_если_83?)

Если соединить все это воедино, получиться почти идеальная версия нашего скрипта по конвертированию цветов из формата RGB в шестнадцатиричный код – changeColor():

var changeColor_2 = function(red_value, green_value, blue_value){

	//Убедимся в том, что у нас все данные - числа
 
    red_value = red_value.toInt();
    green_value = green_value.toInt();

    blue_value = blue_value.toInt();
    //Устанавливаем значения по умолчанию на всё, что не является числом
 
    if ($type(red_value)   != 'number'){red_value = 0;}

    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}

    //Вычисляем шестнадцатиричное значение
 
    var color = [red_value, green_value, blue_value].rgbToHex();

    alert('Конвертируется в : ' + color);
}

changeColor(‘208′, ‘127′, ‘74′);
changeColor(‘82′, ‘7′, ‘скунс’);

changeColor(‘522′, ‘847′, »);

Обратите внимание, что последняя кнопка передает числа куда более высокие, чем могут приминать цвета в формате RGB (0-255), а это, нужно сказать, делает шестнадцатиричное число не особо пригодным для обозначения цветов. К сожалению, это означает, что если мы получим число большее или меньшее диапазона 0-255, мы не получим шестнадцатиричного значения цвета. К счастью, Mootools поможет нам забыть и об этой проблеме.

limit()

Функция limit() не выдиляется сложностью, т.к. этим словом ее охарактеризовать нельзя. Она помогает удержать числа в заданном диапазоне:

//вызываем функцию
limit(n1, n2)

//где n1 наименьшее число требуемого диапазона
// а n2 - наивысшее

Ничего сложного! Елинственное «но», это то, что нужно иметь ввиду, что функция предполагает, что n1 и n2 – это числа. Поэтому крайне рекомендуется применять toInt() к данным, которые предположительно являются числами и которые предствоит передавать в функцию limit() (или любую другую функцию для работы с числами).

var limitDemo = function(number_to_limit){
	//Получаем число
 
	number_to_limit = number_to_limit.toInt();

 
	//получаем число из требуемого диапазона
	var limited_number = number_to_limit.limit(0, 255);

	alert("Ограничиваем до : " + limited_number);
}

limitDemo(6535634);

А вот и полный рецепт

var changeColor = function(red_value, green_value, blue_value){

	//Убеждаемся, что все данные у нас - это числа
 
	red_value   = red_value.toInt();
	green_value = green_value.toInt();

	blue_value  = blue_value.toInt();
 
	//Устанавливаем значения по умолчанию на все, что не является числом
	if ($type(red_value)   != 'number'){red_value = 0;}

	if ($type(green_value) != 'number'){green_value = 0;}

	if ($type(blue_value)  != 'number'){blue_value = 0;}

 
	//Ограничиваем все до диапазона значений RGB (0 - 255)
 
	red_value   = red_value.limit(0, 255);

	green_value = green_value.limit(0, 255);
 
	blue_value  = blue_value.limit(0, 255);

 
	//Конвертируем в шестнадцатиричную систему
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color); 

}

changeColor(’28′, ‘17′, ‘47′);changeColor(‘28′, ‘17′, ‘oops’);changeColor(’428′, ‘317′,
‘265000′);

Обратите внимание, что функция .rgbToHex() нигде не принимает никаких атрибутов. Это все потому, что эта функция может принять 2 атрибута булев типа: true, false. По умолчанию установлен false, что и возвращает нам строку в таком виде, в котором она нам нужна для вставки в атрибут цвета, т.е. “#000000″. Если же передать атрибут true, функция вернет данные в виде массива.

var rgb2HexTrue = function(r, g, b){
  var rgbArray = [r, g, b].rgbToHex(true);
  var rgbHex = [r, g, b].rgbToHex();
  alert('rgbToHex с параметром TRUE: ' + rgbArray + 'и с параметром FALSE: ' + rgbHex);
}

rgb2Hex(’34′, ’117′, ’247′)