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

Основы

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

Давайте сразу начнем с кода HTML и CSS. Основным тут является со  здание длинного, прямоугольного блока div (насколько длинный, зависит от того, для чего слайдер будет использоваться) и его дочернего элемента div, который будет служить «захватом» слайдера.

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

А код CSS будет выглядеть немного позамысловатее:

/*Общий стиль для всего слайдера*/
#slider {
	height:20px;
 
    /*Я использовал заранее подготовленные рисунки
    сделанные в великом и могучем Фотошопе*/
 
	background-image:url('images/slider_body_h.png');
	background-repeat:repeat-x;
	background-position:center;
	width:150px;
}
/*Стиль "захвата"-ползунка*/
#knob {
	background-position:center;
	position:absolute;
	z-index:100;
	width: 20px;
	background-image:url('images/knob-20.png');
	background-repeat:no-repeat;
}

Теперь можно смело создавать новый объект Slider, для чего вначале создаем переменные с элементами и потом создаем новый («new«) объект slider, также, как мы это делали с объектами tween, drag.move и morph:

//создаем переменные для наших блоков
var sliderObject = $('slider');
var knobObject = $('knob');
 
//создаем новый объект slider
//но вначале, определяем элементы слайдера
//а потом определяем объект захвата
var SliderObject = new Slider(sliderObject , knobObject , {
    //а вот и параметры
    //ниже каждый из них рассматривается более подробно
    range: [0, 10],
    snap: true,
    steps: 10,
    offset: 0,
    wheel: true,
    mode: 'horizontal',
    //событие onchange запускается тогда, когда значение параметра step изменится
    //и передаст текущее значение этому параметру
    onChange: function(step){
        //сюда вставляем код того, что должно произойти по событию onchange
        //можно ссылаться на параметр step
    },
    //событие onTick передвигается, когда пользователь передвигает захват 
    //и передаст текущее положение (относительно родительского элемента)
    onTick: function(pos){
	//это необходимо для того, чтобы захват настроился
        //ниже остановимся на этом вопросе более подробно
	this.knob.setStyle('left', pos);
    },
    //срабатывает, когда ползунок останавливается
    //и пользователь "отпускает" его
    onComplete: function(step){
        //сюда вставляем код того, что должно произойти по событию onComplete
        //можно ссылаться на параметр step
    }
});

Немного грубовато все получилось, но, надеюсь, далее все прояснится.

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

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

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

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

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

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

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

.set();

Посмотрев на событие на элементе button и мы увидим метод .set() в действии. Он очень прост в использовании: просто вызываем слайдер, добавляем к нему метод .set() и шаг, с которым мы будем двигать бегунок.

window.addEvent('domready', function() {
	var SliderObject = new Slider('slider-h', 'knob-h', {
    	//параметры
		range: [0, 10],
		snap: false,
		steps: 10,
		offset: 0,
		wheel: true,
		mode: 'horizontal',
 
		//функции для ползунковых событий
	    onChange: function(step){
			$('change').highlight('#F3F825');
			$('steps_number').set('html', step);
	    },
    	onTick: function(pos){
			$('tick').highlight('#F3F825');
			$('knob_pos').set('html', pos);
			//эта строчка очень нужна (при горизонтальном режиме изменяется параметр left)
        	//она заменяет значение соответствующего параметра
	        //на значение текущего места "сброса" ползунка пользователем
			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',
    	onTick: function(pos){
			//эта строчка очень нужна (при горизонтальном режиме изменяется параметр top)
    	    //она заменяет значение соответствующего параметра
        	//на значение текущего места "сброса" ползунка пользователем
	        this.knob.setStyle('top', pos);
    	},
		onChange: function(step){
			$('stepsV_number').set('html', step*-1);
	    }
	});
 	//устанавливает начальную точку вертикального слайдера на 0 (ноль)
	//иначе, начальной точкой была бы верхняя точка слайдера
	SliderObjectV.set(0);
 
	//устанавливает шаг слайдера на 7
	$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});

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

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

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

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

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

Основы

Drag.Move

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

var myDrag = new Drag.Move(dragElement, {
	        // параметры класса Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// параметры класса Drag
		handle: dragHandle,
		// событие класса Drag.Move
		onDrop: function(el, dr) {
                        // вызовет предупреждение с атрибутом id сброшенного элемента
                        // в элемент, принимающий сброшенные элементы
                        // (это может показаться запутанным, на первый взглад, но, надеюсь,
                        // далее все проясниться
                        alert(dr.get('id'));
		},
                // События Drag
                // передаются перетаскиваемому элементу
                onComplete: function(el) {
			alert(el.get('id'));
		}
	});

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

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

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

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

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

//определяем один элемент по id, который можно будет перетаскивать
var dragElement = $('drag_element');
//определяем массив элементов по их классу, которые смогут принят сброшенный элемент
var dropElements = $$('.drag_element');
//определяем контейнер
var dragContainer = $('drag_container');
//определяем объект Drag.Move
var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag.Move
                // назначаем элементу droppables массив элементов, определённых немного выше
		droppables: dropElements ,
               // назначаем элементу container элемент, определенный немного выше
		container: dragContainer
	});

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

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

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

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

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

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
	// Параметры Drag.Move
	droppables: dropElements ,
	container: dragContainer ,
	// События Drag.Move
	// функции Drag.Move передадут перетаскиваемый элемент (в данном случае 'el')
	// принимающему элементу, с которым перетаскиваемый взаимодействует (у нас 'dr')
	onDrop: function(el, dr) {
		// на русском: "если элемента, на который происходит сброс НЕ ЯВЛЯЕТСЯ принимающий"
		if (!dr) {
			//ничего не делать
		}
		// в противном случае, т.е. элемент принимающий
		// делать то-то, то-то
		else {
			// действия, который произойдут,
			// когда элемента будет сброшен на принимающий элемент
		};
	},
	onLeave: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// покинет границы принимающего элемента
	},
	onEnter: function(el, dr) {
		// эта функция будет запущена, когда перетаскиваемый элемент
		// входит в границы принимающего элемента
	}
});

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

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

