jQuery *

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

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

Минусы jQuery Tools Tooltip, плюсы SimpleTip, а так же немного о том, как решить некоторые проблемы его использования.

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

У многих из нас есть блоги, интернет-магазины, новостные сайты etc… Понятное дело стараемся опубликовывать оригинальный контент, но что же происходит после появления контента в интернетах, его конечно же просматривают и если он интересный, пользователи иногда обмениваются ссылкой на страничку с контентом. Новые переходы на нужную страницу и нам очень хорошо, а что если наш отличный текст просто взяли скопировали и скинули в аську\скайпик\почту — наш текст ушел, а перехода нету :(.



Запретить копирование, это очень неправильно, весело и смешно ©, но мы ведь можем при копировании добавить в буфер обмена ссылку на наш сайтик. Рассмотрим как же нам это лучше сделать:

Если у вас не хватает времени привести в порядок формы на вашем сайте, в помощь придет небольшой плагин jqTransform.
Подключите его и скормите форму. На выходе получится визуально более приятная форма с подсветкой полей в фокусе.

Сегодня утром я зашёл на Google Maps и с радостью увидел там слой «Пробки». Сразу же глаз зацепился за интересное интерфейсное решение для выбора времени, на которое будет показана ситуация с пробками.

Сразу же захотелось использовать подобный орган управления в своих проектах.

Самое время вспомнить, как пишутся плагины под jQuery.

Хочу представить читателям интересный jQuery плагин, который будет интересен тем, кто хочет использовать на сайте какую-то интересную анимацию без использования Adobe Flash.

Однажды на просторах Хабра встретил плагин FormNavigate (требующий у пользователя подтверждения на закрытие вкладки или переход по ссылке, когда данные в форме заполнены, а-ля gmail), а однажды потребовалось его даже применить.

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

Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для: $('a:not([class~="ajax"])') (предложенный автором прошлого топика $('a:[class!="ajax"]') вообще вытворяла чудеса).

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



В плагине обрабатываются события onready, onerror, onfocus, onblur и т.д. поэтому его можно расширить как захочется. Также блокируется ввод неподходящих символов.

Работоспособность проверялась в IE6-8 и Браузерах.

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

UPD1 dohlik :)

Присказка или зачем нужен еще один плагин?

Давным-давно в тридесятом царстве в тридевятом государстве когда web был совсем не 2.0 никому и в голову не приходила мысль о стилизации форм. Сейчас же перед нами очень много решений на чистом CSS, которые кардинально меняют внешний вид элементов. К сожалению, для некоторых элементов это не работает. Особую сложность в этом плане представляет собой input[type=file].

С этим элементом, средствами CSS, мы можем разве что изменить размер шрифта. Все мы любим власть. Ты ведь хочешь полностью контролировать этот неподатливый file? Тут нам на помощь приходит волшебная связка современного интернета — JavaScript + CSS.

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

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

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

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

Долгое время любил и люблю нативный javascript без всяких примочек и рамочек. Однако фреймворки — вещь полезная!
По долгу службы полюбил jQuery, и пусть судорожно вздохнут все противники, а холивары с завистью потрут руки, но для меня это хоть и не было любовью с первого взгляда — теперь $() в моем сердце.
И, чтобы не быть эгоистом, делюсь со всеми своим первым публичным плагином — hcloud

с примерами и интересной информацией о глобализации

В прошлом месяце я рассказывал в блоге о том, как Microsoft начала поставлять код в jQuery и о нашем первом проекте, над которым мы работали – шаблоны и связывание данных в jQuery (о связывании на Хабре).

Сегодня, мы выпустили прототип нового плагина под названием jQuery Globalization, который позволяет добавить поддержку глобализации в ваши JavaScript-приложения. Этот плагин включает информацию о глобализации для свыше 350 культур от шотландской кельтской, фризской, венгерской, японской до канадского английского. Мы выпустим этот плагин для сообщества с открытым исходным кодом.

