Сегодня попробую рассказать об одном из самых сложных для меня предметов в программировании – о КЛАССАХ. Этот страшный КЛАСС – это некий контейнер, некое собрание переменных и функций, которые обрабатывают ранее упомянутые переменные, чтобы получить определённый результат. Классы очень полезны при работе над более сложными проектами.

Переменные

Мы уже говорили об использовании хеш-массивов, так что пример ниже не должен никому показаться сложным.

	//Создаем новый класс с именем Klass_first
	//класс содержит две внутренние переменные
	var Klass_first = new Class({
		variable_one : "Я первая переменная",
		variable_two : "Я вторая переменная"
	});

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

var run_demo_one = function(){
	//создадим объект на основне нашего класса Klass_first
	var demo_1 = new Klass_first();
	//Отобразить переменные нашего класса
	alert(demo_1.variable_one);
	alert(demo_1.variable_two);
}

Запуск первой демки

Методы и функции

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

	var Klass_second = new Class({
		variable_one : "Вот значение первой переменной",
		variable_two : "Вот значение второй переменной",
		function_one : function(){
			alert('Значение первой переменной : ' + this.variable_one);
			},
		function_two : function(){
			alert('Значение второй переменной : ' + this.variable_two);
		}
	});

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

	//работает
	working_method : function(){
		alert('Первое значение : ' + this.variable_one);
		},
	//не работает
	broken_method : function(){
		alert('Второе значение : ' + variable_two);
	}

Вызов методов нового класса работает также, как и вызов переменных класса.

	var run_demo_2 = function(){
		//создаем экземпляр класса Klass_second
		var demo_2 = new Klass_second();
		//вызываем функцию function_one
		demo_2.function_one();
		//вызываем функцию function_two
		demo_2.function_two();
	}

Запуск второй демки

Метод initialize:

Метод initialize: – это специальная функция класса, в которую можно сбросить все действия и параметры по настройке класса и определённые пользовательские опции и переменные. initialize: определяется также, как и обычные методы классов:

var Myclass = new Class({
	//определяем функцию инициализации класса с одним параметром
	initialize : function(user_input){
		//создаем переменную для этого класса, чьим значением
		//будут пользовательские данные
		this.value = user_input;
	}
})

initialize: можно использовать для изменения других опций или параметров:

var Myclass = new Class({
	initialize : function(true_false_value){
		if (true_false_value){
			this.message = "Всё, что говориться в этом уроке - правдиво!";
		}
		else {
			this.message = "Всё, что говориться в этом уроке - лживо!";
		}
	}
})
 
//Этот экземпляр класса скажет, что
//"Всё, что говориться в этом уроке - правдиво!"
var myclass_instance = new Myclass(true);
 
//Этот экземпляр класса скажет, что
//"Всё, что говориться в этом уроке - лживо!"
var myclass_instance = new Myclass(false);

Такой принцип определения экземпляра класса работает и в других случаях, только нужно помнить о запятых между каждой парой {ключа/значения}. Эту злосчастную запятую очень легко пропустить и продатить по безобразия много времени в поисках несуществующих багов в коде.

var Klass_third = new Class({
	//запуск функции при определении экземпляра класса
	initialize : function(one, two, true_false_option){
		this.variable_one = one;
		this.variable_two = two;
		if (true_false_option){
			this.boolean_option = "Выбрана опция TRUE";
		}
		else {
			this.boolean_option = "Выбрана опция FALSE";
		}
	},
	//определения методов
	function_one : function(){
		alert('Значение первое: ' + this.variable_one);
		},
	function_two : function(){
		alert('Значение второе: ' + this.variable_two);
	}
});
 
var run_demo_3 = function(){
	var demo_3 = new Class_three("Значение для первой переменной", "Значение для второй переменной");
	demo_3.function_one();
	demo_3.function_two();
}

Запуск третей демки

Внедрение параметров

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

Добавить функционал опций своему классу также просто, как добавить ещё одну пару ключ/значение к опциям инициализации:

	var Myclass = new Class({
	Implements: Options
})