Параметр – snap

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

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		snap: 10
	});

Параметр – handle

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

// определяет массив элементов по классу
// это позволит нам добавить несколько "ручек",
// если нам нужно будет определять несколько передвигаемых элементов
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
	        // параметры Drag
		handle: dragHandle
	});

Событие onStart

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

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onStart: function(el) {
                    // сюда вставляем всё, что должно произойти вначале перетаскивания
               }
	});

Событие – onDrag

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

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onDrag: function(el) {
                    // сюда вставляем всё, что должно происходить во время перетаскивания
               }
	});

Событие onComplete

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

var myDrag = new Drag.Move(dragElement , {
	        // Параметры Drag
		onComplete: function(el) {
                    // сюда вставляем всё, что должно произойти при сбросе элемента
               }
	});

Примеры

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

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

window.addEvent('domready', function() {
	var dragElement = $('drag_me');
	var dragContainer = $('drag_cont');
	var dragHandle = $('drag_me_handle');
	var dropElement = $$('.draggable');
	var startEl = $('start');
	var completeEl = $('complete');
	var dragIndicatorEl = $('drag_ind');
	var enterDrop = $('enter');
	var leaveDrop = $('leave');
	var dropDrop = $('drop_in_droppable'); 
 
	var myDrag = new Drag.Move(dragElement, {
	    // Параметры Drag.Move
		droppables: dropElement,
		container: dragContainer,
		// Параметры Drag
		handle: dragHandle,
		// События Drag.Move
		onDrop: function(el, dr) {
			if (!dr) { }
 
        	        else {
				dropDrop.highlight('#FB911C'); //мигает оранжевым
				el.highlight('#fff'); //мигает белым
				dr.highlight('#667C4A'); //мигает зеленым
			};
		},
		onLeave: function(el, dr) {
			leaveDrop.highlight('#FB911C'); //мигает оранжевым
		},
		onEnter: function(el, dr) {
			enterDrop.highlight('#FB911C'); //мигает оранжевым
		},
		// Drag Events
		onStart: function(el) {
			startEl.highlight('#FB911C'); //мигает оранжевым
		},
		onDrag: function(el) {
			dragIndicatorEl.highlight('#FB911C'); //мигает оранжевым
		},
		onComplete: function(el) {
			completeEl.highlight('#FB911C'); //мигает оранжевым
		}
	});
});

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

body {
	margin: 0;
	padding: 0;
}
 
/* убедитесь в том, что перетаскиваемый элемент умеет "position: absolute"
 а параметры top и left установлены на значения для первоначального положения элемента*/
#drag_me {
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}
 
#drop_here {
	width: 200px;
	height: 200px;
	background-color: #eee;
}
 
/* убедитесь в том, что элемент-контейнер имеет "position:relative" */
#drag_cont {
	background-color: #ccc;
	height: 600px;
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
 
#drag_me_handle {
	width: 100%;
	height: auto;
	background-color: #666;
	cursor:move;
}
 
#drag_me_handle span {
	display: block;
	padding: 5px;
}
 
.indicator {
	width: 100%;
	height: auto;
	background-color: #0066FF;
	border-bottom: 1px solid #eee;
}
 
.indicator span {
	padding: 10px;
	font-size:14px;
	display: block;
}
 
.draggable {
	width: 200px;
	height: 200px;
	background-color: blue;
}

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

<div id="drag_cont">
<div id="start" class="indicator"><span>Начало</span></div>
<div id="drag_ind" class="indicator"><span>Перетаскивание</span></div>
<div id="complete" class="indicator"><span>Завершен</span></div>
<div id="enter" class="indicator"><span>Вход в принимающий элемент</span></div>
<div id="leave" class="indicator"><span>Выход из принимающего элемента</span></div>
<div id="drop_in_droppable" class="indicator"><span>Сброшен в принимающий элемент</span></div>
<div id="drag_me">
<div id="drag_me_handle"><span>ручка</span></div>
</div>
<div id="drop_here" class="draggable"></div>
</div>

Итак, сегодня мы рассмотрим возможности создания спец. эффектов в Mootools из библиотеки эффектов 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();. Можно использовать библиотеку эффектов и переходов для изменения тех самых переводов. Но этот урок и так получается довольно длинным, потому оставим это все на другие уроки.

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

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

Числа

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

rgbToHex()

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

function changeColor(red_value, green_value, blue_value){
  	var color = [red_value, green_value, blue_value].rgbToHex();
   	alert('Конвертируется в : ' + color);
   }
     changeColor('5', '41', '18')

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

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

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

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

toInt()

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

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

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

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

$type()

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

var checkType = function(variable_to_check){
	var variable_type = $type(variable_to_check);
	alert("Данные являются типом : " + variable_type);
}

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

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

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

var toIntDemo = function(make_me_a_number){
	//попробуем сделать число из введенного текста
	var number = make_me_a_number.toInt();
 
	//Если это не срабатывает, устанавливаем число ноль (0)
	if ($type(number) != 'number'){number = 0;}
	alert('Что получилось : ' + number);
}

toIntDemo_2(’613.234?)

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

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

var changeColor_2 = function(red_value, green_value, blue_value){
	//Убедимся в том, что у нас все данные - числа
 
    red_value = red_value.toInt();
    green_value = green_value.toInt();
    blue_value = blue_value.toInt();
    //Устанавливаем значения по умолчанию на всё, что не является числом
 
    if ($type(red_value)   != 'number'){red_value = 0;}
    if ($type(green_value) != 'number'){green_value = 0;}
    if ($type(blue_value)  != 'number'){blue_value = 0;}
    //Вычисляем шестнадцатиричное значение
 
    var color = [red_value, green_value, blue_value].rgbToHex();
    alert('Конвертируется в : ' + color);
}

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

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

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

