Хабрахабр: Метки / jquery plugins

Хабрахабр: Метки / jquery plugins http://habrahabr.ru/rss/tag/jquery plugins/ ru editor@habrahabr.ru habrahabr.ru Sat, 11 Feb 2012 17:58:47 GMT http://habrahabr.ru/ http://habrahabr.ru/i/logo.gif Хабрахабр <![CDATA[Веб-разработка / Загрузка картинок на сервер с использованием HTML5+jQuery+PHP]]> http://habrahabr.ru/blogs/webdev/136694/ http://habrahabr.ru/blogs/webdev/136694/
Наверняка многие видели в движке WP функцию переноса файлов с рабочего стола в окно браузера и их дальнейшую загрузку на сервер. Когда я увидел такое, мне стало интересно как же это организовано. Тогда я полез в дебри, чуть было не заблудился, но всё таки решение нашел. Оказывается все очень просто.

Что нам понадобится?

Всего лишь небольшие знания HTML5+jQuery+PHP.

Читать дальше →

]]> Fri, 20 Jan 2012 21:26:05 GMT FreeWolfAlex HTML5drag-and-dropзагрузка картинокjquery plugins <![CDATA[jQuery / jQuery Plugin — Scroll Sliders или Ползунки beta]]> http://habrahabr.ru/blogs/jquery/136212/ http://habrahabr.ru/blogs/jquery/136212/ Введение
В прошлой статье, вот ссылочка, я обещал выложить плагин по «ползункам», доработав его учитывая большинство комментариев получилось «это»:

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

Читать дальше →

]]> Sat, 14 Jan 2012 03:10:34 GMT buna1991 jquery pluginsjquerysliderslideScroll SlidersПолзунки beta <![CDATA[jQuery / Plugin Detector — каталог и рейтинг плагинов jQuery]]> http://habrahabr.ru/blogs/jquery/132828/ http://habrahabr.ru/blogs/jquery/132828/
От полуподвальных контор из 3-5 человек до больших фирм 25-40 человек, работающих на рынке дорогих сайтов для крупных заказчиков. Но независимо от размера компании задачи были одни и те же.

нужно продать дизайн
сделать сайт, который не стыдно положить в портфолио
сделать оригинально, как еще не делали конкуренты

Таким образом, задачи верстальщикам и дизайнерам ставились одинаковые: «давайте что-то креативное, свежее, интересное».

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

В этой статье будет затронуто:

описание функционала, история создания, маркетинг в бизнесе веб-студий и работа с клиентами

]]> Thu, 17 Nov 2011 11:25:47 GMT petrovnn jqueryjquery pluginsгалерея изображенийкарусельсравнениекаталогкаталоги скриптов <![CDATA[Веб-разработка / Sisyphus.js — защищаем данные форм пользователя от случайных потерь]]> http://habrahabr.ru/blogs/webdev/131288/ http://habrahabr.ru/blogs/webdev/131288/ В чём проблема?
Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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

Читать дальше →

]]> Thu, 27 Oct 2011 05:11:34 GMT noRerih sisyphusuxusabilityjquery pluginslocalstoragetrollface <![CDATA[jQuery / [Из песочницы] Выпадающий jQuery.Treeview]]> http://habrahabr.ru/blogs/jquery/128990/ http://habrahabr.ru/blogs/jquery/128990/ Вступление

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

Функционал

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

Читать дальше →

]]> Fri, 23 Sep 2011 03:09:48 GMT Nenash javascriptjqueryjquery pluginstreeviewdropdowndropdowntreeviewдерево <![CDATA[Wiki-технология / Русская вики-энциклопедия «Традиция» теперь содержит 27 000 статей]]> http://habrahabr.ru/blogs/wiki/127004/ http://habrahabr.ru/blogs/wiki/127004/ Сегодня утром, завершив в вики «Традиция» работу над статьёю «Ацтекизация», я с удовлетворением обнаружил, что эта статья стала двадцатисемитысячною по счёту.

Взятие этого рубежа, достижение этого охвата радует меня немало. В России лишь четыре энциклопедические вики превосходят Традицию по числу статей: это две специализированные энциклопедии про кино («Энциклопедия кино RuData», насчитывающая 340 769 статей, и «Всё о кино», насчитывающая 47 406 статей), а также два научно-образовательных проекта («Виртуальная лаборатория», содержащая 204 082 статьи, и проект «Летописи», где 43 091 статья).

