Mootools 1.2 за 30 дней — День 6 — Управление элементами HTML


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

Добро пожаловать на 6 день курса «Mootools 1.2 за 30 дней». Если вы еще не читали первые дни, то можете сделать это сейчас «Обучающий курс по библиотеке Mootools. День 1».

Mootools 1.2 за 30 дней

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

Основы

.get()

Этот метод позволяет получить значение свойства элемента. Для каждого из элементов HTML свойства различаются, это можем быть: src, value, name и другие. Использовать метод .get() очень просто:

  1. <div id="body_wrap">
  2.   <!— для этого кода будет возвращено "span" —>
  3.   <span id="id_name">Element</span>
  4. </div>
  1. //в данном примере возвращается html тэг (div, a, span…)
  2. //элемента с id "id_name"
  3. $('id_name').get('tag');

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

  • id;
  • name;
  • value;
  • href;
  • src;
  • class (если элемент имеет несколько классов, то метод вернет их все);
  • text;
  • и так далее…

.set()

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

  1. <div id="body_wrap">
  2.   <!— заменяем ссылку на http://www.google.com —>
  3.   <a id="id_name" href="http://www.yahoo.com">Поисковая система</a>
  4. </div>
  1. //в данном примере мы заменяем свойство href у элемента
  2. //с id "id_name" на http://www.google.com
  3. $('id_name').set('href', 'http://www.google.com');

.erase()

С помощью метода .erase() вы можете удалить значение свойства элемента. Работает этот метод также как и два предыдущих. Выбираем элемент, затем выбираем свойство значение которого хотим удалить:

  1. <div id="body_wrap">
  2.   <!— в этом коде удалиться значение свойства href —>
  3.   <a id="id_name" href="http://www.yahoo.com">Поисковая система</a>
  4. </div>
  1. //в данном примере мы удаляем свойство href у элемента с id "id_name"
  2. $('id_name').erase('href');

Перемещение элементов

.inject()

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

  1. var elementA = $('elemA');
  2. var elementB = $('elemB');
  3. var elementC = $('elemC');

Использовать выше указанный код мы будем с эти html кодом:

  1. <div id="body_wrap">
  2.     <div id="elemA">A</div>
  3.     <div id="elemB">B</div>
  4.     <div id="elemC">C</div>
  5. </div>

Теперь мы можем изменить порядок элементов используя метод .inject(). Mootools предлагает нам четыре варианта:

  • bottom — вниз(по умолчанию)
  • top — верх
  • before — перед
  • after — после

Bottom и top разместят переданный элемент внутри выбранного элемента, соответственно в конце или в начале. Before и after разместят переданный элемент перед или после выбранного, но не внутри него.

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

  1. //расположить элемент C перед элементом B
  2. elementC.inject(elementB, 'before');
  3. //расположить элемент B после элемента C
  4. elementB.inject(elementC, 'after');

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

new Element

Конструктор new Element позволяет вам создавать новые html элементы. Создание нового элемента в библиотеке Mootools очень похоже на создание элемента в html коде, только синтаксис несколько иной:

  1. //сначала мы указываем имя переменной, которой присвоим созданный
  2. //конструктором новый элемент,
  3. //затем, в скобках, указываем тип элемента (div, a, span…)
  4. var newElementVar = new Element('div', {
  5.     //здесь мы определяем все необходимые параметры элемента
  6.     'id': 'id_name',
  7.     'text': 'Я новый div',
  8.     'styles': {
  9.         //а здесь мы устанавливаем все необходимые параметры стиля элемента
  10.         'width': '200px',
  11.         'height': '200px',
  12.         'background-color': '#eee',
  13.         'float': 'left'
  14.     }
  15. });

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

  1. <div id="body_wrap">
  2.     <div id="content_id">Какой-то текст</div>
  3. </div>

Теперь выберем элемент с id ‘body_wrap’:

  1. var bodyWrapVar = $('body_wrap')

Как мы уже говорили выше, с помощью метода .inject() мы можем вставить элемент внутрь другого. Вставит созданный элемент внутрь элемента c id ‘body_wrap’ в начало, то есть перед всеми содержащимися элементами в элементе c id ‘body_wrap’.

  1. //вставить newElementVar в элемент bodyWrapVar, в первую позицию
  2. newElementVar.inject(bodyWrapVar , 'top');

