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

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

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

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

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

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

Основы

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 ленту.

Мои мысли по этому поводу таковы: «ТЫ ЧТО ДУРА!!!!!?????» как же так можно, а? нужно ж иметь хоть немного здравого смысла, чтоб полезть на скоростное шоссе… интересно, если у нас, Google Maps.RU вдруг проложит маршрут по МКАДу, неужели кто-то попрет туда пешком? ДА НИКОГДА! С таким же успехом можно подавать в суда на прохожего, который тебя не туда послал… «Господин судья, господа присяжные, я – истец, обвиняю ответчика в том, что, когда я спешил на собеседование на должность ген. директора ЛУКОЙЛ, не зная, где вход, попросил у ответчика подсказать где этот самый вход находится и он направил меня в другом направлении. В результате я опоздал на собеседование и не получил должность, соответственно, потерял недвижимость по всему миру, целый автопарк коллекционного авто, дети мои не пошли учиться в кембридж…. Прошу передать жизнь ответчика в мое личное пользование…»
Ситуация моя, конечно, из воздуха, но и гражданка США тоже удивила своей глупостью… В принципе, там многие такие, к сожалению… Смотрела бы на знаки, сэкономила бы себе кучу времени…
Люди, используйте карты гугл не забывайте использовать также и свои глаза, уши… Не пренебрегайте сигналами, которые они посылают в мозг, анализируйте их и выстраивайте собственные маршруты, если того требует ситуёвина… Удачи!

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

// определяем функцию
var execute = function(){
  $('result').set('text', 'функция execute выполнена');
}
 
//определяем условия ее выполнения
window.addEvent('domready', function(){
    $('exec').addEvent('click', execute);
});

Выполнить execute

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

(function(){
 
// определяем действия в функции
 
})();
//скобки говорят обработчику, что нужно сразу выполнить фунцию,
//определённую немного ранее

Почему я вспомнил, про интерактивные закладки? Потому что они построенны на базе таких функций и когда я пытался понять их структуру и логику, я задавал себе вопрос «зачем там скобки и что они делают?». Вот оно, как просо оказалось.

Пока мне в голову пришел только один пример работы самовыполняющейся функции: добавим еще несколько строчек JavaScript к нашему предыдущему примеру с функцией execute и, через setTimeout() добавим самовыполняющуюся функцию, которая изменит результат выполнения предыдущей функции execute через 2 секунды, потому обратите внимание на текст сообщения над кнопкой вызова. А вот, собственно, и сам код:

var execute = function(){
  $('result').set('text', 'функция execute выполнена');
}
 
var unexecute = function(){
  $('result2').set('text', 'функция execute выполнена');
  setTimeout((function(){
    $('result2').set('text', 'и через 2 секунды определяется и самовыполняется функция unexecute')
  }), 2000)
}
 
window.addEvent('domready', function(){
		$('exec').addEvent('click', execute);
		$('unexec').addEvent('click', unexecute);
	});

Выполнить unexecute

В этой задаче мне пришлось также столкнуться с объектом 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 посвещается именно работе с регулярными выражениями, так что НЕ пропустите!

С 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>

Хочу поделиться опытом! Я давно хотел научиться делать интерактивные закладки, чтобы размещать их на панели закладок браузера, но, к сожалению, пока этого так и не сделал…

Зато, я подсмотрел, как это делается у всяких сервисов, как, например, у сервиса автоматического постинга в различные сервисы закладок – bposter.net, и теперь, как минимум, могу просто их изменять и приспосабливать под собственные нужды. Но, обо всем по порядку…

Вначале, напомню, кто такая эта панель, да еще и закладок. В Win Safari она выглядит так:

Для тех, кто пока не рассмотрел и не особо понял, что это, пожалуйста:

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

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

- открыть сервис;

– возможно, yahoo.com попросит авторизоваться;

- набрать адрес сайта, инфу о котором требуется узнать;

- нажать на кнопку «Inlinks», чтобы перейти на отображение не кол-ва страниц в кэше Яху, а на, собственно, информацию об обратных ссылках;

- выбрать опцию «Except from this domain» (Кроме этого домена), чтобы исключить ссылки с этого домена;

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

Чтобы исключить всё это, требуется всего-лишь немного наблюдательности. Например, перетащите эту ссылку -

Обратные ссылки по SiteExplorer

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

А вот и сам код ссылки:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

Что в коде? Первым словом в атрибуте href идет слово javascript, которое сообщает браузеру, что ссылка – это JavaScript код. Далее – функция, которая открывает новое окно, вставляя имя домена (document.domain) текущего документа «куда надо». (По сути, такая ссылка действует также, как и ссылка вида javascript:history.back().) Если вместо window.domain использовать метод location.href, в открывшейся вкладке (окне), будут показаны обратные ссылки только на открытую страницу.

Вот еще несколько закладок, которые я уже соорудил (если кому что нужно, перетягивайте ссылку в панель закладок):

• Посмотреть, есть ли страница в индексе Яндекса:

Индекс Яндекса

Исходник:

javascript:(function(){window.open('http://www.yandex.ru/yandsearch?serverurl='+encodeURIComponent(location.href));})();

• Количество страниц с домена в индексе Google:

# страниц в гугле

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=site:'+encodeURIComponent(document.domain));})();

• Есть ли страница в индексе Google:

Есть ли в кэше гугла?

Исходник:

javascript:(function(){window.open('http://www.google.ru/search?q=cache:'+encodeURIComponent(location.href));})();

