jQuery — библиотека о которой в последнее время говорит практически каждый web-разработчик, верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (.addClass) или отнять (.removeClass) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (.attr). Внутренние элементы можно задать как через (.html).
Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками.
Допустим надо сделать массовое удаление из списка (как в почте), для этого генерируется огромный список checkbox'ов, а что-бы их все их массово выделить можно создать глобальный checkbox
Часто встаёт вопрос оповещения пользователей об удачном добавлении, ошибке или просто информации. Для этого можно использовать три CSS-класса, при этом элементы можно прятать по прошествии какого-то времени. Для этого используется конструкция, запускающаяся сразу после создания DOM-дерева (а не всего документа).
Несмотря на отличные библиотеки я не спешу бросать prototype.js и переходить на jQuery, потому что плохой код можно писать в любом языке и с любой библиотекой. Поэтому немного ликбеза. В Javascript можно делать объекты — очень удобно инициализировать, но они уникальны и их как массив использовать нельзя:
Классы в javascript инициализируются как обычные функции, внутри которых используется ключевое слово this.
Расширения (plugins) в основном написаны обычными разработчиками. В качестве более функциональных наработок с интерфейсом создаётся и jQuery UI, как аналог scriptaculous для prototype, куда входят перетаскиваемые и сортируемые элементы и виджеты для интерфейса — аккордеон, табы, слайдеры и тп. Ниже привожу свой список полезных плагинов + советую уделить внимание презентации об разработке с учётом отключённого javascript.
Unobtrusive JavaScript with jQuery
→ Оригинал
Кроме минимализма, ускоренности и 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
→ Оригинал