limit()

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

//вызываем функцию
limit(n1, n2)
//где n1 наименьшее число требуемого диапазона
// а n2 - наивысшее

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

var limitDemo = function(number_to_limit){
	//Получаем число
 
	number_to_limit = number_to_limit.toInt();
 
	//получаем число из требуемого диапазона
	var limited_number = number_to_limit.limit(0, 255);
	alert("Ограничиваем до : " + limited_number);
}

limitDemo(6535634);

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

var changeColor = function(red_value, green_value, blue_value){
	//Убеждаемся, что все данные у нас - это числа
 
	red_value   = red_value.toInt();
	green_value = green_value.toInt();
	blue_value  = blue_value.toInt();
 
	//Устанавливаем значения по умолчанию на все, что не является числом
	if ($type(red_value)   != 'number'){red_value = 0;}
	if ($type(green_value) != 'number'){green_value = 0;}
	if ($type(blue_value)  != 'number'){blue_value = 0;}
 
	//Ограничиваем все до диапазона значений RGB (0 - 255)
 
	red_value   = red_value.limit(0, 255);
	green_value = green_value.limit(0, 255);
 
	blue_value  = blue_value.limit(0, 255);
 
	//Конвертируем в шестнадцатиричную систему
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color); 
}

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

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

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

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

Функция .setStyle();

Эта функция позволяет установить свойства стиля элемента. Все что нужно сделать, это добавить .setStyle() через сивмол точки («.») в конец строки с селектором (или к соответствующей переменной), и она изменит свойства стилей одного элемента или целого массива элементов.

//определяем селектор
//добавляем функцию .setStyle
//задаем необходимое свойство стиля и его значение
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');

<div id="body_wrap">
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
</div>

.getStyle();

Если понимаешь хоть как-то по английски, тут все понятно: функция получает значение свойства стиля элемента (как-то много родительного падежа ).

//вначале объявляем переменную, в которой будет содержаться значение параметра стиля
var styleValue = $'body_wrap').getStyle('background-color');

Если бы мы прогнали этот код по предыдушим HTML строкам, переменная styleValue получила бы значение ‘#eeeeee’.

Получение и установка нескольких значений стиля

setStyles();

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

//начинаем мы с того, что создаем селектор, к которому добавляем, как всегда через точку, функцию
//в данном случае .setStyles();
$('body_wrap').setStyles({
    //шаблон, которого нужно придерживаться: 'свойство': 'значение',
    'width': '1000px',
    'height': '1000px',
    //ВАЖНО: после последнего значения запятую ставить НЕ НУЖНО!
    //это важно для кроссбраузерности приложения
    'background-color': '#eeeeee'
});

Примечание: Вообще не обязательно всегда заключать название свойства стиля в единичные кавычки. Они нужны только тогда, когда в названии свойства есть дефис (-), как, например, в свойстве font-size. Но для того, чтобы исключить возникновение проблем по причине не поставленной кавычки, лучше приучить себя к кавычкам. Потом искать долго, если что .

Еще одно примечание: эта функция предоставляет большую гибкость при определении значений свойств (таких как ‘200px’ или ‘#ffffff’). Помимо возможности передачи обычных текстовых строк, можно также передавать числа без кавычек (которые будут интепретированы как пиксели – px – в большинстве случаев) и переменные:

//эта строчка передает переменной firstBackgroundColor значение в формате ТЕКСТ '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//можно задавать в качестве значения переменной другую переменную
//в данном случае переменная backgroundColor получает значение друго переменной - '#eeeeee'
var backgroundColor = firstBackgroundColor;
//эта строчка передает переменной divWidth значение в формате ЧИСЛО 500
var divWidth = 500;
$('body_wrap').setStyles({
    //в данном случае, переменные - это слова без кавычек
    'width': divWidth,
    //числа - это.... это числа без кавычек
    'height': 1000,
    //другая перменная
    'background-color': backgroundColor,
    //строки - это ряд символов, заключенных в 'единичные кавычки'
    'color': 'black'
});

.getStyles;

Эта функция позволяет получать несколько значений свойств стилей за один раз. Она работает немного иначе, чем мы виделли немного выше, а отличается этот метод тем, что он работает с несколькими наборами данных в формате ключа (свойство стиля) и его значения (значение свойства). Такой набор данных называется ОБЪЕКТОМ, а метод .getStyles(); позволяет легко формировать такие объекты, чтобы потом их также легко использовать.

//вначале нужно объявить переменную для нашего объекта
//потом создать селектор
//добавляем метод .getStykes к селектору
//после чего создаем список названий свойств стиля, разделенных через запятую
//все названия нужно заключать в 'единичные кавычки'
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 
//вначале создаем новую переменную, которая будет содержать значение свойства
//передаем в переменную определенное свойство; 
//ключ объекта/массива и будет названием свойства
//название свойства заключаем в [квадратные скобки]
//не забываем про 'единичные кавычки' для ключа объекта/массива
var bgStyle = bodyStyles['background-color'];

Пример

В этом примере мы потренируемся использовать некоторые методы, рассмотренные в этом уроке, чтобы получать информацию о стилях (.getStyles();) и устанавливать свои стили (.setStyles();). Обращайте больше внимания не на манипуляции со свойствами стилей, а на структуру кода. Для того, чтобы отделить наши функции от события domready, мы передаем им несколько переменных, которые установленны в самом событии domready. А делается это примерно так: как видно вначале идет объявление переменных с функциями, но при этом видно, что функциям передаются переменные, которые объявляются позже, уже в событии domready, где функции, собственно и вызываются, но уже после объявленных переменных. Что-то вроде того…

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

//обратите внимание, что эта функция имеет параметр "bgColor"
//эта функция будет использоваться уже внутри собятия domready
var seeBgColor = function(bgColor) {
	alert(bgColor);
}
var seeBorderColor = function(borderColor) {
	alert(borderColor);
}
 
//тут мы используем еще не объявленную переменную playDiv
//но, так как мы объявим переменную уже в событии domready и
//и это произойдет до того, как мы вызовим эту функцию, ошибки не будет
//плюс ко всему, теперь не нужно использовать селектор несколько раз
//очень полезно когда имеешь дело со сложными селекторами
var seeDivWidth = function(playDiv) {
        //снова получаем стиль
        //но в отличии от метода .getStyles();, который используем позже в domready,
        //тут мы получаем текущее значение параметра стиля
        //это обеспечивает точные значение ширины элемента, передаваемые в оповещение alert 
        //даже когда значения изменяются по ходу работы
		//или после того, как событие domready уже имело место
 
	var currentDivWidth = playDiv.getStyle('width');
	alert(currentDivWidth);
}
 
 
var seeDivHeight = function(playDiv) {
	var currentDivHeight = playDiv.getStyle('height');
	alert(currentDivHeight);
}
 
 
var setDivWidth = function(playDiv) {
	playDiv.setStyle('width', '50px');
}
 
var setBgColor = function(playDiv) {
	playDiv.setStyle('background-color', '#fdd1aa');
}
 
var setDivHeight = function(playDiv) {
	playDiv.setStyle('height', '50px');
}
 
//обратите внимание, что этот параметр на этом этапе может называться как угодно
//он примет любое значение (буть то элемент или еще что-либо) 
//при ее запуске из события domready
 
var resetSIZE = function (foo) {
	foo.setStyles({
		'height': 200,
		'width': 200,
        'background-color': '#fdd1aa'
 
	});
}
 
window.addEvent('domready', function() {
        //в этом примере мы часто используем этот селектор, поэтому проще и экономнее сразу
        //присвоить его переменной
	var playDiv = $('playstyles');
 
        //тут мы создаем объект с несколькими свойствами стиля
 
	var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 
 
        //еще значение стиля можно получить обратившись в объекту со свойствами
        //с соответствующим ключем и назначив результат переменной
	var bgColor = bodyStyles['background-color']; 
 
        //тут используется анонимная функция чтобы иметь возможность передать параметр вне события domready
 
	$('bgcolor').addEvent('click', function(){
		seeBgColor(bgColor);
	});
 
 
	$('border_color').addEvent('click', function(){
                //вместо того, чтобы передавать параметр в доступную переменную,
                //его можно вызвать прямо сюда в алерт
		seeBorderColor(bodyStyles['border-bottom-color']);
	});
 
 
	$('div_width').addEvent('click', function(){
		seeDivWidth(playDiv);
	});
 
 
	$('div_height').addEvent('click', function(){
		seeDivHeight(playDiv);
	});
 
 
	$('set_width').addEvent('click', function(){
		setDivWidth(playDiv);
	});
 
 
	$('set_height').addEvent('click', function(){
		setDivHeight(playDiv);
	});
 
   	$('set_BgColor').addEvent('click', function(){
		setBgColor(playDiv);
	});
 
 
	$('reset').addEvent('click', function(){
		resetSIZE(playDiv);
	});
});

А теперь HTML код:

<div id="playstyles"> </div>
    <br />
    <button id="bgcolor">Получить background-color</button><br />
    <button id="border_color">Получить border-bottom-color</button><br />
    <button id="div_width">Получить width</button><br />
    <button id="div_height">Получить height</button><br />
    <button id="set_width">Установить width на 50px</button><br />
    <button id="set_height">Установить height на 50px</button><br />
    <button id="set_BgColor">Поменять background-color</button><br />
    <button id="reset">Сбросить</button>

И небольшой отрезок нужного нам CSS-кода:

#playstyles {
	width: 200px;
	height: 200px;
	background-color: #eeeeee;
	border: 3px solid #dd97a1
}

Получить background-color – смотрим цвет фона
Получить border-bottom-color – смотрим цвет границы нижней

Получить width – смотрим ширину
Получить height – смотрим высоту
Установить width на 50px – устанавливаем ширину на 50 пикселей
Установить height на 50px – устанавливаем высоту на 50 пикселей

Поменять цвет фона – меняем цвет фона на ‘#fdd1aa’
* Замечу, что несмотря на то, что после смены габаритов нашего объекта, кнопки, полчающие эти габариты, получают правильные значения (ширина = длина = 50px), кнопка получения цвета фона не прокатывает. По каким-то причинам (по каким, я не разобрался), код возвращает изначально установленный цвет фона объекта. Потому, будьте осторожны, если придется что-то подбное использоваться в ваших проектах!
Сбросить

А что же дальше?…

В 8-м уроке я планирую рассказать о том, как работать с числами, а именно о большинстве методов и функций в Mootools 1.2, предназначенных для работы с числами. Не забудьте подписаться на RSS, чтобы первыми прочитать следующий урок!

В предыдущих уроках мы рассмотрели возможности выбора элементов DOMа страницы, как создавать массивы, функции, как создавать прослушку событий для определенных элементов DOMа, ну а в этом уроке мы заглянем еще глубже в то, какие возмоности манипулирования элементами HTML скрывает в себе Mootools библиотека 1.2. Я уже, наверное, не раз говорил, насколько мощные возможности скрывает в себе легкая библиотека Mootools 1.2, но хочу еще раз напомнить о том, что с ее помощью можно добавлять новые элементы в вашу страницу, удалять ненужные и изменять их стиль или параметры, и все это «налету».

Основы

.get()

Этот метод позволяет получать доступ к атрибутам элементов. Ипользование метода довольно просто:

//этот код вернет название тега элемента с id "id_name"
$('id_name').get('tag');

