jQuery *

Ввиду недавнего обсуждения скорости работы jQuery.live и благоразумности писать свое собственное делегирование обработчиков событий, решил по полочкам разобрать работу jQuery.live. Т.е. целью данного топика поставлена задача выявления всех особенностей при использовании live-биндера и анализ кода. Без сравнительных характеристик, без приведения оптимальных методов делегирования.

Принцип работы live основан на делегировании обработчиков событий.

Делегирование — паттерн, в основе которого лежат 2 принципа javascript: всплытие событий (event bubbling stage) и возможность определения элемента, отследившего событие.

Тот факт, что делегирование отслеживает исключительно стадию всплытия события, объясняет невозможность обвешивания live-биндеров на события blur, focus, mouseenter, mouseleave, change и submit: все эти события не имеют стадий захвата и всплытия.

Это перевод статьи, написанной Jon Hobbs-Smith. Я счел ее довольно интересной и решил выложить в своем блоге, а также поделиться им с хабрапользователями, также как и я заинтересованными в библиотеке jQuery. Перед тем как начать хочу отметить, что написана она (как и переведена) далеко не экспертом в jQuery, поэтому если вы найдете в ней ошибку, пожалуйста, сообщите. Итак, начнем.

Простой плагин для jQuery, позволяющий закэшировать работу селекторов.
По наводке tenshi в камментах к habrahabr.ru/blogs/javascript/63119

Почти незаметно вышел второй поддерживающий релиз jQuery UI 1.7.

Подробный список исправлений я переведу позднее, однако на рабочем проекте обновление библиотеки произошло без проблем. Кстати, проблема с toggle решена. И, главное, начата работа над jQuery UI 1.8!

Загрузить

Файлы

• Пакет разработчика: jquery-ui.googlecode.com/files/jquery-ui-1.7.2.zip
• Пакет тем оформления: jquery-ui.googlecode.com/files/jquery-ui-themes-1.7.2.0.zip

Список изменений

Смотрите список изменений версии 1.7.2, чтобы увидеть, что именно включено в этот релиз…

Новые темы

Ребята из Filament Group снова сделали это. Они отдали нам 7 ещё более красочных тем оформления в галерее ThemeRoller:

jQuery Tools v1.0.1 — это инструмент/библиотека представляет собой файл весом в 5,8 кб включающий в себя наиболее важные компоненты для вебдванольных сайтов, а именно: табы, всплывающие подсказки, плавные переходы, прокрутки, всплывающие окна и т.д.

Не буду тянуть резину, лучше, как говориться, один раз увидеть, чем сто раз услышать!
Переходим по ссылке и смотрим более 50 (!) демок:

Несколько понравившихся мне демонстраций. Очень рекомендую!
Маскируем фоновое изображение;
AJAX-табы с поддержкой истории переходов;
Неколько всплывающих окошек на одной странице.

Привет! Сегодня решил сойти с ума! Конечно родной datepicker в ui это хорошо, но когда нужно и параметр «время» – данного виджета не хватает.
Внимание! Писал все быстро, инструкцию не пишу т.к. хватает этой.
Думаю разберетесь.
Демо тут.

В одном из моих проектов мне понадобился простой javascript календарь. Но из существующих jQuery плагинов, только один «почти» соответствовал мои требованиям. Решил написать свой плагин — проба пера calendarLite plugin.

Включите распознавание сложных жестов мышью (жесты могут описывать буквы, символы других алфавитов и иные символы, включая Ваши собственные знаки) на Вашем сайте!

Возможности

1. Можно создавать свои собственные жесты;
2. Можно иметь множество областей на странице, которые будут способны распознать жесты;
3. Есть визуальная обратная связь;
4. Работоспособность во всех основных браузерах.

Благодарности

Этот скрипт инициирован из скрипта распознавания жестов мыши от Didier Brun.

Демонстрация

Запустить демонстрацию распознавания жестов мыши

Скриншот модных жестов jQuery

CodePlex радует новыми решениям. На этот раз Ribbon интерфейс на jQuery в стиле 2010 версии Microsoft Office.

Несмотря на то, что необходимо минимизировать количество http-запросов, иногда (или часто, в зависимости от задачи) бывает полезно загружать часть «тяжелого» функционала только тогда, когда он действительно понадобится на странице.
У jQuery есть механизм, позволяющий осуществить это — $.getScript, однако, он обладает рядом недостатков:

• не запоминаются уже загруженные или загружаемые в данный момент скрипты, при повторном запросе опять идет их загрузка.
• нельзя указать сразу несколько скриптов
• выключен кэш (к каждому урлу насильно приписываются параметры типа ?_=1242843920520). Зачем это было так жестко сделано, для меня осталось загадкой.
• у коллбэка нельзя задать контекст (это вообще болезнь коллбэков jQuery).

Пришлось написать небольшой плагин, лишенный вышеперечисленных недостатков:

$.requireScript(url, callback, [context], [options])
Где:
url — урл загружаемого скрипта (может быть массивом урлов)
callback — коллбэк-функция, вызываемая после загрузки скриптов
context — контекст, в котором вызывается коллбэк-функция (опционален)
options — параметры; в данный момент поддерживается только один параметр — parallel, указывающий, нужно ли использовать параллельную загрузку для нескольких скриптов (по умолчанию — true)


Может кому-то пригодится. Скачать и попробовать можно с code.google.

UPDATE: согласно замечаниям в комментах, $.loadScript переименован в $.requireScript, и теперь можно указать несколько урлов сразу.

Что такое Low Pro?

Так что же такое Low Pro? Это плагин, который позволяет сделать JavaScript более объектно-ориентированным через делегацию событий. Архитектура jQuery плагинов позволяет в простой форме расширить функционал ядра.Ранее не существовало легкого пути в создании макроса, который создал бы несколько типов событий на один элемент. Но это время пришло!

Есть у меня небольшой проект с user-generated content-ом. Встала задача сделать код кнопки с ссылкой на страничку пользователя, для интеграции в пользовательские блоги и сайты. Но делать скучные кнопки, как у большинства конкурентов, не хотелось. Хотелось, на равне с простыми кнопками и ссылками, сделать что-то особенное, jQuery-евское, с аяксом и анимацией :).

Суть простая: пользователь размещает у себя на сайте скрипт, который динамически вставляет кнопку. При нажатии на кнопку всплывает окошко с подгружённой пользовательской страничкой с нашего ресурса.

Проблемы очевидны:

1. Необходимо определить, используется ли jQuery и нужный плагин на сайте пользователя. Если нет, то обоих динамически подгрузить. Делать отдельно коды для тех кто использует jQuery на своем сайте и для тех кто нет — не комильфо, а тем более подгружать при любом раскладе (могут возникнуть глюки, особенно у плагинов).
   
2. Пережатый jQuery весит около 60 кБ, и в случае подкачки может не успеть полностью загрузиться и инициализироваться до исполнения кода.
   

В качестве вкусности я использовал плагин fancybox. Он позволяет не только отображать фотографии с lightbox-эффектом, но и любой другой контент в iframe.

Ниже представлен код.

Другая неделя, другая коллекция ссылок на некоторые из самых интересных и захватывающих событий в Сети, касающихся jQuery.

Одним из самых интересных событий на этой неделе стал выпуск Glimmer. Glimmer позволяет легко создавать интерактивные элементы на вашей веб-странице, используя мощь библиотеки jQuery. Вы можете использовать мастера Glimmer для генерации скриптов jQuery, отрабатывающих самые общие интерактивные сценарии. Glimmer также имеет расширенный режим, обеспечивая дизайнер для создания эффектов на основе уже существующих HTML и CSS. — примечание от переводчика — есть отдельная статья на Хабре про Glimmer.

Также стоит упомянуть новый облик сайта jQuery для дизайнеров от Реми Шарпа.

Многие из нас сталкивались с всплывающими окнами, когда при этом постепенно потухает фон. Взгляд пользователя невольно фокусируется только на той части экрана, где что-то требуется от этого самого пользователя. Достаточно полезно, не правда ли?

Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

Наверняка, многие разработчики, использующие jQuery, сталкиваются в крупных проектах, использующих ООП, с проблемами наследования. Так как самому недавно пришлось озадачиться подобной проблемой, решил написать плагин для jQuery, помогающий в этом нелегком деле. Некоторые идеи заимствованы из Base2.

Итак, опять немного произвольный список открытий, относящихся к jQuery на этой неделе.

Новая неделя, и новая коллекция ссылок на некоторые из самых интересных и захватывающих происшествий в сети.

Столкнулся с задачей когда надо было сделать на сайте возможность редактировать контент в паблик части по клику на блок. И решил что это неплохой повод освоить jQuery. Скачал jquery, jQuery UI (плагин datepicker), wymeditor и Jeditable плагин.

С интеграцией jeditable все было просто. Плагин очень порадовал, оказался гораздо удобней плагина Editable. А вот с интеграцией с jQueryUI.datepicker и wymeditor’ом пришлось немного повозиться.
Проблема с которой я столкнулся заключалась в том что по поводу расширения плагина jeditable было написано очень мало, точнее только страница с примерами, я до этого с jQuery дел не имел и поэтому пришлось помучаться. Результаты с объяснением ниже, авось кому поможет.
p.s. оказалось что документация есть но я ее плохо искал.

Кому не нравится jQuery? Это быстрая и простая javascript-библиотека стала очень популярной в 2008 году. В этой статье я собрал список восьми очень полезных jQuery-техник, советов и хитростей.

20 февраля 2009 вышел jQuery 1.3.2. Вы можете увидеть полный список изменений и исправлений в баг трэкере.

От переводчика: Этот выпуск не вполне совместим с прежними версиями, не ставьте на production без тестирования!