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

#javascript

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

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

Примеры

  1. Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox<input type="checkbox" name="group[{$item.id}]" class="group_checkbox" onchange="$('.group_checkbox').attr('checked',this.checked);">
  2. Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа)$(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});
  3. Работа с 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);}); //при сохранении формы выделяем все эелементы });
  4. Выделить в select'е нужный элемент можно без цикла:
    $("#mySelect option[value='3']").attr('selected', 'selected');
  5. Проверить число отмеченных checkbox'ов очень просто:if (!$('.check_one:checked').length)
  6. Каждому элементу можно подключать (bind-ить) обработчики событий, даже несколько за раз…$('#someinput').bind('keyup change keydown', function() { alert ("one of three events is called!");});
  7. Изменить направление формы в зависимости от 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 - расширенные всплывающие подсказки

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