<div id="body_wrap">
    <span>Element</span><!-- код, указанный выше, вернул бы "span" -->
</div>

С помощью .get() можно получить не только название HTML тегов, но и такие аттрибуты, как id, name, value, href, src, class (вернет все классы, если элементу присвоенны несколько), с помощью ключевого слова text можно получить текстовое
содержимое элемента, а также многое другое.

.set()

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

//этот код установит атрибут href элемента с id #id_name на "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

<div id="body_wrap">
    <!-- код, указанный выше изменить атрибут href на "http://www.google.com  -->
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>
</div>

.erase()

Метод .erase() позволяет удалить значение атрибута. Он работает также, как и предыдущие два: выбираете элемент, потом выбираете какой атрибут нужно удалить.

//этот код удалит значение атрибута href элемента с ID #id_name
$('id_name').erase('href');

<div id="body_wrap">
    <!-- код, указанный выше удалит значение атрибута href -->
    <a href="http://www.yahoo.com">Search Engine</a>
</div>

Передвижение

.inject();

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

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

Этот код вставляет html код в переменные, что делает более легким их использование в Mootools.

<div id="body_wrap">
    <div id="elemA">A</div>
    <div id="elemB">B</div>
    <div id="elemC">C</div>
</div>

А теперь, чтобы изменить порядок сортировки элементов, можно использовать метод .inject() одним из четырех способов. Можно вставить элемент в:

• в конец (bottom) (по умолчанию)
• в начало (top)
• до элемента (before)
• после элемента (after)

Атрибуты bottom и top установят элемент в верхнюю или нижнюю часть выбранного элемента-контейнера. Атрибуты before и after, с другой стороны, установят необходимый элемент до или после другого элемента.

Итак, давайте изменим порядок элементов на A-C-B. Так как нам не нужно вставлять один элемент во внутрь другого, мы будем использовать атрибуты before и after.

//на человеческом языке звучит так:  вставить элемент C перед элементом B
elementC.inject(elementB, 'before');
//На русском:  вставить элемент B после элемента C
elementB.inject(elementC, 'after');

Создание новых элементов

new Element

Конструктор «new Element» можно использовать для того, чтобы создать новый элемент на вашей HTML странице. Процесс очень напоминает написание обычного HTML кода, с тем отличием, что мы исправим синтаксис, чтобы он был совместим с Mootools:

//вначале, вы присваиваете новой переменной значение "new Element"
//в которой и будет содержаться информация о новом элементе (div, a, span и т.д.)
var newElementVar = new Element('div', {
    //тут обозначаются все атрибуты элемента
    'id': 'id_name',
    'text': 'Я новый блок div',
    'styles': {
        //тут можно указать все параметры стиля элемента
        'width': '200px',
        'height': '200px',
        'background-color': '#eee',
        'float': 'left'
    }
});

Смотрите, у нас получился элемент, который можно вставить в какое-либо место, с помощью методов, которые мы рассмотрели чуть чуть ранее. Давайте начнем с такого простого примера HTML:

<div id="body_wrap">
    <div id="content_id">Тут у нас какое-нибудь содержимое</div>
</div>

Теперь конвертируем элемент #content_id в переменную:

var bodyWrapVar = $('body_wrap');

Аналогично тому, что мы рассмотрели немного ранее, мы можем вставлять созданные элементы в код страницы:

//на человеческом языке, звучит так: "вставить сверху bodyWrapVar элемент newElementVar"
newElementVar.inject(bodyWrapVar, 'top');

Таким образом, конечный результат выглядел бы так:

<div id="body_wrap">
    <!-- этот элемент был добавлен в верхнюю внутреннюю часть элемента-контейнера -->
    <div id="id_name">Новый блок</div>
    <div id="content_id">Какая-то муть</div>
</div>

Пример

Например, давайте создадим форму, которая бы позволяла добавлять новый элемент на страницу. Для начала, сделаем несколько полей input и кнопку button.

<div id="body_wrap">
        ID:  <input id="id_input" name="id" />
        text:  <input id="text_input" name="text" />
        <button id="new_div">create a new div</button>
</div>

А теперь напишем и код JavaScript Mootools, который позволит нам вставлять новые элементы в нашу страницу. Для начала добавим прослушку кнопки на предмет клика и создадим функцию с этим кодом:

var newDiv = function() {
    //в этой функции мы разместим код вставки нового элемента
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Затем нужно определиться с тем, какими переменными мы будем оперировать. Для того, чтобы использовать данные из форм input, нам нужно получить к ним доступ, а этим займется метод .get(); и его параметр value, который отвечает за значение того или иного элемента:

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

Теперь эти переменные, idValue и textValue, содержат значения соответствующих полей input. Так как нам нужно взять значение полей input тогда, когда пользователь кликает по кнопке «Создать новый div», нам нужно вставить этот код в функцию newDiv();, определенную немного ранее. Если бы мы брали значения вне функции,
действие бы происходило при загрузке страницы, а не при клике.

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ну а дальше нам нужно будет схватить элемент, в который мы хотим вставить новый блок div:

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

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

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
 
 
    var newElementVar = new Element('div', {
        //эта строка устанавливает id элемента на значение поля <code>input</code>
    	'id':	 idValue,
        //эта строка передает значение поля <code>input</code>
        //для создания внутреннего текста блока
    	'html': textValue
    });
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ну, а теперь нам остается только вставить новый элемент в нашу страницу:

var newDiv = function() {
	//обратите внимание, что идет запрос на элемент с id="newElementContainer",
	//что означает, что такое элемент (в нашем случае, блок DIV),
	//должен быть заблаговременно создан
	var bodyWrapVar = $('newElementContainer');
 
	var idValue = $('id_input').get('value');
	var textValue = $('text_input').get('value');
 
 	var newElementVar = new Element('div', {
    	        'id': idValue,
    	        'text': textValue
	});
    //на русском это звучит так: вставить переменную newElementVar
    //в верхнюю часть внутри элемента bodyWrapVar
 
	newElementVar.inject(bodyWrapVar, 'top');
};
 
var removeDiv = function() {
    //эта строка удаляет внутренний html код
    //(все, что находится внутри тега div)
	$('newElementContainer').erase('html', '');
}
 
window.addEvent('domready', function() {
 
   $('new_div').addEvent('click', newDiv);
   $('remove_div').addEvent('click', removeDiv);
});

ID:

текст:

создать блок
убрать все новые блоки

(а не попробовать ли слово “mootools” для ID? =) )

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