По поводу Implements особо пока заморачиваться не будем, но более подробно остановимся на нём в следующих уроках. А сейчас, когда мы подключили функционал Options, нужно определить дефолтные значения параметров. Как и всегда, нужно всего-лишь добавить ещё одну пару ключ/значение в опции инициализации класса, но этот хеш-массив уже будет вложенным:

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Значение первого параметра",
		option_two : "Значение второго параметра"
	}
});

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

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Дефолтное значение первого параметра",
		option_two : "Дефолтное значение второго параметра"
	}
	initialize: function(options){
		this.setOptions(options);
	}
});

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

//Перезаписываем оба дефолтных значения
var class_instance = new Myclass({
	options_one : "Перезаписываем первое дефолтное значение",
	options_two : "Перезаписываем второе дефолтное значение"
	});
 
//Перезаписываем только одно дефолтное значение
var class_instance = new Myclass({
	options_two : "Перезаписываем второе дефолтное значение"
});

Обратите внимание на использование метода setOptions, который вызывается в методе инициализации. Этот метод – это часть класса Options и он также позволяет устанавливать опции (параметры) после того, как был создан экземпляр класса.

	var class_instance = new Myclass();
	//Устанавливаем первый параметр
	class_instance.setOptions({options_one : "Перезаписать первый параметр"});

После того, как опци (параметры) были установлены, к ним можно обращаться через переменную options:

	var class_instance = new Myclass();
	//Обращаемся к значению первого параметра
	var class_option = class_instance.options.options_one;
	//переменная class_option теперь имеет значение "Дефолтное значение первого параметра"

Если же нужно обратиться к переменной изнутри класса, нельзя забывать про this:

	var Myclass = new Class({
	Implements: Options,
	options: {
		option_one : "Первое дефолтное значение",
		option_two : "Второе дефолтное значение"
	}
	test : function(){
		//обратите внимание на использование this
		//для обращения к классу
		alert(this.option_two);
	}
});
 
var class_instance = new Myclass();
//Следующая строчка выведет сообщение "Второе дефолтное значение"
class_instance.test();

Ну, а если всё вышеперечисленное соединить в один код, получится следующее:

var Klass_fourth = new Class({
    Implements: Options,
	options: {
		option_one : "Дефолтное значение Первого Параметра",
		option_two : "Дефолтное значение Второго Параметра",
	},
	initialize: function(options){
		this.setOptions(options);
	},
	show_options : function(){
		//тут мы используем функцию print_r(), позаимсвованную из PHP
		//немного о ней будет сказано чуть ниже
		alert(print_r(this.options, true));
	},
});
 
var run_demo_4 = function ){
	var demo_4 = new Klass_fourth({
		option_one : "Новое значение первого параметра"
		});
	demo_4.show_options();
}
 
var run_demo_5 = function(){
	var demo_5 = new Klass_fourth();
	demo_5.show_options();
	demo_5.setOptions({option_two : "Новое значение второго параметра"});
	demo_5.show_options();
}
 
//Создадим новый экземпляр класса Klass_fourth
//в который добавим новый параметр - new_option
var run_demo_6 = function(){
	var demo_6 = new Klass_fourth({new_option : "Это значение нового, добавленного параметра"});
	demo_6.show_options();
}

Запуск четвертой демки
Запуск пятой демки
Запуск шестой демки

Вкусняшки!

Наверняка многие знакомы с функцией print_r() из PHP, которая используется в методе show_options:

   	show_options : function(){
   		alert(print_r(this.options, true));
   	}

print_r() – это не родная функция JavaScript, но она была ассимилирована в рамках проекта PHP2JS. Ну, а для тех, кто не знает, что такое PHP, объясню, что функция print_r() возвращает форматированную строку, созданную из пар ключ/значение. Это очень полезная функция для поиска и исправления ошибок. Кому интересен искодный код этой функции можно её найти в исходном коде страницы. Надеюсь все знают, как найти исходный код страницы? Подсказка.