После этих операций html код будет выглядеть вот так:

  1. <div id="body_wrap">
  2.     <!— этот элемент был вставлен в первую позицию —>
  3.     <div id="id_name">Я новый div</div>
  4.     <div id="content_id">Some div content</div>
  5. </div>
Выбирая полотенцесушитель для дома обратите внимание на полотенцесушители компании Аквасталь. Основанная в 2003 году, на данный момент компания представляет около 30 водяных и электрических полотенцесушителей, выполненных из качественной нержавеющей стали. Срок службы по словам производителя 20 лет.

Пример

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

  1. <div id="body_wrap">
  2.         ID:  <input id="id_input" name="id" />
  3.         text:  <input id="text_input" name="text" />
  4.         <button id="new_div">Создать div</button>
  5. </div>

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

  1. var newDiv = function() {
  2.   //здесь будет находиться код, который
  3.   //непосредственно добавляет новый элемент
  4. };
  5. window.addEvent('domready', function() {
  6.     $('new_div').addEvent('click', newDiv);
  7. });

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

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

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

  1. var newDiv = function() {
  2.     var idValue = $('id_input').get('value');
  3.     var textValue = $('text_input').get('value');
  4. };
  5. window.addEvent('domready', function() {
  6.     $('new_div').addEvent('click', newDiv);
  7. });

Далее нам необходимо найти элемент, в который мы вставим новый div:

  1. var newDiv = function() {
  2.     var idValue = $('id_input').get('value');
  3.     var textValue = $('text_input').get('value');
  4.     var bodyWrapVar = $('newElementContainer');
  5. };
  6.  
  7. window.addEvent('domready', function() {
  8.     $('new_div').addEvent('click', newDiv);
  9. });

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

  1. var newDiv = function() {
  2.     var idValue = $('id_input').get('value');
  3.     var textValue = $('text_input').get('value');
  4.     var bodyWrapVar = $('newElementContainer');
  5.     var newElementVar = new Element('div', {
  6.         //устанавливаем свойство id которое было получено из поля формы
  7.         'id': idValue,
  8.         // устанавливаем свойство text которое было получено из поля формы
  9.         'html': textValue
  10.     });
  11. };
  12. window.addEvent('domready', function() {
  13.     $('new_div').addEvent('click', newDiv);
  14. });

Теперь мы можем непосредственно добавить новый элемент на страницу:

  1. var newDiv = function() {
  2.     var bodyWrapVar = $('newElementContainer');
  3.     var idValue = $('id_input').get('value');
  4.     var textValue = $('text_input').get('value');
  5.     var newElementVar = new Element('div', {
  6.         'id': idValue,
  7.         'text': textValue
  8.     });
  9.     //вставляем newElementVar первым внутри элемента bodyWrapVar
  10.     newElementVar.inject(bodyWrapVar, 'top');
  11. };
  12. var removeDiv = function() {
  13.     //удаляем все элементы содержащиеся внутри элемента bodyWrapVar
  14.     $('newElementContainer').erase('html');
  15. }
  16. window.addEvent('domready', function() {
  17.     $('new_div').addEvent('click', newDiv);
  18.     $('remove_div').addEvent('click', removeDiv);
  19. });

ID:

text:


(попробуйте ввести ID “yousoft”)

Для дальнейшего изучения

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

  • Element— содержит все о чем мы говорили и даже больше;
  • Element.Style как работать со свойством style (более подробно мы рассмотрим этот вопрос на одном из следующих занятий)
  • Element.Dimensions описана работа с изменением позиции, координатами и прочим.

Вольный перевод статьи: 30 Days of Mootools 1.2 Tutorials — Day 6 — Manipulating HTML

Похожие записи:

Tags:

3 комментария to “Mootools 1.2 за 30 дней — День 6 — Управление элементами HTML”

  1. Спасибо, очень интересный материал!

  2. Спасибо, жду продолжения!

  3. shedy:

    Жаль, что только 6 уроков, а не 30

Leave a Reply