Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

Управление HTML элементами DOMа с помощью Mootools 1.2

В предыдущих уроках мы рассмотрели возможности выбора элементов 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': 'I am a new 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? =) )