var Klass_fifth = new Class({
	//Подключаем класс Options
	Implements: Options,
	//Устанавливаем дефолтные опции
	options : {
		option_one : "Дефолтное значение первого параметра пятого класса",
		option_two : "Дефолтное значение второго параметра пятого класса",
	},
	//подключаем дефолтные значения
	initialize : function(options){
		this.setOptions(options);
	},
	//определяем метод, выводящий сообщение
	//с форматированной строкой из массива с параметрами
   	show_options : function(){
   		alert(print_r(this.options, true));
   	},
	//определяем метод для обмена значений
	//между двумя параметрами
	swap_options : function(){
		this.setOptions({
			option_one : this.options.option_two,
			option_two : this.options.option_one
		})
	}
});
 
function demo_7(){
	var demo_7 = new Klass_fifth();
	demo_7.show_options();
	demo_7.setOptions({option_one : "Новое значение первого параметра"});
	demo_7.swap_options();
	demo_7.show_options();
}

Запуск седьмой демки

Основное

Делаем аккордион

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

	<h4 class="togglers">Заголовок 1</h4>
	<p class="elements">Тут содержание - текст - для заголовка 1</p>
	<h4 class="togglers">Заголовок 2</h4>
	<p class="elements">Тут содержание - текст - для заголовка 2</p>

Теперь можно просто перенести данные классов в переменные и запустить новый объект accordion.

	//Назначаем заголовки, которые будут, по совместительству, и активными областями
	var zags_demo = $$('.togglers_1');
	//Назначаем содержание, которое будет скрыто до активации соответствующего заголовка
	var content_demo = $$('.elements_1');
	//определяем объект accordion
	//и передаем в качестве параметров назначенные выше переменные
	var DemoAccordionObject = new Accordion(zags_demo, content_demo);

Такое простое определение объекта даст следующий результат:

Заголовок 1

Содержание, находящееся под заголовком 1

Заголовок 2

Содержание, находящееся под заголовком

Заголовок 3

Содержание, находящееся под заголовком

Параметры

Как и при работе со всеми остальными объектами Mootools, у Accordion имеются параметры, которые нужно использовать, если настраиваете что-то большее, чем дефольтный Accordion. Встречайте! Параметры Accordion!

display

По умолчанию 0.

Этот параметр определяет, какой из элементов будет отображаться при загрузке страницы. По умолчанию параметр имеет значение 0, что означает, что при загрузке показывается первый элемент списка. Чтобы установить другой элемент, используйте любое другое значение (целое число). В отличие от параметра show, display отобразит элемент с небольшой анимацией.

var AccordionObject = new Accordion(toggles, content {
	    display: 0 //значение по умолчанию
	});

show

По умолчанию 0.

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

var AccordionObject = new Accordion(toggles, content {
	    show: 0 //значение по умолчанию
	});

height

По умолчанию true.

При значении true этот параметр определяет, будет ли контент показан с привязкой к высоте. Это стандартное выполнение эффектов Accordion, показанное немного выше.

var AccordionObject = new Accordion(toggles, content {
	    height: true //значение по умолчанию
	});

width

По умолчанию false.

Назначение этого параметра похоже на праметр height, но вместо того, чтобы изменять высоту для отображения контента, изменяться будет ширина. При использовании ‘width’ со стандартным набором параметров (как показано выше), то расстояние между заголовком останется прежним, в зависимости от высоты контента. Сам же блок с контентом откроется слева направо для отображения контента в этом пространстве.

var AccordionObject = new Accordion(toggles, content {
	    height: true //значение по умолчанию
	});

opacity

По умолчанию true.

Параметр определяет, будет или не бует приминяться эффект прозрачности при отображаении контента. Эффект этого параметра можно увидеть в примере выше – мы же там использовали обычное определение объекта, потому там и используются стандартные значения параметров.

var AccordionObject = new Accordion(toggles, content {
	    opacity: true //значение по умолчанию
	});

fixedHeight

По умолчанию false.

Используется для установки фиксирвованной высоты. Нужное значение – число (можно установить на 100, чтобы задать высоту в 100 пикселей). Параметр следует использовать о свойством overflow каскадныйх таблиц стилей, когда необходимая фиксированная высота блока меньше, чем естественная высота блока с контентом.

