Регистрация    Вход    Форум    Поиск    FAQ

  •  Новости
  • Beeline + Twitter = чирикай через SMS!

    Beeline + Twitter = чирикай через SMS! На первой картинке обозначены команды, при помощи которых через SMS Вы сможете кого-либо зафолловить или же отписаться, ретвитнуть чей-либо пост или же написать личное сообщение.

    Open Graph Protocol. От создателей Facebook

    Open Graph Protocol. От создателей Facebook Разбираясь с Facebook API, случайно наткнулся на другую интересную разработку от этих людей.

    Глобальное ускорение Wordpress

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




  •  Часы


  •  Поиск

Optimaze » Программирование » Расширения DOM в Prototype




Расширения DOM в Prototype

  1. Метод Element. extend()


Большинство расширений DOM содержатся в объекте Element. Methods и дополнительно копируются в объект Element для удобства использования.

Метод Element. extend()

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

 

Element. hide(‘comments’);

var div_height = Element. getHeight(my_div);

Element. addClassName(‘contactform’, ‘pending’);

Этот код довольно легок и читаем, но мы можем сделать его еще лучше. Если вы передадите элемент, с которым собираетесь работать, в метод Element. extend(), то в него будут скопированы все дополнительные методы. Например:

 

var my_div = document. createElement(‘div’);

 

Element. extend(my_div);

my_div. addClassName(‘pending’). hide();

 

// вставляем элемент в документ

document. body. appendChild(my_div);

Таким образом, вызовы методов становятся короче и более интуитивны. Как уже упоминалось выше, Element. extend() копирует все методы из Element. Methods в наш элемент, который автоматически становится их первым аргументом.

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

 

Element. extend() так же добавляет методы объекта Form. Methods в элементы FORM и методы Form. Element. Methods в элементы INPUT, TEXTAREA и SELECT:

 

var contact_data = $(‘contactform’). serialize();

var search_terms = $(’search_input’). getValue();

Имейте ввиду, что элементы автоматически расширяются не только в функции $()! Element. extend() так же вызывается в document. getElementsByClassName, Form. getElements, на элементах, возвращаемых функцией $$() (элементы, соответствующие определенному CSS-селектору), и др. - так что вам вряд ли придется вызывать метод Element. extend() самостоятельно.

 

Добавление пользовательских методов с помощью Element. addMethods()

Если вам нужно добавить к элементам помимо предоставляемых Prototype свои собственные методы - никаких проблем! Для этого в Prototype так же есть специальный механизм. Если у вас есть объект, содержащий набор функций, просто передайте его в Element. addMethods():

 

var MyUtils = {

    truncate: function(element, length){

        element = $(element);

        return element. update(element. innerHTML. truncate(length));

    },

    updateAndMark: function(element, html){

        return $(element). update(html). addClassName(‘updated’);

    }

}

 

Element. addMethods(MyUtils);

 

// теперь вы можете:

$(‘explanation’). truncate(100);

Единственное, за чем стоит следить - это за тем, чтобы первый аргумент обязательно был модифицируемым элементом. В ваших методах вы так же можете возвращать переданный элемент для того, чтобы делать “цепочки” методов (например, $('element'). updateAndMark(someText). truncate()).



Рейтинг: 4.5/5, основан на 25 голосах.


Нравится



Вернутся назад


   

Вам будет интересно:

HTML 5 – Часть 2. Интерактивный холст

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

Мониторинг использования памяти с Java SE 5

Одним из преимуществ Java по сравнению с C++ стала концепция автоматического управления памятью.

Нативные расширения

В браузерах, которые поддерживают добавление методов в прототипы нативных объектов, все расширения DOM доступны сразу же.

Маршрутизация на сайте средствами PHP

Когда то я сам пользовался обычной switch-case маршрутизацией и думал, что это удобно (на самом деле даже такая маршрутизация куда лучше, чем ее отсутствие).



  •  Публикации


8 методов раскрутки своего форума с нуля

8 методов раскрутки своего форума с нуля Итак, у вас имеется свой собственный форум, но его никто не посещает? Мы готовы помочь вам справиться с этой нелегкой проблемой.

Как привлекать посетителей на проект

Как привлекать посетителей на проект Данная статья в основном рассчитана на тех, кто самостоятельно занимается продвижением своего проекта.

Про MySQL, серверы и PayPal

Про MySQL, серверы и PayPal Проклял все настройки кодировок, проклял DirectAdmin и еле-еле нашел то место где располагается и задается общий пароль для ...

Реклама в Твиттере. Как подать свой продукт

Реклама в Твиттере. Как подать свой продукт Твиттер уже давно стал из нового web 2. 0 сервиса рекламной площадкой с огромным количеством потенциальных пользователей ...

Пока блог на локалхосте

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

Авторитет блоггера притягивает

Авторитет блоггера притягивает Долго не знал с чего начать данную статью. Статья что-то типа мыслей вслух и философии.