Единичный клик левой кнопкой мыши

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

//$('id_name') определяет элемент
//.addEvent добавляет событие
//('click') определяет тип события)
$('id_name').addEvent('click', function(){
//сюда вставляется код, который будет выполнятся при указанном событии)
alert('Теперь и по этому элементу можно кликнуть!')
});

Тоже самое можно сделать и так:

var clickFunction = function(){
    //тут вы пишите код того, что должно произойти
 
    alert('этот элемент отслеживает клик');
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('click', clickFunction);
});

<body>
    <div id="id_name"> <! -- этот элемент будет отслеживать клик по нему -->
    </div>
</body>

Примечание: Также как и аналогичное событие у гиперсслок, событие клика в Mootools, на самом деле, распознает событие поднятия кнопки («mouse up»), что означает, что событие произойдет только после того, как пользователь отпустит кнопку мышки, а не когда нажмет на нее. Это делается для того, что бы дать пользователю возможность передумать убрав курсор мышки с элемента и отпустив кнопку уже вне его.

События «mouseenter» и «mouseleave»

Как многим, я думаю, известно, ссылки в тексте HTML могут распознавать событие ‘hover’, что является ни что иное, как наведение курсором мышки на ссылку. С помощью Mootools аналог события ‘hover’ можно добавить и другим элементам DOMа, не только ссылкам. Более того, события Mootools разделены на два «подсобытия»:  mouseenter (наведение курсора) и mouseleave (корсор убирается), что придает больший контроль над элементами DOMа при взаимодействии с пользователями.

Как и ранее, первым делом добавляем «прослушивание» элемента на определенное событие.

var mouseEnterFunction = function(){
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает наведение курсора мышки');
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
});

Событие «mouseleave» работает аналогично:

var mouseLeaveFunction = function(){
    //тут вы пишите код того, что должно произойти
    alert('этот элемент распознает отсутствие курсора мышки');
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

Удаление события

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

//робаетт также, как и предыдущие примеры,
//только метод addEvent заменяется на removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Для создания «прослушек» других событий, например нажатий клавиш «Control» или «Shift», синтаксис немного отличается:

var keyStrokeEvent = function(event){
    // а дальше написано вот что: "если нажатая кнопка была Shift, нужно сделать вот что"
    if (event.shift) {
	    alert("Вы нажали на Shift!")
    };
}
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
});

<div id="body_wrap">
    <textarea id="myTextarea"></textarea>
</div>

Вкусности

Вот несколько рабочих (вроке как) примеров кода, которые мы только что обсуждали:

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

var keyStrokeEvent = function(event){
    // вот тут говориться, что если нажатой кнопкой была буква k (лаинская, маленькая), вот что нужно сделать
    if (event.key == 'k') {
	    alert("Этот урок стал возможен только благодаря латинской букве 'k'.")
    };
}
 
var mouseLeaveFunction = function(){
    //сюда можно вставить все, чтобы вы хотели, чтобы страница делала при этом событии
    alert('этот элемент теперь распознает, когда курсор его покидает');
}
 
var mouseEnterFunction = function(){
    //сюда тоже самое
    alert('этот элемент теперь видит, когда на него наводится курсор');
}
 
var clickFunction = function(){
    //и сюда
    alert('теперь этот элемент распознает клик по себе');
}
 
window.addEvent('domready', function() {
    $('click').addEvent('click', clickFunction);
    $('enter').addEvent('mouseenter', mouseEnterFunction);
    $('leave').addEvent('mouseleave', mouseLeaveFunction);
    $('keyevent').addEvent('keydown', keyStrokeEvent);
});

<div id="click" class="block">Левый клик</div><br />
<div id="enter" class="block">Курсор наведен</div><br />
<div id="leave" class="block">Курсор убран</div><br />
<textarea id="keyevent">Введите латинскую букву k</textarea>

Введите латинскую букву k

Добро пожаловать на 4-й урок нашего «курса молодого бойца». Если вы впервые на моем блоге и сразу попали на эту страницы, то вам стоит посмотреть предыдущие уроки из этой серии. Сегодня мы пойдем немного не по тому пути, т.к. пройдемся немного по основам функций в JavaScript.

Однако, не отходя все таки далеко от нашей основной темы – Mootools – вы должны помнить, где должен находится код ваших функций для использования в Mootools. В одном из наших предыдущих уроков мы рассматривали примеры использования функций внутри события domready.

В основном, конечно же, считается хорошим «программистским» тоном хранить все свои функции вне страницы с HTML кодом и вызывать их с помощью ссылок на js-файлы. Хотя с другой стороны, многие программисты не любят разбрасывать свой код по нескольким файлам, так как потом легче все найти, когда это все на одной странице. В наших уроках мы будем использовать такой шаблон объявления функций и их вызова из события domready:

<script type="text/javascript">
	/* * Тут определяется функция */
	window.addEvent('domready', function() {
		/* *Вызовы функции */
	});
</script>

Все примеры, представленные в этом уроке, используют этот шаблон. Как ни странно, она работают нормально (с условием, что в самом коде ошибок нет!). Под некоторыми примерами есть также и кнопки, с помощью которых можно испытать работоспособность этих примеров. Обращаю внимание на то, что в некоторых функциях я использовал обработчики событий (event handlers), о которых расскажу в следующем уроке.