var AccordionObject = new Accordion(toggles, content {
	    fixedHeight: false //значение по умолчанию
	});

fixedWidth

По умолчанию false.

Не трудно догадаться, что этот параметр работает также, как и fixedHeight, только работает с шириной блока.

var AccordionObject = new Accordion(toggles, content {
	    fixedWidth: false //значение по умолчанию
	});

alwaysHide

По умолчанию false.

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

var AccordionObject = new Accordion(toggles, content {
	    alwaysHide: false //значение по умолчанию
	});

События

onActive

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

var AccordionObject = new Accordion(toggles, content {
		onActive: function(toggler, element) {
			toggler.highlight('#76C83D'); //элемент управления подсветим зеленым
	    	element.highlight('#76C83D');
		}
	});

onBackground

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

	var AccordionObject = new Accordion(toggles, content {
			onBackground: function(toggler, element) {
		    	toggler.highlight('#DC4F4D'); //элемент управления подсветим красным
		    	element.highlight('#DC4F4D'); //элемент закрывающийся подсветим красным
			}
		});

onComplete

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

	var AccordionObject = new Accordion(toggles, content {
			onComplete: function(one, two, three, four){
		    	one.highlight('#5D80C8'); //отмечаем синим
		    	two.highlight('#5D80C8');
		   		three.highlight('#5D80C8');
		    	four.highlight('#5D80C8');
			}
		});

Методы Accordion-a

.addSection();

Добавляет пару заголовок/контент в объект Accordion. Работает схоже с остальными методами, о которых уже шла речь в наших уроках. К переменной объекта прикрепляем .addSection, после чего нужно обратится к id заголовка, id контента и далее нужно указать, какое по счёту положение новая пара должна принять (0 – начало списка).

AccordionObject.addSection('togglersID', 'elementsID', 2);

Тут стоит заметить, что если таким образом добавлять объекты, то порядковый индекс нового объекта будет не 2, а +1 к индексу последнего элемента. Так, если у вас в списке 4 элемента (0-3), новый элемент, добавленный через .addSection();, будет 5-м, с индексом 4, соответственно.

.display();

Позволяет открыть определённый элемент по его порядковому номеру в массиве. Так, если бы мы выполнили код метода .addSection();, показанный выше, и после добавления элемента нам бы нужно было открыть добавленный элемент, то с .display(); нельзя использовать тот же самый индекс!

AccordionObject.display(4); // покажет только что добавленный элемент

Вкусняшки Accordion-овские

Ниже можно простестировать всё, о чём шла речь в этом уроке. Accordion – интересный и полезный плагин к библиотеке Mootools, который я уже несколько раз использовал для придания дополнительного удобства пользования рабочим сайтом. Мне понравилось – всё просто и очень гибко!

