Pull to refresh

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

Lumber room
jQuery — библиотека о которой в последнее время говорит практически каждый web-разработчик, верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (.addClass) или отнять (.removeClass) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (.attr). Внутренние элементы можно задать как через (.html).
Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками.


Примеры


Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox

Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа).
$(document).ready(function() { setTimeout(function() {$('.error').fadeOut('slow');}, 20000);});

Классы в 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.

Изображения



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

Таблицы


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

Формы

  • DamnSmallRTE — мелкий WYSIWYG
  • NiceForms — обрамляет input-ы div-элементами с закруглёнными углами, стилизует radio и checkbox'ы. Я правда предпочитаю более независимую версию nice forms.
  • FaceBook like — автоподсказки
  • JQuery select — конвертирует все select-элементы в UL, которые можно более гибко стилизовать
  • MaskedInput — маска заполнения input-форм

  • Закачка файлов с созданием iframe-элементов (напоминаю что в XHTML) они не валидные
  • Манипуляция checkboxами и radio с превращением в iphone-стиль
  • jGrow — размер textarea в зависимости от размера текста
  • jWYSIWYG — простейший редактор
  • ajaxForm — upgradит формы для использования пересылки через ajax
  • DatePicker — показывает генерирует календарик под указынными полями

Layout

  • RoundedCorners — закруглённые углы при помощи генерации элемента canvas
  • CodaSlider — слайды в дополнение закладкам (tabs)

Unobtrusive JavaScript with jQuery

Оригинал
Tags:jquerypluginsjavascript
Hubs: Lumber room
Total votes 19: ↑17 and ↓2+15
Views949

Popular right now