На самом деле checkbox и есть картинка, но в данном примере мы стандартную картинку заменим своей красивой!

Собственно надоели убогие checkbox’ы и захотелось красоты, вот что было найдено на эту тему

Fancy Form – http://lipidity.com/fancy-form

Использует как основу javascript framework Mootools 1.11, облегченная версия которого входит в пакет загрузки Fancy Form

Второй не менее интересный вариант это Protocheck – http://bugrain.com/projects/protocheck/

Использует javascript framework Prototype – в пакет закачки эта библиотека не входит, ее нужно отдельно скачивать на  сайте разработчика www.prototypejs.com

Я выбрал для работы Protocheck, но не из-за его качеств, а только из-за того что он использует protoype, который в данный момент уже присутствует в проекте, т.е. основная цель – это не плодить javascript библиотеки.

[cc lang="php"]
node = $(‘elementID’);

// То же самое
node = document.getElementById(‘elementID’);

// Так же можно получать не только один елемент
// В этом случае результат будет массивом DOM елементов
nodes = $(‘firstDiv’, ‘secondDiv’);
[/cc]

Prototype так же предлагает функцию, ее нет в ядре JavaScript, которая возвращается массив DOM елементов и как аргумент она принимает имя css класса (class name):
[cc lang="php"]
nodes = document.getElementByClassName(‘myclass’);
[/cc]

Однако, я думаю использовать ее вы будете редко, так как Prototype предлагает более расширенную функцию двойной доллар, $$(). Эта фунция возвращает массив DOM елементов основанных на CSS селекторе (css selector). Таким образом код показанный выше можно записать так:

[cc lang="php"]
nodes = $$(‘.myclass’);
[/cc]

Благодаря мощьности CSS селекторов (css selectors) вы можете парсить модель DOM по классам (class), ID, и родитель-наследник (parent-child) и предыдущий-следующий (previous-next) связям, гораздо проще чем при использовании XPath выражений. Вы можете получить доступ к элементу через сложную комбинацию селекторов:

[cc lang="php"]
nodes = $$(‘body div#main ul li.last img > span.legend’);
[/cc]

И последний пример улучшения синтаксиса предлагаемого Prototype — это each array iterator, подобно как в PHP:

[cc lang="php"]
var vegetables = ['Carrots', 'Lettuce', 'Garlic'];
vegetables.each(function(food) { alert(‘I love ‘ + food); });
[/cc]

Не забывайте подписывать на рассылку.

Дальше будет еще много интересного.

В web 2.0 проектах часто приходиться обновлять некоторые области на страничке, для упрощения жизни пользователя, к примеру:

1. Вывод системного сообщения без перезагруки страницы
2. Показать форму входа или регистрации
3. Обновить блок новостей

это небольшой список из того, где можно использовать Ajax.Updater

Хочу заметить, что через мерное применение большого количества обновляемых элементов на странице не улучшает ее, а зачастую снижает общую скорость загрузки страницы, и приводит к более частым “поломкам” в разных броузерах.

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

[cc lang="php"]

[/cc]

В примере выше, Ajax.Updater вызывает файл /url_to_comments/comments.php, который выводить комментарии к статье, и обновляется контейнер id=”comments”.

Контейнер id=”comments” полностью перезаписывается, поэтому в вызываемом файле comments.php нужно указывать открывающие и закрывающие <div> коментарии </div> теги.

Ajax.Updater имеет еще ряд параметров. Если сервер возвращает HTML, содержащий скрипты, и вы хотите чтоб они исполнялисть, в строке параметров нужно указать evalScripts: true.

Русский перевод статьи об Ajax в protoype.js вы можете почитать на страницах блога Parabola.

Приведенный выше пример не совсем точно показывает всю прелесть обновления блоков на странице, ниже показан более правильный способ использования Ajax.Updater.

[cc lang="php"]

[/cc]

В этом примере добавиласть кнопка “Показать комментарии”, т.е. при первоначальной загрузки старницы, комментариев под статьей нет, в момент нажатия на кнопку “показать комментарии”, вызывается функция showComments(). Которая обновляет контейнер id=”comments” и выводит комментарии к статье.

Работать с Ajax.Updater очень просто! Если у вас есть свои примеры использования этого метода оставляйте их в комментариях к этой статье.

В следующей статье я раскажу об методе Ajax.Autocompleter из библиотеки script.aculo.us, который во многом похож на Ajax.Updater и позволяет добавлять к полям формы автозаполнение по мере ввода текста в форму.

Не забывайте подписавать на рассылки.

Вот примеры Tab листов, которые я раньше использовал:

1. Dexagogo
2. Livepipe

На примерах этих tab листов, трудно понять как работает сам механизм связанный с переключаниями между tab’ами.

И один из больших недостатков я не смог застивить работать эти tab листы на динамически вызваных страницах, которые вызваются через методы библиотеки prototype.js (Ajax.Updater и др.). Вот по этой причине я решил написать свой tab лист.

Первое, создаем простой html документ:

[cc lang="php"]

[/cc]

Обратите внимание на кодировку в документе используется UTF-8, так как библиотека prototype.js не дружит с нашими кодировками windowds-1251

Если у вас все же есть необходимость использовать в работе кодировку windows-1251, вам поможет библиотека Дмитрия Котерова JsHttpRequest. Которая полностью совместима с prototype.js

В моем примере tab list я использую CSS стили из проекта Dexagogo.

Перед закрытием тега </head> , добавляем подключение библиотеки prototype.js, которую я использую для переключения между tab’ами, и динамеческой загрузки информации в выбранный tab.

Второе, собственно сами закладки:

[cc lang="php"]

[/cc]

Для приведенного кода я думаю особых объяснений не нужно. Основное, что может вызвать не монимание, это функция tab(‘one’) именно вызывая ее происходит переключение, более подробоно будет описана ниже.
Также в этом листинге в содержании третьего таба (id=threethree), вызвается метод Ajax.Updater(‘threethree’, ‘inner.html’, {method: ‘get’}), где:

1. ‘threethree’ — id в innerHTML (внутренность) которого будет загружен внешний файл
2. ‘inner.html’ — внешний загружаемый файл
3. {method: ‘get’} — передаваемый параметр, в это месте можно добавить свои значения, которые мы хотим передать внешнему файлу.

более подробно об методе Ajax.Updater я раскажу в следующий записях моего дневника, незабудьте подписать на рассылку вконце этой записи.

Третье, javascript функци, которые переключают Tab’ы:

[cc lang="javascript"]

[/cc]

Фукнция tab() — переключает верхние <div> заголовки tab’ов

В первой строке определяем текующий активный tab

[cc lang="javascript"]active = document.getElementsByClassName(‘active-tab’);[/cc]

Обратите внимание на метод getElementsByClassName использовать его позволяет библиотека prototype.js

Делаем текущий активный tab не активным

[cc lang="javascript"]active[0].className = ”[/cc]

Назначаем новый выбранный tab активным

[cc lang="javascript"]document.getElementById(id).className = “active-tab”;[/cc]

Библиотека prototype.js предлагает для упрощения несколько сокращений для стандартных методов, один из них $, который заменяет вызов document.getElementById. Так можно заменить запись вида document.getElementById(id) на равнозначную запись $(id)

Вызываем функцию tabBody() — переключает нижние <div> тело tab’ов.

Функция tabbody() работает аналогично tab().

Посмотреть Демо переключатель tab, скачать все одиним архивом tab.zip.

Библиотека prototype.js в архив не включена, скачайте послденюю версию с офф сайта http://prototypejs.org

Не забудьте подписаться на RSS и e-mail рассылку.

В следующей статье я раскажу как работать с Ajax.Autocompleter и покажу недокументированные функкции, а так же основную ошибку, которую совершают при работе с этим методом от http://script.aculo.us/