//определяем переменные массивов с заголовками и элементами с контента
	var zags = $$('.zag');
	var content = $$('.content');
 
	//создаем переменнцю объекта
	//с помощью ключевого слова "new"
	//передаем массив с заголовками
	//передаем массив с контентом
	//задаем параметры и события
	var AccordionObject = new Accordion(zags, content, {
		//далее определяем, что при загрузке страницы
		//будет показан контент, через метод "show" (по индексу)
		//но БЕЗ каких-либо эффектов - он просто откроется
		//также, обратите внимание, что если используете параметр "fixedHeight,"
		//метод show не сработает при загрузке страницы.
		//"show" имеет приоритет перед "display"
		show: 0,
 
		//при загрузке страницы, эта строчка покажет контент (по индексу),
		//и контент будет открыт с приминением небольшого эффекта
		//как говорилось выше, show в приоритете перед display
		//display: 0,
 
		//имеет дефолтное значение 
		//создается вертикальный аккордион
		height : true,
 
		//далее, создается для горизонтального аккордиона
		//он немного сложнее в использовании из-за необходимости использовать CSS
		width : false,
 
		//дефолтное значение
		//запустит немного прозрачности в эффект
		opacity: true,
 
		//дефолтное значение false, но можно указать и числовое значение -
		//закрепит высоту всех контейнеров
		//потребует использование overflow
		//не будет работать при загрузке страницы, если будет использоваться show
		fixedHeight: false,
 
		//может быть false или целое число
		//схоже с fixedHeight,
		//но используется с горизонтальными аккордионами
		fixedWidth: false,
 
		//позволяет закрывать открытые элементы
		alwaysHide: true,
 
		//обычное событие onComplete
		//передаёт переменную с элементом для каждого отдельного элемента с контентом
		onComplete: function(var1, var2, var3, var4, var5){
			var1.highlight('#5D80C8'); //синий цвет
			var2.highlight('#5D80C8');
			var3.highlight('#5D80C8');
			var4.highlight('#5D80C8');//добавленный элемент
			$('onComplete').highlight('#5D80C8');
		},
 
		//это событие сработает, когда элемент будет открываться
		//передаст элемент, управляющий состоянием контента
		//и элемент контента, над которым производится действие
		onActive: function(toggler, element) {
			toggler.highlight('#76C83D'); //зеленый
			element.highlight('#76C83D');
			$('onActive').highlight('#76C83D');
		},
 
		//событие срабатывает, когда элемент с контентом начинает закрываться
		//передаст всем остальным элементам
		//закрывающийся элемент или тот, что не открывается
		onBackground: function(toggler, element) {
			toggler.highlight('#DC4F4D'); //красный
			element.highlight('#DC4F4D');
			$('onBackground').highlight('#DC4F4D');
		}
	});
 
	$('add_section').addEvent('click', function(){
		//новая часть аккордеона  - это стандартная аккордионная пара
		//переключатель и контент
		//указываем, куда нужно его установить
		AccordionObject.addSection('addToggler', 'addElement', 0); // в самое начало
	});
 
	$('display_section').addEvent('click', function(){
		//определяет, какой объект аккордиона первым отобразиться на странице
		//будет иметь приоритет над аналогичным параметром в разделе options
		AccordionObject.display(4);
	});

Далее, по цветам можно видеть, что происходит с нашими элементами при запуске объекта Accordion.

Заголовок 1

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

Заголовок 2

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

Заголовок 3

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

Заголовок 4

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

Добавочный заголовок

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

Можно попробовать добавить новый элемент с помощью этой кнопки
Добавить пару
Показать добавленную пару

Основы

Создание нового объекта 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

Во-первых, мой опытный уже глаз, сразу распознал ошибку. А ты, мой пытливый и любовытный читатель-программист? Правильно! На одной странице не может быть несколько одинаковых ID. Далее автор приводит такой код:

<a id="v_toggle">ссылка</a>
<div id="vertical_slide">текст</div>
<a id="v_toggle">ссылка</a>
<div id="vertical_slide">текст</div>
<a id="v_toggle">ссылка</a>
<div id="vertical_slide">текст</div>

window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide ('vertical_slide', {duration: 200});
myVerticalSlide.hide();
       $('v_toggle').addEvent('click', function(e){
               e.stop();
              myVerticalSlide.toggle();
});
})

У автора этого вопроса, понятное дело, сработал только первый DIV: обработчик браузера, при получении кода, получает вначале именно первый DIV с соответствующим ID, соответственно, именно этот DIV и получает Fx.Slide. Вот пример (кстати, пришлось завалить валидацию этой страницы, т.к. ни один валидатор HTML не признает код правильным, если в нем есть несколько одинаковых ID):

Итак, я взялся и понял как сделать так, что бы нажимая на любую из ссылок срабатывал Fx.Slide каждого из дивов, при этом не используя разные ID. Во-первых, ID у нас становятся CLASS:

<a class="v_toggle">ссылка</a>
<div class="vertical_slide">текст</div>
<a class="v_toggle">ссылка</a>
<div class="vertical_slide">текст</div>
<a class="v_toggle">ссылка</a>
<div class="vertical_slide">текст</div>

А код Mootools приобретает такой вид, который и будет делать именно то, что нам нужно:

