Наверное каждый веб-мастер участвует в какой-либо партнерской программе и я не исключение. И для продвижения партнерских товаров все большей популярности набирают ротаторы баннеров. Пример такого ротатора Вы можете наблюдать на моем сайте в правом сайдбаре.

Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный javascript-код. Если разбираться глубже, то задачей этого javascript-а является встраивание на Вашу страницу специального iframe, который уже и загружает ротатор баннеров на Вашу страницу с сайта разработчика.

Все бы ничего, но у данного подхода есть несколько недостатков:

 

Вчера (13 октября 2011 г.) во блоге jQuery появилось объявление о выходе второй беты jQuery 1.7; полный changelog её вы без труда сможете найти там же, но я всё же хочу перечислить все те изменения, которые показались мне наиболее заметными.

Во-первых, мощно улучшили поддержку HTML5 в IE. Насколько я могу судить по изменениям кода на Гитхабе, отдельные средства такой поддержки (например, html5shiv или Shimprove) больше не будут нужны.

Во-вторых, методы outerWidth(), .outerHeight(), .innerWidth(), .innerHeight() теперь будут работать у объектов window и document.

В-третьих, появилась поддержка CommonJS: jQuery саморегистрируется как асинхронный модуль. Прежде для этого jQuery приходилося пропатчивать.

Окромя названных выше улучшений, в бета-версии полным-полнó исправлений, искореняющих множество самых разных багов, иногда вельми премерзких: scroll() в IE откручивал до сáмого верха, свойство jQuery.support.opacity равнялося false в Google Chrome, метод .closest('.class') мог подхватить сам элемент вместо его родителя, и так далее. Но это уж как водится. Из них наиболее интересным показалось мне известие о том, что можно было вызвать сбой jQuery в IE8 простым кодом:

Вышла jQuery 1.7 beta 1.

.on() and .off()

bind, live и delegate могли вести себя непредсказуемо при использовании вместе. Например, $(document).unbind('click') убирал все live('click')-события со всего документа.
Новое API событий .on() and .off() призвано как-то унифицировать систему создания обработчиков событий:

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

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

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

Идея моей плавающей панели заключается в следующем, при прокрутки страницы она постоянно находится на видном месте. Также добавил начальную прозрачность для панели и при прокрутке страницы вниз, панель плавно становится видимой.

Тем самым, когда пользователь ознакомился с материалом на сайте и ему он понравился, ему плавно показывается панель со ссылками на аккаунты социальных сетей. При наведении мыши на ссылку она становится не прозрачной и смещается в сторону на 10px.

Вступление

В ходе реализации текущего проекта мне понабилось выпадающее дерево. Так как я уже пользовался jQuery плагином TreeView, и его функционал меня устраивает, было принято решение cделать выпадающее дерево на его основе. В результате родился плагин DropDownTreeView которым я хочу поделится.

Функционал

Плагин позволяет создавать выпадающие деревья с AJAX загрузкой (пример). При создании дерева к объекту обертки добавляется кнопка открытия дерева, и подгружается дерево. Дерево можно подгружать как целиком так и частями (актуально для больших деревьев). HTTP запросы могут выполнятся POST и GET методами. Параметры HTTP запроса определяются пользователем. Дерево строится посредством jQuery.Treeview. Дерево сворачивается при выборе пункта и клике вне зоны дерева.

Введение

Всех приветствую!

Совсем недавно мне пришлось немного расширить функционал редактора одного проекта. Но как оказалось в моем случае я наткнулся на некие трудности. В этой статье я поделюсь с читателями как я вышел из сложившийся ситуации.

Вышла новая версия библиотеки jQuery (упакованный вариант), в которой исправлены мелкие ошибки:

• Атрибуты данных, содержащие в имени один дефис, не были доступны по имени в верблюжьей нотации;
• Обработчик события $(“form”).live(“submit”, fn) не вызывался при нажатии на <button type=”submit”> в IE8;
• Исправлена ошибка с обработкой типа MIME application/xhtml+xml, появившаяся в jQuery 1.6.3.

К сожалению, один баг, влияющий на работу jQuery UJS, так пока и не исправлен.

Пересказ из официального блога

JQuery 1.6.3 наконец вышла! Это уже третий выпуск обновлений для JQuery 1.6.
Как обычно, мы предлагаем две копии JQuery, одну сжатый и другую несжатую (для отладки или изучения).
JQuery 1.6.3 сжатая
JQuery 1.6.3 несжатая

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

Часто встречаются задачи, в которых требуется отобразить древовидную структуру взаимосвязей каких-либо сущностей. Например, навигация по файловой системе, меню сайта или содержание учебника.

