jQuery для продолжающих (с плагинами)

jQuery - библиотека о которой в последнее время говорит практически каждый web-разработчик, верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (.addClass) или отнять (.removeClass) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (.attr) и напрямую к значению (.val) . Внутренние элементы можно задать как через (.html). Ajax очень просто вызывается функцией $.post (url, val, callback)

Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками.

Примеры

Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox <input type="checkbox" name="group[{$item.id}]" class="group_checkbox" onchange="$('.group_checkbox').attr('checked',this.checked);">
Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа) $(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});
Работа с select'ами очень проста (даже с multiple=true), например если надо двумя кнопками перекидывать элементы двух списков, то поможет такой код: $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); $('#save').click(function(){ $('#select1 option').attr('selected',true); $('#select2 option').attr('selected',true);}); //при сохранении формы выделяем все эелементы });
Выделить в select'е нужный элемент можно без цикла:
$("#mySelect option[value='3']").attr('selected', 'selected');
Проверить число отмеченных checkbox'ов очень просто: if (!$('.check_one:checked').length)
Каждому элементу можно подключать (bind-ить) обработчики событий, даже несколько за раз… $('#someinput').bind('keyup change keydown', function() { alert ("one of three events is called!");});
Изменить направление формы в зависимости от select'а можно явно (но лучше выносить все обработчики в отдельный файл)
<form method="post" action="{$data.filter_link}" onsubmit="this.action=this.action+'/'+$('#filter_category option:selected').val();">

Классы в javascript

Несмотря на отличные библиотеки я не спешу бросать prototype.js и переходить на jQuery, потому что плохой код можно писать в любом языке и с любой библиотекой. Поэтому немного ликбеза. В Javascript можно делать объекты - очень удобно инициализировать, но они уникальны и их как массив использовать нельзя:

var CommentControl={ // объект читающий все комментарии strURL:'/comments/read/', //обычный параметр Init:function(){ //декларация функции }}

Классы в javascript инициализируются как обычные функции, внутри которых используется ключевое слово this

function CommentBox(ID){ this.strURL='/comments/reply/'+ID; //параметр куда отсылать ответ this.ID=ID; this.reply=function(){ alert("AJAX request goes here"); } this.update=CommentControl.Read(ID); //ссылка на }

Расширения и библиотеки

Расширения (plugins) в основном написаны обычными разработчиками. В качестве более функциональных наработок с интерфейсом создаётся и jQuery UI, как аналог scriptaculous для prototype, куда входят перетаскиваемые и сортируемые элементы и виджеты для интерфейса - аккордеон, табы, слайдеры и тп. Ниже привожу свой список полезных плагинов + советую уделить внимание презентации об разработке с учётом отключённого javascript. Значительно более детальный список есть на jquerylist

Изображения

ThickBox - галерея, аналог lightbox
FancyBox - тоже галерея, мне меньше нравится
Galleria - галерея
Multimedia portfolio - горизонтальный слайдер с видео, картинками и звуком
imgAreaSelect - выделение области для вырезания
Анимированный блок изображений, подходит при портфолио и панорамах
Lightbox с более плавной анимацией чем в prototype + занавеска как положено.

Таблицы

Flexigrid - табличные данные
InGrid - ajax'ная таблица, но не на json, а на открытом html'е. Впрочем компактном и без хаков.

Формы

ajaxForm - создаём как обычно статичную форму, а скрипт делает из неё ajax'овую
Autocomplete - на самом деле подгружает html. Небольшие заминки были с настройкой параметра extraParams
DatePicker - показывает генерирует календарик под указынными полями
FaceBook like - автоподсказки
jGrow - размер textarea в зависимости от размера текста
DamnSmallRTE - мелкий WYSIWYG
Multiselect как обычный select + выезжающие checkbox-ы
NiceForms - обрамляет input-ы div-элементами с закруглёнными углами, стилизует radio и checkbox'ы. Я правда предпочитаю более независимую версию nice forms
JQuery select - конвертирует все select-элементы в UL, которые можно более гибко стилизовать
MaskedInput - маска заполнения input-форм
Закачка файлов с созданием iframe-элементов (напоминаю что в XHTML) они не валидные
Манипуляция checkboxами и radio с превращением в iphone-стиль
jWYSIWYG - простейший редактор

Layout

RoundedCorners - закруглённые углы при помощи генерации элемента canvas
CodaSlider - слайды в дополнение закладкам (tabs)
idTabs - закладки для экономии пространства, но надо стилизовать
tooltips - расширенные всплывающие подсказки

Смотрите также: