Mootools clone()

Понедельник, 04 Январь 2010

Клон — система, сделанная по образцу другой. Это может быть аппаратное устройство, программа или даже онлайн-сервис. Может означать полную или частичную идентичность свойств.

Под данное описание вполне попадает весьма полезная функция библиотеки Mootools, которая позволяет в прямом смысле слова - "клонировать" узлы DOM в дереве HTML документа.

Целесообразность ее использования пожалуй можно обьяснить возможностью уменьшить обьем кода. Это достигается за счет того, что нет необходимости создавать новый узел DOM (new Element(...)), его просто нужно "Клонировать", при этом все свойства данного узла также (кроме ID - по понятным причинам...) будут присвоены "клону". Если быть конкретней - то эта функция на входе получает элемен (Node), а на выходе возвращает его копию - "клон".

Пример:

Например необходимо клонировать заголовок из одного контейнера и добавить его в другой. Структура HTML:

<div id="first">
  <h2 class="header" style="background:#CCCCCC">Заголовок</h2>
  <p>Произвольный текст (1)...</p></div>
<div id="two">
  <p>Произвольный текст (2)...</p></div>

А это Javascript:

  $$('#first h2')[0].clone().inject($('two'),'top');

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

<div id="first">
  <h2 class="header" style="background:#CCCCCC">Заголовок</h2>
  <p>Произвольный текст (1)...</p></div>
<div id="two">
  <h2 class="header" style="background:#CCCCCC">
  <p>Произвольный текст (2)...</p></h2></div>

С теорией понятно, теперь немного практики...

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

Этот скрипт закругляет углы у блоков (Div), при этом не используются картинки, а функция clone() играет здесь решающую роль. Возможно ктото скажет, что для реализации такой задачи можно было бы поступить иначе и я неправ, все возможно... Но суть лишь в том, чтобы продемонстрировать работу описанной функции в практическом - "жизненном" примере, и способ демонстрации работы этой функции всего лишь один из множества вариантов.

Итак начнем! А начнем как всегда с описания "логики" работы скрипта, так как "задача" понятна из описания функции, которую выполняет этот скрипт. Всеже повторюсь... Как уже было сказано выше, картинки использоватся не будут, поэтому нужно использовать что то другое. Этим "что то" будет элемент параграфа(<p>) содержащий определенный символ. Параграф будет создан, в него добавится содержимое, а затем "клонирован" и его "клоны" будут добавлены в нужный контейнер (контейнеры), в котором их раположение задаеться CSS таким образом, что прямоугольные углы блока будут "накрыты" (z-index, position), при этом будет имитация скругления углов.

Первоначальная Структура HTML имеет такой вид:

<div class="container"><p>Произвольное содержимое блока</p></div>
<div class="container"><p>Произвольное содержимое блока</p></div>
<div class="container"><p>Произвольное содержимое блока</p></div>
<div class="container"><p>Произвольное содержимое блока</p></div>

Итак из примера HTML видно что имеется четыре контейнера одного класса, в каждый из которых исходя из "логики" требуется добавить нужные элементы, чтож для начала убедимся действительно ли это так, с помощью условного оператора (if) (на случай если в HTML структуре не окажется данных элементов с необходимым классом, скрипт выполнятся не будет) :

window.addEvent('domready', function(){
  if($$('.container')){...}
});

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

Чтож если все в порядке - в if(true), то выполняем следующий код:

var p =  new Element('p').set('html', '<em>•</em>');
$$('.container').each(function(el, t){
  for(var i=0; i<4; i++){
    p.clone().setProperty('class', 'cuts'+i+'').inject(el,'top');
  }
});

Здесь в первой строке создается элемент(р) оригинал и в него вставляется HTML элемент с необходимым содержимым. Далее во второй строке, получаем массив контейнеров с определенным классом, и в цикле в каждый контейнер, через "под-цикл", добавляем клонированные параграфы, при этом назначая им уникальные классы - используя идентификатор каждой итерации цикла ("под-цикла"). Полный код скрипта:

window.addEvent('domready', function(){
  if($$('.container')){
  var p =  new Element('p').set('html', '<em>•</em>');
  $$('.container').each(function(el, t){
    for(var i=0; i<4; i++){
      p.clone().setProperty('class', 'cuts'+i+'').inject(el,'top');
    }
  });
  }
});

Видео курс по JavaScript - пошагово. На работающих примерах, с абсолютного нуля!

Demo

Download

Используемые материалы:

Element Method: clone

Метки:

Mootools clone()

Похожие статьи:

Добавить комментарий