Самым простым вариантом отобразить древовидную структуру в HTML являются списки. Но нас интересуют деревья, обладающие динамическими свойствами. Без javascript тут не обойтись. Так как решение нужно обычно быстро, то использование jQuery позволяет создавать динамические деревья, экономя прилично времени на кодинге. Чтобы сэкономить себе еще кучу времени идем на поисковик и ищем подходящее решение. В целом часто на этом дело создание дерева на сайте и ограничивается, но бывают ситуации, когда дерево подходит, но не имеет какой-то маленькой фишки и тут уже ни чего не остается, кроме как модифицировать имеющиеся дерево.

В некоторых случаях абсолютно бессмысленно и неоправданно нагружать как клиентскую часть веб-приложения, так и серверную. Чтобы не ходить долго вокруг да около, приведу пример из жизни. От разработчика мне достался один интернет-магазин, в котором работа с корзиной происходила следующим образом. При клике на кнопку добавления товара в cookie сохранялись ID товара и его количество. Соответственно, чтобы при посещении различных страниц пользователю показывалось, что находится в корзине, в каком количестве, сколько это добро стоит и прочие данные, серверному приложению приходилось выполнять следующие функции:

1. получение списка ID товаров из cookie;
2. запрос в БД, из которой возвращалось название товара, его стоимость и прочие необходимые данные;
3. использование шаблонизатора (Smarty) для генерирование блока корзины на ряду с генерацией остального содержимого.

Все вроде бы и ничего. Я думаю, многие с подобными схемами сталкивались и не раз. Но передо мной стояла задача оптимизации приложения, и я решил убрать среди прочего лишнюю нагрузку с сервера путем устранения как запросов в БД, так и генерацией блока корзины. Хотелось бы хранить все данные о выбранных товарах на стороне клиента. Причем, в идеале хотелось хранить не только массив выбранных товаров, но и уже готовый HTML-код блока корзины, кроме того, таблицу с товарами для страницы оформления заказа. Но как это сделать?

Интервью с Джоном Резигом, опубликованное 25 июля на usesthis.com

Кто вы и чем занимаетесь?

Я JavaScript программист. Я работаю в Khan Academy, разрабатываю обучающую систему следующего поколения. Я создатель и главный разработчик JavaScript библиотеки jQuery и автор двух книг о JavaScript – «Pro JavaScript Techniques» и «Secrets of the JavaScript Ninja».

В данном обзоре я хочу показать как можно расширить возможности компонента Progressbar плагина jQuery UI. Для начала поставим перед собой задачи, которые мы и будем решать:

• прогресс-бар должен быть динамическим, т.е. «бежать вперед» (заполняться) с течением времени
• возможность задавать параметры «бега» бара
• удобство визуального использования. К примеру отображение текущего процента заполнения прогресс-бара

Остановимся подробнее на параметрах «бега». Бар можно параметризовать различными образами: задавая время запуска, шаг и период; время финиша, шаг и период; время старта, время финиша и шаг. Я остановился на последнем, т.е. для инициализации нашего прогресс-бара достаточно указать время старта, время финиша и шаг.

Статья посвящена плагину, который упрощающает жизнь client-side программиста.

При заполнении формы случается так, что учитывая введенные данные, форму нужно менять (прятать и показывать поля). Простейший пример: при заказе доставки товара пользователь выбрал «самовывоз», значит поля про адрес доставки можно спрятать, зато было бы здорово показать карту проезда для самовывоза.

И что дальше

Часто такая логика остается без реализации, однако если вы заботитесь о своих пользователях, то делать это нужно.

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

Второй подход это писать «портянки» javascript'а который всю эту логику реализует на стороне клиента. Особенно грустно писать «каскадную» логику типа «если ввели a в поле A, показать B, если ввели c в поле B, то показать D. Если в A ввели что-то другое, спрятать B, а потом D».

Оба варианта нельзя назвать удобными. Прежде всего потому что логика реализуется императивным стилем вместо уместного для таких случаев декларативного. Но выход есть!

Перевод из официального блога

JQuery 1.6.2 наконец вышла! Это второй выпуск обновлений для JQuery 1.6.

Как обычно, мы предлагаем две версии JQuery, сжатую и несжатую (для отладки или изучения).

Вы можете смело включать вышенаписанные URL-адреса непосредственно на ваш сайт и получить все преимущества быстрой загрузкой JQuery.

Список изменений версии 1.6.2:

В этой статье я расскажу об объекте jQuery.cssHooks, который по умолчанию содержится в jQuery. Расширение этого объекта позволяет добавлять новые свойства или значения, прописываемые в методе .css(), которые изначально не поддерживаются теми или иными браузерами. Возможно, для многих наличие CSS хуков не является новостью, но для меня это стало небольшим открытием.
Для тех, кому лень дальше читать, привожу основную мысль. Допустим, вы хотите в jQuery добавить CSS свойство chuck-norris:

$.cssHooks.chuckNorris = {
	get: function(elem) {
		//проводим манипуляции с узлом elem, получаем value
		return value;
	},
	set: function(elem, value) {
		//проводим манипуляции с узлом elem, устанавливаем value
	}
}