window.addEvent('domready', function() {
   //добавляем массив элементов с классом к переменной
   var myVerticalSlide = $$('.vertical_slide');
   //назначаем эффект слайд каждому элементу массива
   myVerticalSlide.each(function(item, index){
      item[index] = new Fx.Slide (item, {duration: 200});
      item[index].hide();
   })
   //назначаем обработчик события
   $$('.v_toggle').each(function(item){
      item.addEvent('click', function(e){
         e.stop();
         //устанавливаем метод toggle для всех элементов массива myVerticalSlide
         myVerticalSlide.each(function(item, index){
            item[index].toggle();
         });
      });
   });
})

И вот, что получилось:

Я планирую еще целый урок по Fx.Slide для Mootools, так что если интересует суть этого эффекта и его возможности, подписывайтесь на RSS .

пОКа!

В этом уроке мы рассмотрим две “полки” библиотеки: первая, это функция .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 – это решение одного человека. Если Вам известен путь сделать тоже самое, но меньшими усилиями, все будут рады, если Вы этим поделитесь!

Уважаемые читатели!
Веб-программированию многие, как я, пытаются научиться на дому, т.е. не ходят на курсы, не учатся в ВУЗах или же просто ищут в интернете интересные задачи на тему программирования.

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

Если Вы также, как и я, учитесь программированию и у вас есть интересные задачи, темы, уроки? которыми вы готовы поделиться, пожалуйста, присылайте Ваши материалы мне на php – собака – инфониак.ru (думаю, разберете, как правильно адрес пишется) или просто через мою горячую линию.

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

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

2. материал уникален;
3. опрятно написан, без ошибок и опечаток (не так как у меня );
4. состоит не менее чем из 300 слов, связанных между собой смыслом (см. пункт выше);
5. он уникален (см. пункт 2), если вы просто хотите перепостить материал уже размещенный на вашем сайте;
6. что в статье не просто теория, но и практические примеры (но и просто теория – не плохо, присылайте рассмотрим… я бы и сам попробовал придумать и прикрутить примеры);
7. если еще что-нибудь придумаю, обновлю .

С моей стороны вы получите в этом материале ссылку на Ваш блог и благодарности всех читателей за еще один хороший урок с примером

Очень и очень трудно мне далось написание этого урока. Регулярные выражения вообще не самое простое, что есть в программировании, а уж для меня, так тем более. Например, пока я писал его, познакомился с функцией 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 ленту.

Недавно мой очень хороший знакомый попросил меня написать небольшой скрипт, который бы мог находить на загружаемой странице сайта определенное регулярное выражение и записывать вхождение в базу данных на сервере. Как только я услышал задачу, понял, что без AJAX тут никак. Пока с AJAXом у меня очень посредственные отношения: я написал только один полускрипт, который состоял в том, что при выборе категории товара на сайте подгружались подкатегории и товары этой супер категории, а при выборе подкатегории, выбирались товары только этой одной подкатегории и все это было выполнено в виде выпадающих списков <input type=”option”>… Итак, тот первый полускрипт я написал на чистом JavaScript с помощью XMLHttpRequest (XHR) и, конечно же, не без помощи w3school.org.

В этой задаче мне пришлось также столкнуться с объектом RegExp JavaScript. Я немного потренировался в его использовании, что, несомненно пошло мне на пользу. Например, я узнал, что для того, чтобы использовать РегЭксп-ы, не обязательно объявлять переменную, новый экземпляр объекта RegExp, а можно просто записать регулярное выражение в виде текcтовой строки, т.е. вместо

var r = new Regexp('.*', 'g');

можно просто написать вот так:

var r = '/.*/g';

Но, обратите внимание, что при использовании конструкции new RegExp использовать обратные слэши не нужно, т.к. при работе с регулярным выражением, объявленным таким образом, обработчик сам добавит недостающие символы. Также, в этом примере видно, что ключи к РегЭксп-у идут отдельным параметром к объекту, тогда как при составлении выражения в текстовой строке, ключ просто добавляется в конце регулярного выражения. В общем, если регулярное выражение просо записывается в строку, то и составляется оно по всем правилам составления регулярных выражений.