Кажется, это повод рассказать о Традиции на Хабрахабре.

Читать дальше →

]]> Wed, 24 Aug 2011 13:22:16 GMT Mithgol викиMediaWikiТрадицияjQueryjQuery pluginsqTipYouTubeGoogle VideoRuTubeVimeoBlipTVNewsTubeПервый каналВестиSlideShareGigapanВикиреальностьЦиклопедиясноскиMathJaxматематические формулыOpenStreetMapLeafletWikiLeafletпожертвованияWebmoneyBitcoin <![CDATA[jQuery / [Из песочницы] «Виртуальное хранилище» на стороне клиента с jQuery]]> http://habrahabr.ru/blogs/jquery/126531/ http://habrahabr.ru/blogs/jquery/126531/

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

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

Читать дальше →

]]> Wed, 17 Aug 2011 14:24:48 GMT ttas jqueryjquery pluginsjavascriptхранение информациихранение данныхвиртуальные хранилища <![CDATA[Ajax / Drag-n-drop изменение порядка вывода на ajax]]> http://habrahabr.ru/blogs/AJAX/124013/ http://habrahabr.ru/blogs/AJAX/124013/

или этого:

Но для того, чтобы организовать первый вариант, нужно писать функцию(метод), который будет «раздвигать» записи. То есть: если у нас таблица выглядит следующим образом:

id	name	order
1	name1	1
2	name2	2
3	name3	3
4	name4	4

то для того, чтобы запись с id=4 переместить между 1 и 2, нам потребуется изменить order записей 2 и 3, таблица будет выглядеть следующим образом:

id	name	order
1	name1	1
2	name2	3
3	name3	4
4	name4	2

Это, довольно, нетривиальная задача.

Для организации варианта со второй картинки, требуется телодвижений поменьше, но это неудобно для пользователя. Если у нас в базе 30-40 записей, ему придется 30-40 раз тыкать мышкой на стрелочку вверх. Но ведь для этого есть справа текстовое поле для установки order вручную. Но этот способ не такой очевидный для пользователя. Хочется чего-то интуитивно-понятного и простого по коду.

Статья рассчитана не на профессиональных кодеров(у них есть 5-10 велосипедов для решения этой задачи с много меньшим количеством запросов к БД).

Читать дальше →

]]> Fri, 15 Jul 2011 05:35:34 GMT interrupt_controller webajaxjquery pluginsphp <![CDATA[Веб-разработка / Создание одностраничного ajax-приложения с поддержкой History API (и без нее)]]> http://habrahabr.ru/blogs/webdev/123972/ http://habrahabr.ru/blogs/webdev/123972/ этой статье, создание веб-приложений с возможностью аякс-навигации является интересной для сообщества темой и пока еще немногие сталкивались с подобной задачей. Я расскажу о ее решении с помощью небольшой библиотеки под названием jQuery-Pjax (либо моего форка ее).

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

навигация по сайту и обработка форм без полной перезагрузки страниц
чистые url, доступные для прямого доступа
поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
работа с кнопками «назад» и вперед» для современных браузеров
а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin/
~~похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft)~~ (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api/) — сообщение artishok — проверено и работает на сборке 1074 (not_ice)
imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

Ссылки

jQuery Pjax github.com/defunkt/jquery-pjax
мой форк с поддержкой хеш-навигации github.com/ckald/jquery-pjax
работа библиотеки на примере моего проекта amsterdamusic.com.ua/
пример от создателя pjax.heroku.com/

Принцип работы Pjax

Читать дальше →

]]> Tue, 12 Jul 2011 13:09:00 GMT ckald jqueryjquery pluginspjaxpushStateajaxнавигациявеб-приложения <![CDATA[Wiki-технология / Отключаем библиотеку jQuery, встроенную в движок MediaWiki 1.16.x, и заменяем её на свежую, обновляемую и пополняемую администраторами вики]]> http://habrahabr.ru/blogs/wiki/121252/ http://habrahabr.ru/blogs/wiki/121252/

