jQuery

Самые лёгкие плагины jQuery

2009/7/16 7:45 7

Настраивая давеча один пивной проект на движке livestreet, поразился - насколько у людей велико стремление к прекрасному, насколько оно властно и уверенно водит рукой программиста, заставляя воткнуть 2 десятка скриптов и кучу прочего барахла на главную страницу. YSlow в ужасе рапортует: "22 external Javascript scripts, 5 external stylesheets,22 external background images, убейте меня кто-нибудь"!

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

  • markItUpmarkItUp - не помню, писал ли я о нём раньше? А ведь этот плагин к jQuery (6.5KB) уже больше года трудится у меня в админке, успешно работая редактором разметки. Html, Textile, Wiki Syntax, Markdown, BBcode - если хотите свою собственную разметку - тоже пожалуйста, лёгкий, безглючный, настраиваемый.
  • Colorbox - легкий и функциональный lightbox для изображений, то есть скрипт реализующий всплывающее окошко для отображения чего угодно (в данном случае - картинок). Просто посмотрите демо, и вы полюбите его!
  • vTip - самый маленький tooltip - всплывающая подсказка над текстом, скрипт весит меньше килобайта.
  • jFlow - слайдер контента. 3 KB, стили настраиваем как нам нравится, неплохое решение для одностраничных сайтов, или например для не слишком длинных характеристик товаров в интернет-магазине
  • jqModal - вплывающие информационные (модальные) окна. 3 KB, максимально дружественный код, всё настраивается, цветет и пахнет.
  • jGrowl - не удержался и перепостил еще раз, не очень миниатюрный код, но зато элегантный и впечатляющий результат!
  • jQPie - и самое вкусное под конец обзора! jQPie - легковесный php интерфейс к jQuery, фичи описывать не буду, смотрите сами!

Постовой в этот раз поддерживают на ходу автомобили с пробегом, они же - подержанные авто

Верстка макета с jQuery

2009/6/1 14:34 4

jQuery Masonry

В голову сразу приходят масонство, тайные собрания, знаки посвященных и Дэн Браун почему-то за компанию. Тем не менее всё совсем не так страшно, masonry - это ещё и "кладка", это которая кирпичная

jQuery Masonry css layout

jQuery Masonry - плагин к jQuery, организовывающий верстку страницы в стиле кладки. Все блочные элементы (слои, списки, параграфы) плагин располагает как кирпичи в кладке, собственно на иллюстрации виден принцип. Настроек нет, все нюансы описываются в .css файле, enjoy!

A Simpler CSS Layout System

Снова jQuery, но теперь плагин выполняет миссию "семантизатора" (Womanizer, womanizer, womanizer, o-lo-lo - простите, вырвалось!).

Simple CSS layout with jQuery

Принцип действия плагина прост: создает макет, размечаем блоки... а потом размещаем контент (визуально) в нужном нам порядке, всего лишь указывая нужные параметры в стилевом файле. Звучит бестолково, понимаю, но зато семантически верно: например, в картинке выше блоки в тексте html кода вполне могут идти в таком порядке - c,b,a,d. Или любом другом, порядок их размещения можно изменить быстрее, чем я написал это предложение, нет, правда!

И совсем не про jQuery - Better CSS Font Stacks. Вводная статья со ссылкой на полный вариант в .pdf (13 мегабайт, с примерами, блекджеком и всеми делами, да). Верстальщику - маст си, это для себя, чтобы не забыть.

И чтобы 2 раза не вставать - преобразователи частоты - такие частотные преобразователи, просто не верится!

jQuery + z-index = фотогалерея

2009/3/21 14:37 

"Свойство z-index для блочных элементов обойдено вниманием несправедливо, о юный падаван", сказал мастер Йода. А если попробовать управлять им с помощью jQuery, то можно получить много интересных фокусов, решил Sebastian Senf и предложил элегантное решение для фотогалереи

z-index manipulated gallery

В отличие от множества существующих, листание этой галереи не приводит к её концу: листать можно по кругу. Этот плюс рождает и соответствующий минус: нет предпросмотра картинок, картинки загружаются на страницу сразу все и переход возможен только к следующей или предыдущей. Однако для небольших галерей (меньше 10 картинок), например для репортажей, иллюстраций к новостным заметкам - вполне подойдет.

На выходе получается вполне себе валидный код, небольшой объем и конфигурируемость в умелых руках делают скрипт весьма привлекательным. Enjoy!

Simple tip - всплывающая подсказка на jQuery

2009/2/13 0:31 

A simple jQuery tooltip pluginЕще один лёгкий (3.4 кб) скрипт, реализованный в виде плагина к полюбившемуся java-script фреймворку jQuery - Simpletip. Всплывающая подсказка - tooltip - дело рук Крейга Томпсона из Ньюкастла, стабильная версия 1.3.1 доступна для скачивания и использования совершенно бесплатно. Всплывающая подсказка с максимумом степеней свободы

Простая всплывающая подсказка - tooltip

- от простейшей подсказки (с относительным или фиксированным позиционирование), с эффектами или без оных, до полноценных окон с rich html объектами внутри - как статичными, так и динамически созданными с помощью ajax, фактически это облегчённая версия lightbox. Раздел плагина имеется на страницах Googlecode и jQuery plugin project.

При поддержке: Основное строительство ангаров и складов под ключ

Релиз jQuery и скрипты

2009/1/25 13:4 

Во-первых, jQuery зарелизился, но в традиционном посленовогоднем угаре на такие мелочи никто внимания не обращает. Газа, газ, Обама, кризис - богатый январь приключился на события. И только Dimox заметил, что для текущей версии jQuery не предлагают упакованной версии. То есть я тоже заметил, но не придал значения, а Dimox разобрался, что minified хотя и больше по размеру, но грузится быстрее чем packed, ибо для последней еще нужно время на распаковку на стороне клиента, вот так.
А тем временем, за неделю накопилось несколько полезных скриптиков :

jQuery Price Format Plugin

Данный плагин, как видно из названия, осуществляет жесткий контроль над текстовым полем в форме ввода данных. Игнорирует все не цифровые символы, а цифровые отображает согласно заданной конфигурации. Визуально отделяет копейки от рублей, тысячи от миллионов - однозначно полезная вещь. На практике ввод o вместо 0 - не самый еще плохой вариант, бывало и похуже, с этим плагином вводить цену можно доверить даже секретарше.
Скачать jQuery Price Format Plugin (2 кб).

Sexy Curls jQuery Plugin

The Sexy Curls jQuery Plugin Этот плагин с игривым названием добавляет на страницу слой, скрывающий до поры заданное изображение. Картинку можно увидеть, потянув за уголок страницы, этот самый уголок можно вволю таскать взад-вперёд, открывая и закрывая картинку. Практическое применение плагина - неизвестно, но выглядит симпатично, да.
Скачать Sexy Curls jQuery Plugin (3.5 кб)

Accessible News Slider

Еще один горизонтальный слайдер для html-блоков, лёгкий и конфигурируемый, предназначен для создания скроллируемой ленты новостей, можно с картинками. При прокрутке автоматически создает кнопки "вправо"-"влево", ненужное убирает. Основное отличие от сотен ему подобных - есть опция "развернуть-свернуть" все блоки, то есть слайдер превращается просто в список новостных блоков, довольно удобно, пожалуй, задействую в одном проекте.
Скачать Accessible News Slider (3кб)