Вообще, каждый, у кого есть плагин SearchStatus для Firefox, может проверить наличие страницы в кэше Гугла, но, может кому и пригодится такая закладка.

• Постинг в закладки через сервис bposter.net:

В закладки!!!

Исходник:

javascript:(function(){window.open('http://www.bposter.net/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&desc='+encodeURIComponent(window.getSelection?window.getSelection():''));})();

Тут следует отметить, что я этот код совсем не придумывал, а просто заменил метод location.href на window.open, чтобы открывалась новая закладка (или окно, в зависимости от настроек браузера).

• Обратные ссылки по SiteExplorer.search.yahoo.com на весь сайт:

Обратные ссылки на сайт

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(document.domain)+'&bwm=i&bwmo=d&bwmf=s');})();

• Обратные ссылки по SiteExplorer.search.yahoo.com на данную страницу:

Обратные ссылки на страницу

Исходник:

javascript:(function(){window.open('http://siteexplorer.search.yahoo.com/search?p='+encodeURIComponent(location.href)+'&bwm=i&bwmo=d&bwmf=u');})();

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

Ну вот, пока это все закладки, да и все, что я хотел тут написать. По мере того, как у меня будут появляться такие закладки, обязательно буду ими делиться через эту страницу.

Всем удачи в своих открытиях!

Некоторые из пунктов очень очевидны, думаю, только ленивый СЕО-работник не использует их, а некоторые раскрыты только потому, что они уже и так слишком раскрыты. Я имею ввиду, ну вот зачем раскрывать всем, что с домена nytimes.com (а точнее с одного из его поддоменов), либо с форума на поддомене sourceforge.net можно получить ссылку без nofollow? А только потому, что там этих ссылок уже и так уйма, и добавлять еще и себя туда, среди виагры, порнухи, таблеток и фармы абсолютно не нужно – такая ссылка, мне кажется, только навредит. Сами посудите: вот одна страница, вот другая. Эти страницы о PECL, а то, что там вылазят ссылки на всякие нечистоты – уже не хорошо, и даже если там вдруг появится ссылка на сайт/страницу/статью про PECL – сомневаюсь, что она даст ее владельцу серьезный вес, т.к. вся страница уже с черной пометкой «spam page» где-то там, в недрах гугловской БД и Гугл либо не учитывает эти ссылки при ранжировании, либо просто выбросил ее из свой выдачи.

Что касается ссылок с остальных доменов – мне думается, они рано или поздно все равно утратят свою значимость при ранжировании, но пока, естественно, можно их и попользовать. Например, можно, добавить ссылку на сайт в профиль при регистрации на форуме sourceforge (вообще, это нужно делать всегда, при регистрации на любом форуме), можно/нужно добавить ссылку на что-то продвигаемое в подпись, но и нужно потом использовать этот профиль, нужно быть активным форумчанином, чтобы эти ссылки имели хоть какую-то значимость. Еще раз, в качестве примера, возьмем уже упомянутый форум на поддомене sourceforge.net – http://ettercap.sourceforge.net/forum/. Я не поленился и посмотрел на список форумчан. Судя по их количеству – определенно очень популярный форум. 28419 пользователей. А между тем, кто-нибудь слышал про такую программульку, как Ettercap? Если кто не в курсе, вышла версия 0.7.3!!! Оказалось, что 27093 пользователя не написало ни одного сообщения (хотя, самые отпетые спамеры умудрились зарегистрироваться еще в 2001 году – они не оставили ни одного сообщения, но у них есть интересные сайты про фарм). Вопрос в том, стоит ли тратить время, на то, чтобы зарегистрироваться на форуме только ради того, чтобы получить одну ссылку, которая, скорее всего, уже никогда не проиндексируется из-за большого количества спаммынх ссылок? Длинный вопрос получился…

Ради чего я всего это написал? Просто хотел поделиться мыслью о том, что реально полезной информации на тему СЕО мало. Публикуется, в основном то, что опытные СЕО-специалисты уже испробовали и им это результата не дало, либо метод исчерпал себя. Они публикуют метод на своем блоге, получают кучу благодарностей в комментариях, трафика и доход с рекламы на блоге. Конечно же, отнюдь не все методы, публикующиеся на СЕО блогах – фальшивки. Например, я подписан на RSS блога Михаила Шакина – shakin.ru (Михаил мне, вообще, кажется, талантливым писателем, т.к. он не только про Интернет интересно пишет, но и просто про жизнь), и блога известного Рунет деятеля Димка (моего тезки, только меня просто Дима зовут ), который недавно получил от WebmastersWorld мою любимую игрушку – МакБук Pro.

Итого: верить всему, что написано в СЕО статьях и блогах, мне кажется, не нужно. Главное в этой сфере – умение анализировать факты! Почитал, проанализировал. При необходимости, проверил, протестировал. Слепо верить и следовать всему, что пишут в Интернете – не всегда верно и не всегда полезно. Так что моим ответом на вопрос в заголовке будет таким: Нужно думать самому.. ]]> http://php.infoniac.ru/question-how-to-get-links-from-popular-domains.html/feed 2 http://php.infoniac.ru/fx-morph-fx-options-fx-events-day11.html http://php.infoniac.ru/fx-morph-fx-options-fx-events-day11.html#comments Thu, 17 Dec 2009 19:09:59 +0000 proglammer http://php.infoniac.ru/?p=586 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 из библиотеки эффектов 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();. Можно использовать библиотеку эффектов и переходов для изменения тех самых переводов. Но этот урок и так получается довольно длинным, потому оставим это все на другие уроки.

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