buttons

Создание Twitter кнопки на Ajax с помощью MooTools, jQuery или Dojo

Вся прелесть и удобство этой кнопки в том, что она написана только на CSS и JavaScript. Конечно, чтобы довести до совершенства такой виджет, требуется достаточно много часов программирования, но если уже есть готовый код, то почему бы и не воспользоваться им.

Давайте, мы вам покажем, как можно реализовать функционал этой кнопки с помощью популярных JavaScript библиотек: MooTools, jQuery и Dojo.

Примечание: В статье показана только клиентская часть кнопки. Никаких серверных скриптов на PHP/MySQL нет.

пример на MooToolsпример на Dojoпример на jQuery

HTML структура

HTML код для кнопки достаточно прост. Структура построена таким образом, что в элементе BUTTON содержатся два элемента: I элемент и SPAN элемент. Вы наверное думаете: «Элемент I? WTF?!» Мы знаем, что делаем. Дело в том, что этот элемент считается устаревшим напрасно. Его плюс в его размере. И думаем, что в Twitter тоже не прочь сэкономить пару байтов.

CSS стили

Основное оформление кнопки прописывается в самом элементе BUTTON. Присутствуют модные CSS3 свойства закругления бордюров и конечно же не обошлось без спрайтов. Чего и вам советуем не забывать...

MooTools JavaScript

Первый шаг состоит в перехвате всех элементов FORM с CSS классом follow-form. Останавливаем стандартный функционал формы, для того чтобы зайдействовать Ajax. Запрос Ajax генерируется с использованием ID элемента INPUT. Как только запрос начал работу, фоновое изображение элемента I переключается на изображение спинера(spinner). Запрос выполнен, кнопка прячется и появляется новый SPAN элемент, информирующий пользователя о том, что он теперь следует за выбранным пользователем!

jQuery JavaScript

Код основан на MooTools фреймворке. Функционал тот же.

Dojo JavaScript

Код основан на MooTools. Рабочий процесс точно такой же.

пример на MooToolsпример на Dojoпример на jQuery


Оставить комментарий