jQuery *

Недавно я написал небольшой плагин на jQuery и PHP. Функционал простой: посредством Ajax задается описание и загружается видео на YouTube, плагин вернет статус загрузки, и если она прошла успешно — id видео. Плагин может применяться на любом сайте, и легко вставляется в любую CMS.

Все началось с того, что при разработке CMS для сайта местного телеканала я столкнулся с необходимостью сделать загрузку видеороликов на YouTube. Так как на сайт часто будут добавлять видео, то каждый раз логиниться на YouTube, заливать туда ролик, получать на него ссылку, лезть в CMS и вставлять её туда — очень напряжно. Причем, желательно делать это через Ajax, чтоб можно было легко включить плагин в любой проект.

Надеюсь, что все знают что такое QR коды и как ими пользоваться? Кто не в теме — вам сюда. В общем этот небольшой плагин для jQuery умеет отображать QR коды для ссылок на странице. Это может быть полезно там, где нужно передать ссылку на мобильное устройство, например ссылка на мобильную версию сайта — незачем больше перебивать ссылки из браузера в ваш телефон, сфоткали и побежали ;)

Плагин достаточно простой, основан на плагине ColorTip для всплывающих подсказок, js-uri для относительных ссылок и Google Chart API для QR кодов ;)

Демонстрация, официальный сайт, а так же qrTip на Github.

С пятилетием, jQuery! jQuery впервые увидела свет 14 января 2006 года и сегодня достигнула 5-летней отметки своего существования на радость веб-разработчикам!

Чтобы отметить это праздничное событие, команда разработчиков решила выпустить бета-версию jQuery 1.5! А пре-релиз и финальный релиз они обещают выпустить в течении 10 дней и до конца месяца соответственно.

jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:

var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });

Для меня jQuery ассоциируется с мощной и главное кросс-браузерной JavaScript библиотекой. Можно долго перечислять ее достоинства, холиварить по поводу и без, но думаю, никто не будет против посмотреть подборку интересных плагинов и уроков:
для удобства – каждая картинка ведет на демо

Hover Slide Effect

Демо | Урок

Галерея состоит из нескольких картинок, при наведении на одну из них она эффектно меняется на другую, а при клике на любую картинку — меняются все одновременно.

Как Вы знаете — в разработке объёмного JS-приложения где используется популярнейшая библиотека jQuery наступает момент когда остро встаёт проблема производительности. Все силы кидаются на амбразуру профайлера, каждый вызов скрупулёзно исследован, каждый функционально нагруженный кусок реализации обнюхан со всех сторон и выправлен. Но беда поступает не с той стороны, откуда её ждут 90% разработчиков. Селекторы — Как много в этом слове.
Давайте разберёмся — как работает эта магия и почему поиск DOM-элементов может стать причиной падения производительности приложения.

Со слов Дэна Хэбердена, в последнее время команда, обслуживающая сервера jQuery заметила значительное увеличение трафика с сайтов, на которых размещены прямые ссылки непосредственно к файлам на их серверах (jquery.com, jqueryui.com, dev.jquery.com и т.д.), вместо загрузки их на хостинг или использования CDN'ов, для чего они и создавались (Google CDN, Microsoft CDN и др.). Такая динамика негативно влияет на производительность их сети и не позволяет обычным пользователям получать доступ на сайтах jQuery в часы пик.

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

Вкратце


Демо 1 | Демо 2.

В последнее время я увлекся jQuery Mobile до такой степени, что захотелось написать на нем что-то серьезное. Сначала возникла идея написать такую компоненту как «карусель». Затем взгляд упал на твиттер… В общем работа пошла и в итоге получилось два плагина и небольшой проект, о котором я расскажу в конце топика.

Когда передо мной в очередной раз встала задача об одновременной загрузке нескольких файлов на сервер (без перезагрузки страницы, само собой), я стал блуждать по интернетам в поисках довольно корявого jQuery-плагина, который позволяет имитировать ajax-загрузку файла (того самого плагина, который со скрытым фрэймом: от java- и flash- плагинов сразу было решено отказаться). В процессе поиска я вспомнил, что в грядущем стандарте html 5 возможности по работе с файлами должны быть существенно расширены, и часть этих возможностей доступна уже сейчас. В итоге было решено опробовать их в действии.

Рассматривать возможности File API будем на примере одновременной загрузки нескольких картинок на сервер. В конце статьи приводится готовое решение, оформленное в виде jQuery-плагина.

Как мы все знаем Microsoft подобрела и выпустила некоторые свои вещи под свободной лицензией MIT. В числе них оказались и их новые плагины для jQuery. Плагины оказались мощными настолько, что «независимое» сообщество решило включить, так давно просимый функционал шаблонов, в основную библиотеку (тут). Нонсенс! Фурор! Или… Или есть какие-то иные причины? Не будем это выяснять, а лучше посмотрим на сравнительные тесты данной библиотеки, и подумаем, нужно ли это нам на самом деле.

Мгновение назад, команда jQuery и jQuery Mobile объявили в своих блогах сразу о двух важных релизах.