Основы

В JavaScript существует несколько методов определения функций, а так как мы тут собрались поучить Mootools, будем использовать любимый метод разработчиков этой библиотеки. В следующем примере показана самая простая функция. Мы объявляем переменную, называем ее simple_function и определяем ее как функцию:

var simple_function = function() {

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

alert('Самая обычная и простая функция');

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

}

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

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

//Определяем функцию simple_function
var simple_function = function(){
	alert('Самая обычная и простая функция');
}
 
window.addEvent('domready', function() {
	//Вызываем нашу функцию по загрузке DOMa(страницы)
    simple_function();
});

Тестируем простую функцию

Функция с одним параметром

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

var имя_функции = function(имя_параметра){
	/*сюда вставляется код функции*/
}

Т.е. это я и многие другие привыкли так объявлять функции (я говорил об этом выше). В JavaScript параметры находятся также в круглых скобках, тогда как скобки находятся после названия функции, как тут:

function имя_функции (имя_параметра) {
	/* код функции */
}

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

В следующем примере, мы определим функцию, которая будет запрашивать только один параметр (с названием parameter) и вызывает предупреждение (alert()) с этим параметром. Несмотря на то, что первая часть сообщения заключается в единичные кавычки, параметр передается без них. При использовании параметров в сочетании со строками (как в нашем случае), их нужно соединять оператором «+», как это показано в примере:

var single_parameter_function = function(parameter){
	alert('наш параметр : ' + parameter);
 
window.addEvent('domready', function single_parameter_function('Вот это параметр');
 
});

Функция с одним параметром

Передача нескольких параметров

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

var third_number = first_number + second_number;

А после этого используется тот же оператор «+», только уже в другом качестве, чтобы соединить результат в текстовую строку:

alert(first_number + " плюс " + second_number + " равно " + third_number);

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

var two_parameter_function = function(first_number, second_number){
    //Получаем сумму первого и второго числа
    var third_number = first_number + second_number;
	//Отобразить результат
	alert(first_number + " плюс " + second_number + " равно " + third_number);
}
 
window.addEvent('domready', function(){
	two_parameter_function(10, 5);
});

Функция с двумя параметрами

Возврат значений

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

return third_number;

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

var two_parameter_returning_function = function(first_number, second_number){
	var third_number = first_number + second_number;
    return third_number;
}
 
