jQuery *

В этой статье я расскажу об объекте 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 и json, при переходе на jQuery 1.4.
В новой версии используется встроенный парсинг JSON, а вместе с этим становится необходимо следить за его (json’a) правильностью.
Примеры, как делать не надо:

{ 'qwe' : 'asd' }
{ "qwe" : 'asd' }
{ qwe: "asd" }
{ qwe: 'asd' }

т. е. такие варианты теперь не проходят. Использовать надо только двойные кавычки!

{ "qwe" : "asd" }

Если же у вас нет возможности внести изменения в серверные скрипты, то на клиенте быстрый фикс можно сделать следующим образом:

$.ajax({
url: "/test.php",
dataType: "text",
success: function(data) {
json = eval("(" + data + ")");
// alert(json.success);
}
});

Возможно, кому-то окажется полезным. Всем спасибо, всем удачи!

Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».

Пример:

<style type="text/css">
 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</style>

<script type="text/javascript">
 $(function(){
  $('#link-1').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '25%' });
  });
  $('#link-2').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '-25%' });
  });
 });
</script>

<div id="div-1" style="left: -25%;"></div>
<a href="#" id="link-1">Animate to 25%</a>
<a href="#" id="link-2">Animate to -25%</a>

Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.

Знаете ли вы, что с помощью jQuery можно загружать не только контент страницы, но и выбранного контейнера на ней? Оказывается можно и делается это следующим образом:

$("#area").load("something.html #content");

Данный код найдет на странице something.html контейнер с id content, возьмет его содержимое и загрузит в контейнер с id area. Но есть одно но…

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

Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.

Всем давно известно, что jQuery легко расширяем. Сегодня мы добавим новый селектор — :regex.

Меня всегда интересовало, почему при разработке сайтов, так редко в системе навигации используется Ajax? Ведь преимущества по-моему очевидны! Сайт на аякс работает в разы быстрее любого обыкновенного сайта, и даже если учитывать кэш браузера, это заметно.

Хочу поделиться с хабросообществом javascript-библиотекой fc.tape. Её назначение — управление анимацией спрайта, представляющего собой склеенные кадры.
Демо

Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!

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

Хочу поделиться с обществом собственным плагином, который упрощает работу с динамическими формами и называется jqDynaForm. Под динамическими формами я подразумеваю формы, в которые при заполнении пользователь может добавлять по необходимости дополнительные поля или блоки полей. Разумеется, в каждом месте разрешено добавлять только заранее разрешенные виды блоков. Вот примеры подобных простейших форм:

1. Контактная форма, в которой есть поле «телефон». Пользователь может добавить еще несколько дополнительных полей для телефонов, если возникнет желание.

2. Счет на оплату. Есть фиксированный набор полей, таких как «имя плательщика» и «номер счета». Кроме того, есть таблица с позициями. Каждая позиция состоит следующих полей: «наименование», «количество», «цена». Пользователь может добавлять произвольное количество дополнительных позиций.

Давайте рассмотрим работу с jqDynaForm на примере такого счета. Вот пример такой формы:

Мы подошли к первому обновлению jQuery 1.6 и рады сообщить о выходе первого релиз-кандидата! Данный код, скорее всего, пойдёт в итоговую версию 1.6.1 (она выйдет ближе к концу недели) — всё, кроме (возможных) критических багов, конечно же.

Скачать код можно из jQuery CDN:
http://code.jquery.com/jquery-1.6.1rc1.js

Можете поспособствовать нам, поместив этот код в ваше рабочее приложение и дав знать, если что-то перестанет работать. В этом случае, пожалуйста, убедитесь, что вы тестируете конкретно jQuery 1.6.1 RC 1 и заведите баг.

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

Обновление с 1.5.2 до 1.6.1

Появление нового метода .prop(), а также изменения в работе метода .attr() — породили целую дискуссию о различиях между атрибутами и свойствами и их взаимосвязи. Кроме того, возникли некоторые проблемы с обратной совместимостью, которые были исправлены в 1.6.1. Другими словами, при обновлении с 1.5.2 до 1.6.1, вам не нужно менять какой-либо старый код.

Итак, мне понадобилась поддержка событий online/offline в браузерах(напомню, что согласно черновику
html5 они возникают при появлении/исчезновении соединения соответственно). На данный момент Mozilla и
IE8 эти события поддерживают. А это уже немало.

Наверное много кто знает что в jQuery есть набор стандартных событий, таких как Click или MouseDown и прочие, на которые можно повесить обработчики или возбудить с помошью функций click() mousedown() и прочих. Чуть поменьше людей знают, что те-же самые действия можно сделать с помощью функций bind() и trigger():

$(document).bind('click', function(){
  alert('It works!');
});

$(document).trigger('click');

* This source code was highlighted with Source Code Highlighter.

И наверное мало кто знает, что в функциях bind() и trigger() можно использовать свои собственные события. Зачем это нужно, я и хочу рассказать на примере.

После приобретения телефона на базе Android, возникла задача сделать из сайта brainexer мобильное приложение. Выбор пал на jQuery Mobile и PhoneGap. До этого никаких познаний в обрасти мобильной разработки не было, поэтому пришлось осознать некий пласт новой информации, выжимкой из которого я бы и хотел поделиться. В итоге статья представляет из себя небольшой quick start — как из пачки html файлов получить приложение опубликованное в Google Play.

Блог Interoperability @ Microsoft сообщает о том, что в будущей версии библиотеки jQuery 2.0 (первого марта была вторая бета) появится полная поддержка создания приложений для Windows 8. Над вкладом в самую популярную JS-библиотеку работала инициативная группа appendTo при технической поддержке подразделения Microsoft Open Technologies, Inc. (MS Open Tech). В связи с чем, как сообщается, разработчики получат уникальную возможность создавать программы для Windows Store в привычной среде и с использованием уже существующего JS-кода.

Также отмечается, что на данный момент для создания Windows 8-приложений уже можно использовать ряд других фреймворков — backbone.js, Knockout.JS, YUI — поэтому добавление к этому арсеналу такой популярной вещи как JQuery, должно сказаться положительно на мотивации разработчиков. При этом, конечно, Microsoft обеспечивает полный доступ ко всем возможностям WinRT API.

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

Код jQuery beta 1 доступен для скачивания из jQuery CDN.

Список изменений в этой версии состоит из 45 строк, упоминающих 47 решённых проблем. Большей частью они посвящены обезжучиванию (избавлению от багов) и отлаживанию (избавлению от лажи), но там есть и с полдесятка небезынтересных новинок:

• Подобно методу .bind(), методы .delegate() и .live() теперь приемлют false в качестве сокращения кода function(){return false;}.
   
• Методы .is() и .not() теперь умеют принимать элементы DOM и коллекции jQuery в качестве аргументов.
   
• Метод .clean() не будет воздействовать на элементы script, не имеющие типа «text/javascript».
   
• В методе .css() появилась поддержка строк, содержащих относительные значения.
   
• Новая функция requestAnimationFrame будет использоваться вместо прежней setInterval для анимаций, если она есть во браузере.

Думаю, многие из вас видели плагин для wordpress. Симпатичный шарик привлек мое внимание и мне захотелось его поковырять...
Разочарованию не было предела ― он оказался на флэше(против флэша ничего не имею). Ладно, флэш так флэш нагуглил исходники, распаковал архивчик, а там… А там море файлов с кодом, файлы для настройки с парой десятков опций, несимпатичный фалик для вывода всего этого, для генерации xml'ки.
С этим я мириться уже никак не хотел и решил написать тоже самое, но на javascript. Привык я работать с jQuery поэтому решил сделать в качестве плагина для него.