Как нетрудно прочесть на сайте MediaWiki, нынешняя линейка стабильных версий (1.16.x) поставляется со встроенною библиотекою jQuery, код которой лежит по адресу «skins/common/jquery.min.js». Это jQuery сравнительно старой версии (1.3.2, вышедшая в феврале 2009 года), слегка запатченная для преодоления одного из её багов, и она запускается в режиме совместимости («noConflict()») таким образом, чтобы поместиться в переменную $j вместо $. Этот код jQuery не содержит никаких плагинов и является, в сущности, необязательным, подключаясь к странице только в том случае, когда код MediaWiki содержит вызов метода $wgOut->includeJQuery(). Скажем, расширение UsabilityInitiative содержит именно такой вызов на строке 128 своего файла «UsabilityInitiative.hooks.php», так что jQuery появляется в некоторых темах оформления (например, в Vector), когда расширение UsabilityInitiative подключено к вики.

Предлагаю встать на точку зрения вики-техника, то есть администратора сервера MediaWiki, имеющего прямой доступ (наподобие SSH) и возможность менять настройки вики (LocalSettings.php), доустанавливать расширения MediaWiki и проводить другие подобные действия. Какие обстоятельства могут вызвать у вики-техника MediaWiki 1.16.x стремление переменить к лучшему то положение дел, которое упомянуто в предыдущем абзаце? Каким путём уместнее всего действовать вики-технику на пути воплощения этого своего стремления?

Первотолчком такого стремления является естественное и почти неизбежное осознание того, как неудобна та необязательность появления jQuery в коде страниц, которая настроена по умолчанию. Всякий вики-техник, если он имеет достаточно досуга для размышлений, рано или поздно постигает, что простота и могущество функции $(…), если бы она была всегда в распоряжении администраторов, сочиняющих скрипты для вики, всенепременно породили бы JS-код куда компактнее, чем прежний. Возьмём для примера версию от 22 мая 2011 года страницы «MediaWiki:Common.js» из россияноязычной Википедии. В ней нетрудно заметить вот какой код функции:

Читать дальше →

]]> Mon, 13 Jun 2011 20:11:32 GMT Mithgol jQueryjQuery pluginsвикиMediaWikiрасширения MediaWiki <![CDATA[jQuery / jQuery UI как инфраструктура для плагинов]]> http://habrahabr.ru/blogs/jquery/120074/ http://habrahabr.ru/blogs/jquery/120074/ Введение
jQuery UI больше всего известен как набор готовых виджетов. Главное их преимущество, на мой взгляд, — консистентное API: каждый виджет управляется одинаково. Второе их преимущество — они хранят свое состояние: если повторно навесить виджет на элемент, то результатом будет уже существующий инстанс виджета.
Но jQuery UI — это не только набор окошечек и табов (далеко не всеми любимых). Это еще целая инфраструктура для создания своих виджетов: с удобным консистентным API, с хранением состояния и с возможностью наследования. Как ни странно, это для многих новость, в результате чего и появилась эта статья — так же, как это было новостью для меня всего несколько месяцев назад.

Все, что вы хотели узнать о jQuery UI, но стеснялись спросить

]]> Thu, 26 May 2011 19:25:29 GMT k12th jqueryjquery uijquery plugins <![CDATA[Песочница / [Из песочницы] Расширяем функционал jQuery по работе со стилями]]> http://habrahabr.ru/blogs/sandbox/114913/ http://habrahabr.ru/blogs/sandbox/114913/ $.(“селектор”).css(“свойство”, “значение”);, что не есть хорошо, но несколько строк кода исправили ситуацию.
Каким образом? Читаем ниже.

Читать дальше →

]]> Fri, 04 Mar 2011 18:58:50 GMT andreyv jquery pluginsjavascript <![CDATA[jQuery / [Перевод] Свежая подборка jQuery плагинов]]> http://habrahabr.ru/blogs/jquery/111248/ http://habrahabr.ru/blogs/jquery/111248/ холиварить по поводу и без, но думаю, никто не будет против посмотреть подборку интересных плагинов и уроков:
для удобства – каждая картинка ведет на демо

Hover Slide Effect

Демо | Урок

Галерея состоит из нескольких картинок, при наведении на одну из них она эффектно меняется на другую, а при клике на любую картинку — меняются все одновременно.

