jQuery

сентябрьские jQuery плагины

2009/10/15 19:54 

"сентябрьские jQuery, взлетая выше ели" - поём на мотив песенки "Крылатые качели", или когда одолевает писательский зуд, а писать не о чем - то пишем о плагинах, via ajaxian, там ещё много, я только интересные мне лично выбрал.

(mb)ConteinersPlus - этот компонент позволяет создавать полностью настраиваемые контейнеры с данными. Непонятно? Если проще, то эта штука делает лайтбоксы с заданными моделями поведения - то есть не просто всплывющие скрытые доселе слои, а полноценные элементы интерфейса сайта - они могут сворачиваться, менять стиль, подгружать контент, полный ajax короче, без демо не объяснишь.

de-padify - йет анозер бесконечный скроллер подгружающегося контента, как в просмотре rss-подписок в Google Reader (демо), весьма полезная штука в редких случаях, взял на заметку, может быть ещё на этой неделе пристрою в работу.

jFEF - Javascript Flash Embeded Font. No comments, даже не знаю как оно дружит с кириллицей, однако это первый релиз, если на странице несколько таких блоков - память жрёт только в путь, возможны глюки, просто наблюдаем, в продакшен не рекомендовал бы.

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

maxChar - ограничивает количество символов, вводимых в текстовое поле и показывает сколько осталось. 5kB.

Smart Cart - плагин реализует корзину для интернет-магазина. По-моему, реализует весьма неплохо.

Вот такие полезные прибамбасы, а если кто и не использует jQuery, то им для сайта потребуются анкеры, саморезы, дюбели!

jQuery Address - Deep linking plugin

2009/10/9 15:47 

Deep linking - термин, практическая необходимость в котором для меня лично сомнительна, большинство мне подобных соглашаются что термина "гиперссылка" вполне достаточно. Тем не менее крючкотворы утверждают, что Внешнее Связывание (нет, это не подраздел в фетише, это перевод термина такой) как гиперссылка на конкретный документ сайта существенно отличается от ссылки просто на сайт (его главную страницу) и даже доказали это несколькими судебными процессами.

Однако даже из абсурда можно извлечь пользу, если подойти с умом: например ссылаться на определённый участок текста веб-страницы, это бывает полезно если страница большая и нужный текст долго искать, это давно реализовано в HTML с помощью a name.

Плагин jQuery Address позволяет организовать такие сылки с максимальным удобством для читателя, а именно:

  • Создавать псевдостатичные ссылки на участки текста вида www.site.com/singlepage/#/textpart.html
  • Снабжать эти сылки самостоятельными заголовками (видимыми в заголовке браузера), динамически подменяя тег title

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

Идейным сподвижником этого поста, всерьёз планирующим использовать этот плагин в своих мануалах был ремонт холодильников аристон (ariston).

jQuery LazyLoad - отложенная загрузка изображений

2009/10/1 22:29 

jQuery LazyLoad - java-script плагин, позволяющий экономить время посетителя, трафик и нагрузку на ваш сервер. Известная проблема: далеко не всегда посетители, попадающие на вашу страницу, находят на ней то что им нужно. А время уходит, картинки грузятся долго, трафик расходуется, процессор работает. Хорошо, если заметка короткая, а ну как это статья на 10 экранов насыщенная графикой?

jQuery Lazy Load

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

И еще много полезных советов на otvetin.ru

Динамическая генерация фрейма с jQuery

2009/9/19 2:40 

Для динамического создания фрейма на странице потребуется:

  • собственно сама подключенная библиотека jQuery
  • небольшой java-script включенный в заголовок страницы
  • ссылка на страницу, которую мы хотим отобразить во фрейме с соответствующими атрибутами: class и rel. Class укажет скрипту, что эту ссылку необходимо открыть во фрейме, а rel передаст атрибуты фрейма, если они должны будут отличаться от заданных по умолчанию.
  • ...
  • PROFIT! Больше не нужно заморачиваться со скриншотами, любой образец можно отображать прямо на страничке - от картинок с фликра до работающих скриптов!

На всякий случай напоминаю, что не все фреймы одинаково полезны, открывая таким образом неведому фигню, вы рискуете наградить этой фигней и посетителей, так что желательно лишний раз удостовериться в безопасности предлагаемого посетителям контента.
Санкции от поисковиков крайне маловероятны, фрейма ведь на странице нет, он создаётся ди-на-ми-чес-ки! Смотрим образец на странице автора: inFrame: Keep Demos Inside the Page with 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, фичи описывать не буду, смотрите сами!

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