Ключ ‘g’ говорит обработчику, что не нужно останавливаться после первого вхождения регулярного выражения, а нужно искать по всему тексту, но простого указания этого ключа, как оказалось, совсем не достаточно.

В отличие от РНР, где функция preg_match_all записывает все вхождения в массив самостоятельно, для того, чтобы проделать тоже самое в JavaScript мне пришлось ускорить седение волос на голове:) Оказалось, что для поиска всех вхождений в документе с помощью JavaScript, нужно написать код такого плана:

r = new RegExp('.*text-([0-9]+).*', 'g');
res = null;
while(res = r.exec(s)){
	var i = r.lastIndex;
	// сюда вставляем код, который должен выполняться при нахождении регулярного выражения
	// это может быть запить найденного в переменную или ещё что-нибудь
}

где res – массив в который записываются результаты поиска, где, в свою очередь, res[0] будет содержать вхождение всего регулярного выражения, res[1] будет содержать вхождение в первой группе скобок, res[2] – во второй и т.д.
r – экземпляр регулярного выражения;
exec() – метод объекта RegExp, который находит вхождения, соответствующие регулярному выражению и записывает их в массив. exec() отличается от test() тем, что записывает данные в массив, тогда как test() просто возвращает true если находит вхождение или false если не находит. Если же предпочитаете работать не с объектом, а с текстовой строкой, которая содержит РегЭксп, то используйте обычные методы match() – аналог exec(), или search() – почти аналог test(), с тем отличием, что возвращает позицию начала вхождения.

Тут потребуется небольшая оговорка по поводу использования search(): так как он возвращает число, а не булев тип (true/false), при отсутствии вхождения этот метод возвращает -1.

Кстати, при использовании просто текстовой строки для хранения РегЭксп-а, можно также использовать метод replace(), который находит вхождение регулярного выражения, или обычного текста, и заменяет на указанный в параметре текст.

Идем далее: s – источник поиска, т.е. где будем искать.
.lastIndex – параметр, отвечающий за позицию, где было найдено последнее вхождение. Если этот параметр не указать, обработчик JavaScript найдет только первое вхождение, даже при указании ключа ‘g’.

Далее, часть Ajax. На сайте этого моего товарища уже были подключены Prototype и jQuery, потому, я решил не подключать еще и Mootools к этому салату (вначале думал подключить, так как только с ним и знаком). Решил просто посмотреть документацию по этим библиотекам, чтобы понять, какой из них лучше воспользоваться для составления пакета и отправки на скрипт сервера. Оказалось, что проще, чем это предлагает сделать jQuery, не получится!

$.post(ServerSideScriptUrl, {var1:value1, val2:val2 ...})

Как видно из этого, вообще ничего проще нет. Спасибо jQuery!! Знакомый до боли селектор из Mootools $, потом указываем метод отправки – get/post, и несколько параметров. Конечно, в моем скрипте, требовалось лишь отправить данные, без их последующего приема, потому мне именно вариант jQuery показался самым простым. К сожалению, массивы с данными через XHR отправить не получится, но форма передачи данных на сервер, указанная выше, вполне справится с задачей передачи вполне большого объема данных.

Думаю, на этом и хватит описывать мой героический скрипт РНР скрипт на стороне сервера даже описывать не буду, т.к. это скрипт на уровне первого класса (выполнен, тоже на уровне первого класса): получил данные, подключился к БД, записал в таблицу. Всё!

Конечно, это не большое достижение, но, все-таки – достижение. А тот факт, что я это все описал в этом посте, еще больше закрепит эти знания в моем прогламмерском мозгу.

Кстати, на фоне моего поста, посвященного первой решенной практической задачке, объявляю акцию:

Если вы учитесь программированию и решаете какие-либо задачи, присылайте их мне, буду их с удовольствием публиковать на рассмотрение всех посетителей блога. Думаю, они будут интересны не только мне!

Удачи!

P.S. Ух! Сколько ж раз я повторяю это слово в своих постах… со счета сбился… Но, КСТАТИ! Мой следующий урок Mootools посвещается именно работе с регулярными выражениями, так что НЕ пропустите!