Вы можете загрузить наш прототип плагина jQuery Globalization из репозитория на Github:http://github.com/nje/jquery-glob

Кроме того, отсюда вы можете загрузить набор примеров, которые демонстрируют некоторые простые юзкейсы.

Хочу представить вашему вниманию интересный плагин для jQuery — AeroWindow, позволяющий создать ваш сайт в стиле Windows Aero. Он создает появляющиеся окна в стиле Window 7 Aero, которые предлагают обычные опции и полную функциональность похожую на окна Windows.

Думаю, листалкой на Flash или Silverlight никого не удивишь — но что насчет листалки на HTML5 ? Вооружившись статьей Rick Barraza о листании страниц на Silverlight, я сделал вполне себе приятную листалку в виде jQuery плагина.



Проект доступен под лицензией MIT по адресу jpageflipper.codeplex.com Текущая версия — 0.9, пока не хватает теней и мелких плюшек, а также возможности ставить несколько листалок на страницу.

Демка доступна на dl.dropbox.com/u/7235888/index.html

Ну и, соотстветственно, раз уж это HTML5, в некоторых браузерах возможна некорректная работа (ну или ее полное отсутствие). Работает в Chrome 4+, Firefox 3.5+, Opera 9.6+, Safari 4+

UPD: выложил демку на dropbox.com по наводке otaqsun

У меня на хабре очень крупное приданное избранное. Там что-то найти было очень сложно, а если ещё не помнишь как и что, то чрез чур. По сему решил написать на jQuery фильтр всего этого добра по тэгам. Для того бы сграбить закладки, прошлой весной ukko сделал простой граббер. В итоге у нас получался огромный htm в формате NETSCAPE Bookmarks и xml.

Принцип работы прост, устанавливаем себе грабер, получаем заветный habrabookmarks.htm, и просто запускаем мой файл сортировки рядом.

Здравствуйте. Проблема в том, что на данный момент в плагине coda-slider нет добавления класса для текущей панели. У него есть возможность добавлять текущий класс к динамическим вкладка, если они включены в настройках. Но, мне понадобилось добавлять текущий класс именно к элементам, которые прокручиваются слайдером.

Задача использования на сайте различных анимированных объектов, как то меню или фотогалерея, уже давно не является редкостью. И здесь на помощь разработчикам приходит замечательный jquery-метод animate(). Этот метод позволяет анимировать различные свойства css, но имеет один довольно существенный недостаток – в качестве значения свойства может использоваться только число, либо значения hide, show и toggle. Например, height:20 – верно, а вот height:auto будет работать не всегда и не везде.

Попробуем решить эту проблему на конкретном примере

Привет всем!

Я разработчик из команды Microsoft ASP.NET. Наша команда выдвигает предложение по поддержке связывания данных (data linking) в jQuery и мы хотели бы услышать ваши отзывы.

Ниже я расскажу про связывание в общем плане, более подробное объяснение вы можете найти на специальной wiki-странице:

http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal

Мы создали прототип связывания данных и опубликовали его на github:

http://github.com/nje/jquery-datalink

Репозиторий включает в себя demo-contacts.html, который показывает использование связывание данных на практике и который так же использует ранее предложенную нами библиотеку шаблонов jQuery (jQuery templating library). Я предлагаю вам попробовать демонстрацию, так как примеры опубликованные в wiki и в этой статье всего лишь показывают работу с API и не передают всей полезности плагина так, как это делает демонстрация.

Термин “связывание данных” (data linking) используемый в статье означает: “автоматическое связывание поля одного объекта с полем другого объекта”. Это означает, что когда два объекта связаны, при изменении значения одного из объектов (источника) автоматически изменяется значение другого объекта (цели). Связывание может происходить между любыми двумя объектами, такими как простые объекты (plain objects), массивы, элементы DOM или плагины браузера.