• Обновление ядра jQuery до версии 1.4.4
• Обновление jQuery Mobile до версии Alpha 2

Одна из самых потрясающих вещей в jQuery — это движок селекторов. Доступ к элементам DOM используюя селекторы в jQuery становиться довольно простой задачей, еще и потому, что большинство селекторов используют те же выражения что и селекторы в CSS. Это то что веб-дизайнеры НЕ программисты могут легко усвоить.
Это статья — упражение в создании произвольного слектора, вы можете её использовать, как руководство по созданию своего собственного селектора.

Особенность в 1.4.3 — проявляется в FF3.6.11

Простой пример:

<table>
	<tr>
		<td myAttr='1'>1.1</td>
		<td>1.2</td>
		<td>1.3</td>
		<td myAttr='1'>1.4</td>
	</tr>
	<tr>
		<td myAttr='1'>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td myAttr='1'>2.4</td>
	</tr>
</table>

Ранее, до 1.4.3, результат выполнения следующей jQuery-инструкции был равен 2 (выбраны элементы 1.2 и 1.3)

    $('tr').eq(0).find('td').eq(0).nextUntil('td[myattr=1]').length

В 1.4.3 результат будет равен… 3 (выбираются элементы 1.2, 1.3 и 1.4).
Судя по всему, дело в изменении алгоритмов поиска jQuery а именно, переходе на использование matchesSelector. Чтобы вернуть поведение в нужное русло надо взять значение аттрибута в кавычки:

    $('tr').eq(0).find('td').eq(0).nextUntil('td[myattr="1"]').length

Легкой отладки тебе, %username%!

UPD: Что интересно, IE8 (а скорее всего IE<9) не подвержен «багу». У него просто не реализован matchesSelector!

UPD: Есть подозрение, что это баг в FF3.6.11. В Chrome7 (у него есть matchesSelector!) баг не воспроизводится.

16 октября вышла новая версия jQuery — 1.4.3.

Улучшения производительности

После переписывания css-модуля анимация в тестах ускорилась до 20%. Ещё были ускорены многие операции обхода DOM-дерева в браузерах, поддерживающих querySelectorAll или matchesSelector.

Каждый веб-разработчик использует Javascript при создании веб-приложений, а когда дело доходит до отображения нескольких элементов на странице с акцентом на один элемент, без использование слайдеров не обойтись. Слайдеры можно использовать для отображения ленты новостей, изображений или продуктов в той форме, которая была бы удобна пользователям. Ниже представлены несколько интересных решений, которые помогут в создании веб-приложений.

Некоторое время назад Microsoft начала тесно сотрудничать и с проектом jQuery и поставлять сообществу открытый код в виде полезных расширений. Всего было три таких расширения:

• шаблоны jQuery (описание на английском);
• плагин jQuery для связывания данных (перевод анонса на русском, хабр);
• плагин jQuery Globalization (описание на русском, хабр).

Сегодня, Скотт Гатри (вице-президент подразделения по веб-разработке в Micosoft) анонсировал у себя в блоге новость о включении поставленного сообществу кода Microsoft в список официальных плагинов jQuery. Об этом сделан анонс и на официальном сайте jQuery.

В качестве официальных плагинов, эти три плагина являются частью проекта jQuery и поддерживаются командой разработчиков проекта. Вы можете загрузить плагины с официальной страницы jQuery на github уже сейчас:

• jQuery Templates – http://github.com/jquery/jquery-tmpl
• jQuery Datalink – http://github.com/jquery/jquery-datalink
• jQuery Globalization – http://github.com/jquery/jquery-global

Документация по плагинам доступна на сайте jQuery http://api.jquery.com/.

Более того, плагин шаблонов будет включен в следующий релиз библиотеки jQuery 1.5 как ее составная часть (в jQuery.js).

За последний месяц, я написал уже два поста с обзорами плагинов jQuery (1 и 2). Надо сказать, что подобные статьи на английском языке появляются все чаще и чаще. Однако их содержание довольно быстро приедается. Галереи картинок, слайдеры, опять галереи картинок, многочисленные динамические меню и опять слайдеры. Мне не хочется описывать очередную порцию подобных плагинов. Поэтому сегодня я расскажу не о двадцати-тридцати как обычно, а только о семи важных на мой взгляд плагинах, о которых очень хотелось рассказать. Лучше меньше, да лучше.

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

Довольно часто я наступаю на одни и те же грабли. Стараясь выполнить какой-нибудь проект побыстрее, я с головой ухожу в реализацию необходимой функциональности. А через неделю, мне на глаза обязательно попадается описание библиотеки, фреймворка или плагина, воспользовавшись которыми, я мог бы выполнить свою часть работы в разы быстрее. В общем, сейчас я стараюсь быть в курсе готовых решений в интересующих меня областях. В последнее время мне часто приходится работать с javascript и поэтому, сейчас я уделяю особое внимание библиотеке jQuery и ее плагинам. Должен сказать, что упускать из виду такое разнообразие готовых решений просто нельзя. Данная статья сделана на основе обзора «50 Awesome New jQuery Plugins», который я прочитал пару дней назад.