На самом деле 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 библиотеки.

В основном, это простая ссылка на document.getElementById(), но несколько более расширенная чем просто ссылка. Ниже показан пример использования:

[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]

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

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

Ajax.Updater - один из методов библиотеки prototype.js

В 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 list и почему не использовал доступные в интернете готовые примеры.

Вот примеры 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.

Read the rest of this entry »