$(el).css(‘chuck-norris’, Infinity);
//или $(el).css({‘chuck-norris’: Infinity});
alert($(el).css(‘chuck-norris’)); //Infinity

Далее будет подробно описана «модификация» свойства background-color для поддержки rgba в старых версиях IE и добавление нового, несуществующего в спецификации свойства background-alpha для удобной установки прозрачности фонового цвета. В IE прозрачность цвета будет реализована с помощью использования свойства filter, добавляя элементу градиент, состоящий из двух одинаковых цветов.

В текущем проекте возникла необходимость выполнить последовательную серию ajax запросов и, по завершении — что-то сделать со всеми их результатами.
Довольно типовая задача, паттерн ее решения обычно называют waterfall (водопад). Реализации этого паттерна есть для node.js, хотя некоторые работают и в браузере — async.
Но включать целый модуль ради одного метода не хотелось. Copy/paste тоже не стал делать, но по соображениям скорее эстетическим. В async в метод передается функция обратного вызова, у нас же везде используется jQuery.Deferred. Разницы, конечно, никакой, но «ломать» стиль проекта мое «чувство прекрасного» мне не позволило :)
В результате написал небольшую утилитку по аналогии с jQuery.when

Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.

Как всё начиналось

В последнее время на многих сайтах можно увидеть в той или иной вариации кнопки для прокручивания страницы вверх или вниз. Смотрится это довольно мило, удобно в использовании, и просто в реализации. Столкнувшись с проблемой прокрутки объёмного контента в очередном разрабатываемом проекте, решил реализовать подобную функциональность.
Задача была следующая: сделать две кнопки. По нажатию на одну осуществлять прокрутку страницы в самое начало, по нажатию на другую – в самый конец. Также было решено дополнительно реализовать возможности чисто визуального характера, типа анимации, исчезновения кнопок и прочее, здесь я останавливаться на этом не буду, так как тема это – кросбраузерность. Собственно это стало основной проблемой в процессе написания кода.
Нарисовав симпатичные кнопочки, прикрутив анимацию и исчезновение кнопок, и реализовав собственно саму прокрутку, я обнаружил, что в разных браузерах наблюдаются проблемы со скроллингом. Раздосадованный (и почему-то ни капли не удивленный…) этим фактом (а также тем, что не получится уйти с работы пораньше), я решил ознакомиться с аналогичными реализациями в Интернете. Просмотрев несколько примеров, точно также, не воспринимающих какой-либо браузер, а подчас и работающих только в одном определённом, было решено заняться прототипированием, экспериментированием, решением задачи методом тыка (нужное подчеркнуть).
Далее я приведу кроссбраузерный вариант реализации простенького скроллинга страницы вверх/вниз, с пояснениями, где и что может пойти не так и в каком браузере (ни в коем случае не претендую на оригинальность решения, это просто желание поделиться собственным опытом, и сэкономить людям время при решении аналогичных задач). Ах да, забыл оговориться, подавляющая часть кода написана на jQuery.

Ранее, в 2007 году, мы выпустили jQuery Color Plugin, и той поры он обеспечивал для вас возможности анимации цвета. Сейчас мы подготавливаем вторую версию этого плагина, в которой добавится API, RGBA, HSLA и ряд других возможностей. Настало время бета-версии! Репозиторий этого плагина находится по адресу github.com/jquery/jquery-color. А на code.jquery.com также доступны две версии плагина — несжатая и сжатая минификатором.

Обзор новых возможностей

RGBA

Теперь мы поддерживаем формат RGBA у значений цвета. В тех браузерах, которые RGBA не поддерживают, ближайшее к элементу значение backgroundColor станет использоваться при вычислении промежуточной аппроксимации цвета. Хотя это не «настоящая» альфа-прозрачность, этот способ, по меньшей мере, обеспечит иллюзию альфы при взаимодействии с одноцветным фоном. Вот как выглядят браузеры Opera 10, Chrome 10, Firefox 3.6 и IE 6, когда в них запущен вон тот демонстрационный пример альфа-наложения:

HSLA

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

API, удобный в употреблении

Вместо простой группы приватных методов-утилит теперь используется вызов $.Color(), создающий новый объект Color. Новый объект Color можно проинициализировать несколькими различными способами: именем цвета, шестнадцатиричным кодом цвета, CSS-подобным значением RGBA или HSLA, массивом RGBA-значений или объектом с цветовым компонентом. Теперь есть и методы-помощники для каждого из цветовых компонентов, наподобие .red() и .hue(), позволяющие считать или задать его значение. В сочетании с функциями-помощниками (например, .toRgbString(), .transition() и .is()), объект $.Color отныне способен обеспечить все ваши цветовые нужды. Глядите README по адресу github.com/jquery/jquery-color — там обзор всех вновь появившихся функций. Теперь jQuery.Color пригоден не только для анимации простых цветов: его API вы можете отныне использовать для сложных цветовых вычислений и анимаций!

Немедленные примеры:

Введение

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