window.addEvent('domready', function(){
	var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

Функция с двумя параметрами с возвратом результата

Использование функции как параметра

Событие domready использует в качестве параметра функцию:

window.addEvent('domready', function(){
	/*ваш код*/
});

Функция, передаваемая в качестве параметра, как показано в примере, называется анонимной функцией

function(){
	/*ваш код*/
}

И, раз уж зашел разговор о событии domready, отмечу еще один (к уже указанным двум в первом уроке) метод объявления функций в событии domready:

//создаем функцию для вызова в событии domready
var domready_function(){
	/* ваш код */
}
 
//Назначаем созданную функцию в параметры события
window.addEvent('domready', domready_function);

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

Примеры

Итак, переходим к самой вкусной части этого урока! Предлагаю поиграть с цветом фона одного из блоков на этой странице. Это, конечно, абсолютно бессмысленно, но полезно, с точки зрения понимания того, что можно творить с помощью Mootools или JavaScript. Код в студию:

var changeColor = function(){
 
    //Используем метод get чтобы получить значение цвета из текстовых блоков
    var red = $('red').get('value');
    var green = $('green').get('value');
    var blue = $('blue').get('value');
 
    //Убедимся, что все значения будут в формате целых чисел (метод toInt)
    red = red.toInt();
    green = green.toInt();
    blue = blue.toInt();
 
    //Убедимся, что каждое число - это значение между 1 и 255
    //при необходимости, округляем (метод limit)
    red = red.limit(1, 255);
    green = green.limit(1, 255);
    blue = blue.limit(1, 255);
 
    //преобразовываем формат цвет из RGB в 16-ричную систему исчисления (метод rgbToHex)
    var color = [red, green, blue].rgbToHex();
 
    //устанавливаем цвет блока (метод setStyle)
    $('body_wrap').setStyle('background', color);
}
var resetColor = function(){
 
	//вернуть белый цвет блока
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    //Добавляем события click к каждой кнопке
    //(метод addEvent - подробнее об этом поговорим в следующем уроке
    //который будет готов очень скоро)
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});

Основы

.each();

.each(); – это ваш лучший друг при работе с массивами; это лучший способ применять любую функцию к каждому элементу массива. Например, скажем существует необходимость создать предупреждение alert(); для каждого div-а на странице:

$$('div').each(function() {
	alert('ДИВик');
});

А с таким кодом HTML предыдущий код показал бы два предупреждения, по одному на каждый div.

<div>Один</div>
<div>Два</div>

.each(); не обязывает к использованию $$. Другой метод создания массива (как мы и говорили на прошлом уроке), это использование .getElements();.

$('body_wrap').getElements('div').each(function() {
	alert('ДИВик');
});

<div id="body_wrap">
	<div>Первый</div>
	<div>Второй</div>
</div>

Еще одни способ выполнить ту же задачу, это назначить массив переменной, после чего применить к ней метод .each();

//вначале следует объявить переменную с помощью ключевого слова var:
//"var ИМЯ_ПЕРЕМЕННОЙ_ЛАТИНСКИМИ_БУКВАМИ"
//за которым последует символ "=", который и определяет данные объявленной переменной,
//в нашем случае, это массив элементов div
 
var myArray = $('body_wrap').getElements('div');
//теперь можно использовать эту переменную с массивом также,
//как и селектор массивов, рассмотренный ранее
 
myArray.each(function() {
	alert('ДИВик');
});

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

var myArray = $('body_wrap').getElements('div');
 
//чтобы создать новую функцию, нужно, также, как и в случае с переменными,
// объявить переменную, дав ей имя
//а после знака равно, нужно ввести ключевое слово "function()",
//чтобы объявить, что переменная – это функция
//после чего нужно поместить код функции в фигурные скобки ("{...}")
 
var myFunction = function() {
	alert('ДИВик');
};
//а далее нужно просто вызвать функцию внутри метода .each();.
 
myArray.each(myFunction);

Примечание: При вызове функции так, как мы это сделали в методе .each();, имя функции заключать в кавычки не нужно!

Копирование массива

$A

Библиотека Mootools предоставляет разработчикам простой способ копирования массивов с помощью функции $A. Давайте назначим массив переменной, как мы это сделали выше:

//создайте свою переменную с массивом
 
var myArray = $('body_wrap').getElements('div');

Для копирования массива нужно:

//создать новую переменную и скопировать в нее массив "myArray"
 
var myCopy = $A(myArray);

Теперь переменная myCopy содержит теже элементы, что и переменная myArray.

Выбор определенного элемента в массиве

.getLast();

.getLast(); вернет последний элемент массива. После создания массива:

var myArray = $('body_wrap').getElements('div');

можно выбрать его последний элемент.

var lastElement = myArray.getLast();

Переменная lastElement теперь является последним элементом массива myArray.

.getRandom();

Работает аналогично методу .getLast();, за исключением того, что произвольно выбирает элемент массива.

var randomElement = myArray.getRandom();

Переменная randomElement теперь является произвольно выбранный элемент массива myArray.

Добавить элемент к массиву

.include();

С помощью этого метода можно легко добавлять элементы в массив. Все, что нужно сделать, это вставить необходимый элемент в скобки метода .include(); и присоединить всю конструкцию к массиву. С помощью следующего HTML кода

<div id="body_wrap">
	<div>первый</div>
	<div>второй</div>
   	<span id="add_to_array">добавить в массив</span>
</div>

можно создать такой же массив, как мы создавали и чуть выше, вызвав все divы, находящиеся в элементе ‘body_wrap’.

var myArray = $('body_wrap').getElements('div');

Чтобы добавить элемент в уже соществующий массив, вначале нужно назначить для этого элемента переменную, а потом уже использовать метод .include();.

//вначале определяем переменную для элемента, который хотим добавить в массив
 
var newToArray = $('add_to_array');
 
//после чего добавляем переменную в массив
 
myArray.include(newToArray);

А теперь в нашем массиве находятся все элементы div и span.

.combine();

Этот метод работает также, как и .include();, с тем исключением, что позволяет добавить данные одного массива в другой, без того, исключая при этом дуплирование информации. Стоит также отметить, что метод .combine(); является чувствительным к регистру, поэтому нужно быть внимательным при ее использовании. Предположим, у нас было создано 2 массива из следующего HTML кода:

<div id="body_wrap">
	<div>первый</div>
	<div>второй</div>
    <span class="class_name">добавляем в массив</span>
    <span class="class_name">и это туда же</span>
    <span class="class_name">снова туда же</span>
</div>

После чего мы может создать следующие два массива:

//создаем массив, так же, как мы это делали и ранее
 
var myArray = $('body_wrap').getElements('div');
 
//потом, создаем массив из всех элементов с классом .class_name
 
var newArrayToArray = $$('.class_name');

Теперь мы можем использовать .combine(); чтобы комбинировать два созданных массива. Этот метод также исключит дубликаты информации.

//а потом комбинируйте переменную newArrayToArray c myArray
 
myArray.combine(newArrayToArray);

Теперь массив myArray содержит все элементы массива newArraytoArray.

Примеры

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

//создает массив всех жлементов в элементе #body_wrap классом .class_name
 
var myArray = $('body_wrap').getElements('.class_name');
 
//вначале создадим новый элемент, который потом добавим к нашему массиву 
 
var addSpan = $('addtoarray');
 
//а теперь создадим новый массив, который скомбинируем с нашим массивом
 
var addMany = $$('.addMany');
 
//теперь можно добавить в массив элемент span
 
myArray.include(addSpan);
 
//и комбинировать массив addMany с массивом myArray myArray.combine(addMany);
//теперь создадим функцию, которая пройдется по всем элементам (ITEM) массива
 
var myArrayFunction = function(item) {
 
//ключевое слово item теперь относится к текущему элементу в массиве,
//к которому применяется функция
	item.setStyle('background-color', '#eee');
}
 
//теперь вызовем созданную функцию myArrayFunction для каждого элемента в массиве
//с помощью метода EACH
 
myArray.each(myArrayFunction);

<div id="body_wrap"> 
	<div class="class_name">первый</div>
    <div>второй</div> 
    <div class="class_name">третий</div>
    <span id="addtoarray">добавить в массив</span>
    <span class="addMany">один из нескольких</span>
    <span class="addMany">второй из нескольких</span></div>

Закругляемся…

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

А что будет завтра?

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

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

Я пока все еще работаю над pdf-изацией всех документов на docs.mootools.net, но все равно рекомендую там иногда появляться и просматривать предназначения тех многочисленных функций и методов, которые предоставили нам разработчики Mootools. Я это тоже иногда делаю. Кстати, несмотря на полное отсутствие внимания к деталям, я недавно сделал небольшой скриптик, написанный на чистом Mootools, который заменяет цены на странице, в соответствии с введенным курсом обмена валют по ЦБ. Еще планирую автоматизировать этот процесс, что б скрипт сам откуда то брал нынешний курс валют… Если кому-то это интересно, могу выложить код, хотя, я уверен, все уже и так продвинулись дальше меня в этом всем .

Как всегда, всем удачи в начинаниях!