Остальные плагины

]]> Thu, 06 Jan 2011 08:18:17 GMT Kicker jquery pluginsjquerydemo <![CDATA[Персональные блоги / CeeBox — легкие фото и видеогалереи]]> http://habrahabr.ru/blogs/personal/102150/ http://habrahabr.ru/blogs/personal/102150/ CeeBox — jQuery плагин для создания галерей типа lightbox.

С помощью этого плагина можно просматривать не только картинки, но и html через ajax и iframe, а также флеш-видео.
CeeBox поддерживает Google Video, YouTube, Metacafe, Vimeo, Dailymotion, iFilm и Facebook Video.

Скачать версию 2.1.3
Примеры]]> Thu, 19 Aug 2010 10:29:09 GMT SageScs ceeboxlightboxjquery plugins <![CDATA[jQuery / Пишем свой плагин для jQuery]]> http://habrahabr.ru/blogs/jquery/101415/ http://habrahabr.ru/blogs/jquery/101415/ Google Maps и с радостью увидел там слой «Пробки». Сразу же глаз зацепился за интересное интерфейсное решение для выбора времени, на которое будет показана ситуация с пробками.

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

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

Читать дальше →

]]> Tue, 10 Aug 2010 15:12:56 GMT akzhan jqueryjquery plugins <![CDATA[jQuery / Делаем красивый input[type=file] с помощью jQuery]]> http://habrahabr.ru/blogs/jquery/98260/ http://habrahabr.ru/blogs/jquery/98260/ Присказка или зачем нужен еще один плагин?
Давным-давно ~~в тридесятом царстве в тридевятом государстве~~ когда web был совсем не 2.0 никому и в голову не приходила мысль о стилизации форм. Сейчас же перед нами очень много решений на чистом CSS, которые кардинально меняют внешний вид элементов. К сожалению, для некоторых элементов это не работает. Особую сложность в этом плане представляет собой input[type=file].

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

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

читаем про разработку

]]> Mon, 05 Jul 2010 09:46:13 GMT sbmaxx jqueryjquery pluginsjavascriptinput fileвелосипедхитрый заказчик <![CDATA[Персональные блоги / jQuery просмотр серверных каталогов]]> http://habrahabr.ru/blogs/personal/97435/ http://habrahabr.ru/blogs/personal/97435/
А файлик передать нужно.

Читать дальше →

]]> Fri, 25 Jun 2010 12:51:34 GMT ApmeM jquery plugins <![CDATA[Персональные блоги / Dock панель для сайта. Выбор подходящего jQuery плагина и руководство по установке]]> http://habrahabr.ru/blogs/personal/95877/ http://habrahabr.ru/blogs/personal/95877/

Красота спасет мир

Обладатели компьютеров Apple давно пользуются красивой и удобной dock панелью. В отличие от этих счастливчиков, я вырос глубоко в сибири и до недавнего времени видел Мак исключительно на картинках.
Но несмотря на это, о dock панели я все же узнал, хоть и случайно, из статьи в одном журнале за 2003 год о dock панелях для Windows. Я поигрался с предложенной программой пару дней, а потом удалил и навсегда забыл о ней. Панель безусловно произвела на меня впечатление приятной внешностью, но все же не несла для меня ощутимой практической пользы.

Дальше — по существу.

За все прошедшее время мне ни разу не пришлось вспоминать об этом небольшом опыте, пока не пришел «заказ» на добавление подобной панели в очередной разрабатываемый вебсайт. Так как библиотека jQuery уже использовалась на этом сайте, я интуитивно начал поиск нужного плагина. Интуиция не подвела, было обнаружено множество внешне не отличимых друг от друга «примочек». Осталось выбрать один единственный вариант и привинтить к странице.

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

Читать дальше →

]]> Wed, 23 Jun 2010 01:21:20 GMT messersveet jquery pluginsdockпростотакрасотища <![CDATA[Персональные блоги / jQuery и маски]]> http://habrahabr.ru/blogs/personal/97036/ http://habrahabr.ru/blogs/personal/97036/ Было решено делать на jQuery. Из всего этого вышел Masker.

Страничка плагина и описание

Проверялось в: IE 7-8, FF 3.6, Safari 5, Chrome 5]]> Mon, 21 Jun 2010 12:36:19 GMT vkharkov jqueryjquery pluginsmasker