Вызов функции из плагина jquery. Создание специального плагина jQuery. Приступаем к работе
jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.
Page Layout плагины
equalize.js - это плагин для jQuery, который позволяет создавать блочную структуру сайта. Он позволяет выравнивать высоту и ширину любого элемента.
Новый плагин для адаптивных макетов.Freetile позволяет создавать элементы любого размера, при этом необходимость создания фиксированного размера столбцов сетки отпадает.
Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.
Zoomooz.js - это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.
Wookmark — плагин для создания динамичного многоколоночного шаблона.
jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.
Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.
Плагин jQuery, который добавляет эффект реального переворачивания страниц при переходе между разделами. Используется аппаратное ускорение. Работает на планшетах и смартфонах.
Плагин для адаптивной типографики. Он позволяет вам использовать селектор, генерирующий идеальный размер шрифта.
Позволяет построить анимированные перемещения по сайту, включая все возможные трансформации
Плагины для навигации
HorizontalNav - это jQuery плагин, который растягивает горизонтальное меню, чтобы она соответствовала всей ширине контейнера. Если Вы когда-либо пытались создать эффект правильной натяжки меню навигации на CSS контейнер у проекта, то Вы однозначно знаете насколько это тяжело сделать для кросс-браузерной совместимости. Данный плагин делает это с легкостью.
stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).
ddSlick - плагин, который позволяет создавать выпадающие меню с изображениями и описаниями.
Плагин для простой организации раскрывающихся панелей. Плагин поддерживает работу с куки для хранения состояния панелей. Среди опций есть возвратные функции для настройки процесса открывания и закрывания секций.
Плагин для создания сворачивающихся блоков, которые могут содержать любые данные в ограниченном пространстве.
Формирующие плагины
Плагин позволяет определять уровень сложности пароля.
JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.
Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.
Плагин для фильтрации данных. Вы можете фильтровать данные по тегу и по нескольких тегам и категориям.
Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п.).
Плагины для создания слайдеров и каруселей
Плагин, который позволяет управлять переходами с помощью мыши, тачпада и клавиатуры. К переходам, которые установлены по умолчанию, можно добавлять дополнительные, которые также есть в исходном файле.
iosSlider
iosSlider — плагин для адаптивного кроссбраузерного слайдера.
RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.
Fresco — адаптивный лайтбокс-плагин. Он может использоваться, чтобы создать ошеломляющие оверлейные программы, которые отлично работают на любых размерах экрана, во всех браузерах, на всех устройствах.
BookBlock: Содержимое Флип Plugin
BookBlock — jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.
Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.
Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.
Rhinoslider - довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру.
Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.
Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.
Плагины для диаграмм и графиков
Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.
JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.
Плагины для типографики
Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.
Textualizer - jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.
trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.
Плагины для создание различных эффектов для изображений
Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.
Плагин для реализации эффекта адаптивных изображений.
jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.
Дополните библиотеку jQuery своим собственным кодом
Библиотека jQuery ускоряет программирование на языке JavaScript. Она позволяет писать меньше кода, упрощая процесс программирования. Иногда, используя библиотеку jQuery, можно обнаружить, что то и дело переписываешь один и тот же код часто используемых функций. В этом случае имеет смысл написать свой собственный специальный плагин jQuery.
Плагины jQuery позволяют пополнять библиотеку jQuery своим кодом; их можно использовать для любых повторяющихся функций. Например, имеется множество плагинов для демонстрации слайд-шоу и создания раскрывающегося списка или меню "аккордеон". Если поискать плагины jQuery, то можно найти множество примеров, которые можно использовать в собственных проектах (и посмотреть, как они построены).
Часто используемые сокращения- CSS: Cascading style sheet / Каскадная таблица стилей
- HTML: Hypertext Markup Language
Эта статья учит, как быстро создать специальный плагин jQuery. На примере кода с пошаговыми инструкциями демонстрируется процесс создания jQuery-плагина accordion. Статья рассчитана на тех, кто знаком с jQuery и готов поднять свои навыки на следующий уровень.
Приступаем к работеjQuery ― это библиотека, которая расширяет язык JavaScript. Создавая новый плагин, вы, по существу, расширяете библиотеку jQuery, которая, в свою очередь, расширяет JavaScript. Чтобы понять, как именно ваш плагин расширяет библиотеку jQuery, требуется понимание свойства JavaScript prototype . Это свойство используется не явно, а скрыто ― через свойство jQuery fn , которое представляет собой jQuery- псевдоним собственного свойства prototype JavaScript.
Чтобы создать новый jQuery-плагин, используя свойство fn , достаточно присвоить его имя свойству fn и указать ему на новую функцию, которая будет выступать в качестве функции-конструктора, как в обычном JavaScript. Код, приведенный в листинге 1, показывает, как определить новый jQuery-плагин с именем accordion с помощью объекта jQuery и свойства fn , а затем присвоить ему новую функцию конструктора.
Листинг 1. Определение нового jQuery-плагина с именем accordion jQuery.fn.accordion = function() { // Добавить здесь код плагина };В листинге 1 показан один из способов создания jQuery-плагина; в этом примере нет ничего функционально неправильного. Однако рекомендуется сначала создать функцию-оболочку, которая позволит использовать знак доллара ($). По умолчанию знак доллара может вызвать конфликты с другими структурами JavaScript. Если же упаковать плагин в функцию, конфликтов не будет, и знак доллара можно использовать. Пример кода, приведенный в листинге 2, демонстрирует, как применить функцию-оболочку к определению jQuery-плагина.
Листинг 2. Упаковка нового jQuery-плагина с именем accordion в функцию-оболочку (function($) { $.fn.accordion = function() { // Добавить здесь код плагина }; })(jQuery);В листинге 2 ключевое слово jQuery применяется к функции-оболочке, что позволяет использовать знак доллара в пределах плагина, как это делается при использовании свойства fn . С функцией-оболочкой можно использовать знак доллара вместо ключевого слова jQuery во всем плагине без помех для других плагинов. Это позволяет писать меньше кода и помогает сохранить код плагина чистым и простым в обслуживании.
Сохранение chainabilityПреимуществом jQuery является возможность использовать любой тип селектора. Однако нужно иметь в виду, что ваш плагин может работать с несколькими различными типами элементов. Используя ключевое слово this , можно применять связанные функции, обращаясь к каждому элементу в цикле, независимо от типа этого элемента. Если ключевое слово return предшествует циклу each , то можно сохранить свойство chainability своего плагина. В листинге 3 показан цикл each , назначенный обработчику функции и скомбинированный с ключевым словом return .
Листинг 3. Использование ключевого слова return перед циклом each (function($) { $.fn.accordion = function() { return this.each(function() { // Использование return позволяет сохранить chainability }); }; })(jQuery);Благодаря коду, приведенному в листинге 3, пример плагина accordion можно использовать в цепочке вызовов методов. Chainability — еще одна важная особенность jQuery — позволяет использовать плагин в цепочке вызовов методов. Например, следующий код показывает, как HTML-элемент постепенно гасится, а затем удаляется из объектной модели документов (DOM) в одной цепочке вызовов методов.
$("#my-div").fadeOut().remove(); Структурирование "аккордеона"Типичная конструкция "аккордеон" включает в себя строки заголовков и смежные с ними области с некоторым содержимым. "Аккордеоны" отлично подходят для HTML-структуры определения списков; для заголовков используются элементы dt , а для областей содержимого ― элементы dd . Структура HTML из листинга 4 представляет собой определение списка с четырьмя заголовками и соответствующими областями содержимого.
Листинг 4. Одна цепочка вызовов методов Section 1 Section 2 Section 3 Section 4В определении списка из листинга 4 также имеется класс CSS с присвоенным ему именем accordion . Без всяких CSS эта структура "аккордеон" соответствует неформатированной структуре с рисунка 1.
Рисунок 1. Структура "аккордеон" без CSS
Класс accordion используется для применения стилей к общему определению списка, заголовкам и области содержимого. В примере, приведенном в листинге 5, в самом классе accordion указаны ширина, границы, шрифт и размер шрифта. Любой из примеров применения CSS можно изменить, выбрав свои собственные стили, такие как цвет, шрифт, размеры и интервалы.
Листинг 5. Класс CSS accordion, используемый для задания стилей общего определения списка .accordion { width: 500px; border: 1px solid #ccc; border-bottom: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }Затем класс CSS accordion используется для определения стилей заголовков (dt) и содержимого dd . И заголовки, и содержимое содержат общие стили, которые определяют нижнюю границу и задают значение полей 0, что позволяет областям заголовков и содержимого располагаться впритык друг к другу, как показано в листинге 6.
Листинг 6. Общие стили заголовков и областей содержимого "аккордеон" .accordion dt, .accordion dd { border-bottom: 1px solid #ccc; margin: 0px; }Чтобы элемент dt был больше похож на заголовок, зададим цвет фона и добавим указатель курсора, чтобы создать впечатление активного заголовка. В этом классе есть и другие стили, такие как отбивка или размер и плотность шрифта. Элемент dd добавляет отбивку, чтобы отделить описание от заголовка. Пример приведен в листинге 7.
Листинг 7. Стили CSS для заголовков и областей содержимого "аккордеон" .accordion dt { background: #eaeaea; cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: bold; } .accordion dd { padding: 12px 8px; }Когда все классы CSS добавлены, визуальный результат больше напоминает аккордеон, как показано на рисунке 2.
Рисунок 2. Структура "аккордеон" с применением CSS
Программирование плагинаЧтобы сделать аккордеон функциональным, необходимо написать код функций jQuery-плагина, который мы начали создавать в предыдущем разделе. Плагин accordion начинается с циклического считывания всех определенных "клавиш аккордеона". Для определения "аккордеона" используется следующий вызов jQuery в пределах HTML-документа или во внешнем внедренном файле JavaScript.
$("dl#my-accordion").accordion();Для каждой "клавиши" вызываются соответствующие определения с помощью метода jQuery children , который возвращает массив элементов dt . Применим событие click к элементам dt , а затем к каждому dt ― метод с именем reset . Метод reset позволяет свернуть все элементы dd при первой загрузке accordion. Событие click вызывает специальный метод с именем onClick при нажатии на элемент dt или заголовок. Метод onClick выполняет поиск всех элементов dt в "аккордеоне". Он вызывает специальный метод hide , который скрывает каждый соответствующий элемент dd с помощью метода next для поиска элемента dd , смежного с элементом dt , а затем сдвигает его вверх для анимации процесса закрытия.
Когда все элементы dd скрыты, элемент dd , связанный с нажатым элементом dt , становится видимым благодаря методу slideDown и создает анимацию расширения и сжатия, как показано в листинге 8. Последняя строка кода в методе onClick - это строка return false , которая гарантирует, что никакой нажатый заголовок не будет проявлять свое обычное поведение. Например, при использовании элемента anchor в качестве заголовка понадобится метод return false , чтобы пользователь не попал на другую страницу или в другую часть существующей страницы.
Листинг 8. Специальные функции accordion, используемые для создания jQuery-плагина (function($) { $.fn.accordion = function(options) { return this.each(function() { var dts = $(this).children("dt"); dts.click(onClick); dts.each(reset); }); function onClick() { $(this).siblings("dt").each(hide); $(this).next().slideDown("fast"); return false; } function hide() { $(this).next().slideUp("fast"); } function reset() { $(this).next().hide(); } } })(jQuery);Если плагин accordion связан со структурой списка HTML-определений, как тот, что мы создали ранее, будет применяться функция accordion. В функциях accordion при нажатии на один заголовок или элемент dt открывается соответствующая область содержимого, а любые другие открытые области содержимого закрываются. Иными словами, в каждый момент времени может быть открыта только одна область содержимого.
Значения по умолчанию и параметры настройкиПлагин JQuery может содержать значения по умолчанию и параметры настройки. Параметры настройки ― это, по существу, те аргументы, которые передаются плагину. Вместо передачи нескольких аргументов с параметрами настройки можно передать один аргумент в качестве литерала объекта, что является стандартным приемом для jQuery. Если в плагине разрешены параметры, то следует указать для них значения по умолчанию с помощью объекта defaults . Как и параметры, значения по умолчанию представляют собой литерал объекта, который должен содержать свойства, передаваемые в плагин.
Например, если допускается свойство, которое можно использовать для открытия первой области содержимого "аккордеона" при его первой загрузке, то в плагине следует указать значение по умолчанию для этого свойства. Используйте значения по умолчанию для определения состояния функций по умолчанию, а параметры настройки ― для переопределения значений по умолчанию. Когда плагин получает параметры, для фактического переопределения можно использовать метод $.extend . Метод $.extend jQuery объединяет два или более объектов. Пример, приведенный в листинге 9, демонстрирует обычную практику использования метода $.extend для соединения определяемых пользователем параметров со значениями по умолчанию в плагине jQuery.
Листинг 9. Добавление параметров настройки и значений по умолчанию в плагин jQuery (function($) { $.fn.accordion = function(options) { var settings = $.extend({}, {open: false}, options); return this.each(function() { var dts = $(this).children("dt"); dts.click(onClick); dts.each(reset); if(settings.open) $(this).children("dt:first-child").next().show(); }); function onClick() { $(this).siblings("dt").each(hide); $(this).next().slideDown("fast"); return false; } function hide() { $(this).next().slideUp("fast"); } function reset() { $(this).next().hide(); } } })(jQuery);Аргументами метода $.extend служат целевой объект и два или более объектов, подлежащих объединению. В этом примере целевым объектом является пустой литерал объекта, который служит контейнером для объединяемых объектов. Цель становится единым объектом, который содержит значения объединяемых объектов ― в данном случае переменной settings . Второй аргумент ― это литерал объекта, содержащий свойства плагина по умолчанию. Третий аргумент ― определяемые пользователем параметры настройки. Чтобы передать параметры настройки с помощью плагина accordion в HTML-элементе, нужно знать, какие свойства плагин исключает, чтобы их можно было передать в виде литерала объекта, как показано ниже.
$("dl#my-accordion").accordion({open:true});В примере, приведенном в листинге 9, параметры, передаваемые плагину, переопределяют значения по умолчанию с помощью метода $.extend . Если никакие параметры не передаются, используются значения по умолчанию. В примере плагина свойство open используется для определения того, должна ли при его загрузке открываться первая область содержимого.
Возможность многократного использованияПример плагина accordion можно многократно использовать в любом HTML-документе, в том числе в одном и том же. Используя новый созданный нами плагин accordion, можно включить несколько таких структур "аккордеон" и определить каждую из них отдельно как jQuery accordion. Чтобы добавить в HTML-документ несколько "аккордеонов", просто добавьте нужное количество структур accordion. Код, приведенный в листинге 10, включает две структуры accordion, разделенных знаком конца абзаца.
Листинг 10. Использование нескольких "аккордеонов" в пределах одного и того же документа HTML Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. Section 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Section 4 Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate.Две структуры accordion в листинге 10 почти идентичны, не считая их содержания и, что еще важнее, значений их идентификаторов. Первая структура содержит значение идентификатора my-accordion . Вторая структура содержит значение идентификатора my-accordion2 . Теперь к этим структурам можно обращаться независимо друг от друга. Например, следующий сценарий jQuery определяет каждую структуру "аккордеон" с использованием нового созданного нами плагина.
$("dl#my-accordion").accordion({open:true}); $("dl#my-accordion2").accordion({open:true});Обе структуры "аккордеон" определяются с открытой первой панелью по умолчанию. На рисунке 3 приведен пример использования нескольких плагинов accordion в одном и том же HTML-документе.
Рисунок 3. Несколько структур "аккордеон" в одном и том же HTML-документе
Собираем все вместеСоздав новый специальный jQuery-плагин accordion, написав CSS и разместив разметку HTML, можно собрать все это вместе на окончательной Web-странице. Чтобы jQuery-плагин accordion работал, необходимо внедрить библиотеку jQuery. Я предпочитаю использовать сеть доставки контента (CDN), которая доставляет библиотеки в зависимости от географического положения пользователя и поэтому обеспечивает максимально возможную скорость загрузки файла. Библиотека jQuery есть в CDN Google, и этот файл можно внедрить на Web-страницу, воспользовавшись URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js .
Имеются и другие версии библиотеки. См. ссылки в разделе на библиотеки на сайте Google для разработчиков. Единственные дополнительные файлы, которые нужно указать в HTML-документе, это файл CSS, который определяет стили "аккордеона", и jQuery-плагин accordion. После этого HTML-разметка фактических структур "аккордеон" изменится. Пример приведен в листинге 11.
Листинг 11. Определение двух структур "аккордеон" как jQuery-аккордеонов Creating a Custom jQuery Plugin $(document).ready(function() { $("dl#my-accordion").accordion({open:true}); $("dl#my-accordion2").accordion({open:true}); }); Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. Section 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Section 4 Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. ЗаключениеВ этой статье показано, как легко создать специальный jQuery-плагин. Любые повторяющиеся функции, которые вы создаете, можно быстро преобразовать в плагин для ускорения и повышения эффективности разработки. Ключ к любому плагину ― многократное использование, а многократное использование ― залог повышения производительности.
1. Реализация портфолио с использованием jQuery галереиМиниатюры проектов прокручиваются при изменении положения курсора мыши в левой колонке. В области содержимого отображается увеличенное изображение с названием проектов, описанием и списком используемых технологий. При переходе между миниатюрами информация о проектах сменяет друг друга с потрясающим анимированным эффектом. При нажатии на изображение на странице с описанием, оно увеличивается также с использованием jQuery анимации. Еще хочется отметить потрясающий элегантный внешний вид всей страницы портфолио. Смотрите демо.
2. Супер реализация сайта-портфолио с использованием CSS и jQuery
Превосходная реализация сайта-портфолио фотографа. При нажатии на пункт меню из разбросанных по экрану квадратов собирается область с контентом фиксированной высоты и ширины. Для того, чтобы поместить больше информации в фиксированную область, предусмотрена прокрутка содержимого. Необычно реализована реализация показа работ из портфолио: при клике по миниатюре фотография отображается в виде фонового изображения, которое автоматически масштабируется при изменении размера окна браузера.
3. Стена-портфолио на jQuery
Оригинальное решение для создания онлайн-портфолио. Блоки проектов (миниатюры и краткое описание со ссылкой) отображаются по несколько в ряд, при изменении окна браузера блоки перераспределяются равномерно на странице с анимированным эффектом. У каждого проекта может быть несколько изображений-миниатюр, переход между которыми осуществляется с помощью стрелочек. При нажатии на ссылку открывается страница с полным описанием, на которой текст помещен на полупрозрачном блоке фиксированной высоты с прокруткой. В качестве фона страницы используется масштабируемое изображение проекта. Выглядит прикольно - смотрите демонстрацию.
4. Плавная jQuery прокрутка страниц
Реализация вертикальной и горизонтальной прокрутки.
5. Плагин jQuery «Draggable Image Boxes Grid»
Перетаскиваемая сетка, состоящая из блоков с содержимым и изображений. Сетку можно перетаскивать с помощью мышки (нажать любую кнопку мыши и тянуть в нужную сторону). При клике на миниатюру основное изображение разворачивается на всю ширину экрана. При клике темный блок с текстом, раскрывается область с более подробным описанием.
6. Одностраничный сайт портфолио
Одностраничный сайт с анимированной сменой содержимого. На демонстрационной странице пройдитесь по вкладкам меню, чтобы увидеть эффект.
7. Переключение вида отображения блоков на jQuery
С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.
8. Шаблон для сайта ресторана с jQuery галереей и картой от Google
Оригинальное jQuery решение, созданное для сайта кафе. В шаблоне реализована интересная jQuery галерея для показа блюд из меню. Изображения в галерее масштабируются в зависимости от размера окна браузера. Сперва, в галерее отображаются уменьшенные изображения с названием и кратким описанием блюд, при этом полноразмерная фотография отображается затемненной на заднем фоне. Навигация между доступными фотографиями осуществляется с помощью стрелок или колеса мыши. Щелчок мыши в режиме галереи уберет миниатюры с описанием и даст возможность рассмотреть оригинальные большие изображения, растянутые на всю ширину окна. Для возврата в меню сайта из галереи необходимо нажать на ссылку в правом верхнем углу. Помимо шикарной jQuery галереи в шаблон очень эффектно интегрирована карта от Google.
9. Плагин Plasm The Wall
Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.
10. Плагин для отображения элементов по окружности
Отображение на странице различных элементов по окружности заданного диаметра.
11. Страница-заглушка «Сайт в разработке»
На странице реализована возможность отправить е-мейл адрес, который записывается в базу данных и на который можно будет выслать уведомление об открытии сайта. Также страница украшена небольшим слайд-шоу, реализованном на базе jQuery плагина Nivo Slider v. 2.3 .
12. Плагин QuickFlip 2
С его помощью вы сможете сделать интересный эффект поворачивающейся визитной карточки при нажатии на ссылку.
13. JQuery карта кликов
Идея заключается в отслеживании кликов пользователей. Для того чтобы посмотреть плагин в работе на демонстрационной странице, покликайте мышкой, а затем нажмите кнопку «Анализ». И на полупрозрачном фоне отобразятся точки, где вы кликали мышью.
Реализация симпатичной экранной клавиатуры. Мало ли, для чего-то вам пригодится.
15. Записки jQuery
Реализация листков с записками. Текст можно редактировать, а сами записки удалять или перемещать по экрану. Чтобы посмотреть пример, перейдите на демонстрационной странице на вкладку «Demo».
16. Рейтинг на jQuery
Интересное оформление ссылок: при наведении на ссылку изменяется ее анкор. Смотрится прикольно.
18. jQuery Fancy капча для формы регистрации
Реализация капчи для формы регистрации. Плагин представляет собой набор цифр, которые необходимо путем перетаскивания выставить в порядке возрастания. Довольно интересный способ для подтверждения того, что регистрацию проходит живой человек, а не робот.
Внизу экрана отображаются кнопки, которые можно использовать для плавной прокрутки страницы вверх или вниз.
20. Переводчик. jQuery плагин «jTextTranslate»
Плагин использует Google Language API и может переводить текст на любые языки, предоставляемые Google. Для перевода необходимо нажать на значок рядом с абзацем и из выпадающего списка выбрать язык, на который необходимо перевести.
21. jQuery плагин для постраничной навигации
Отличная реализация прокручивающихся ссылок для постраничной навигации. Реализовано с использовании jQuery.
22. jQuery плагин «Заметки»
Этот jQuery плагин позволит реализовать «бумажные» заметки на вашем сайте.
23. jQuery плагин «Catch404»
Плагин для создания анимированной цепочки навигации «Хлебные крошки»
25. Плагин «Reel»
jQuery плагин для реализации страницы с товарами. При нажатии на изображение товара появляется его описание.
27. jQuery плагин «3D облако меток»
jQuery эффект вертикальной прокруткой страницы. Отлично подойдет для реализации одностраничных сайтов и сайтов-портфолио. Для просмотра эффекта нажмите на пункт меню на демонстрационной страницы.
30. jQuery плагин «Rating System»
jQuery эффект для реализации оценки чего-либо. Цвет кружков и текст под ними изменяется в зависимости от того, на какой из них наведен курсор мыши.
31. jQuery Panel Magic
Плагин, реализующий навигацию по сайту. При этом ваш сайт представлен в качестве сетки документов, между которыми осуществляется переход с интересным jQuery эффектом.
Вы можете легко использовать этот плагин для создания небольших сайтов и веб-приложений. Так же он не плохо будет смотреться на сайтах-портфолио.
32. Индикатор загрузки на Mootools, плагин «MoogressBar»
Эффектный индикатор загрузки.
33. Mootools плагин «CwComplete»
При заполнении поля, плагин подскажет возможные варианты для заполнения с использованием Ajax, при этом он отфильтрует и покажет только те варианты, которые удовлетворяют уже введенному в поле тексту.
34. Отличный ajax-чат с применением jQuery и CSS3
Перед тем как начать общение посетитель должен ввести свой ник и e-mail. В правой колонке показано, сколько человек авторизованы в чате. Используемые технологии: PHP, MySQL, jQuery, CSS.
35. Реализация страницы «Предложить по проекту»
Посетители могут добавить новое предложение либо проголосовать за уже существующее. Отличное решение для тех, кто хочет узнать мнение своей аудитории о сайте. Также эту страницу можно использовать чтобы накопить новые идеи для дальнейшего развития вашего проекта. Используемые технологии: PHP, MySQL, jQuery, CSS
36. Реализация голосования/опроса с помощью PHP и jQuery
Аккуратная реализация опросов на сайте. Используемые технологии: JQuery, Ajax, PHP и MySQL.
Очень интересное решение для реализации голосования на сайте. Перетаскивая вверх и вниз блоки, схватив мышкой за изображения, можно расположить их на странице в любой последовательности. Чем выше вы оставите блок, тем лучше его оценили и, соответственно, если блок разместить в самом низу, значит, он меньше всего вам понравился. После того, как вы расставите блоки в нужной последовательности, необходимо нажать на кнопку «Submit poll», чтобы голос был учтен. На странице с результатами отображаются результаты голосования и количество проголосовавших посетителей. Используемые технологии: CSS, PHP, MySQL, jQuery.
Простая система комментирования на Ajax с проверкой правильности ввода информации. Комментарии хранятся в базе данных. Реализовано с использованием: PHP, MySQL, CSS, jQuery.
40. Счетчик количества скачиваний файла
Использованные технологии: PHP, jQuery, CSS.
При переходе по пунктам меню содержимое подгружается без перезагрузки страницы. Используемые технологии: PHP, jQuery, CSS.
43. jQuery поиск по сайту с использованием технологии от Google
Реализация поиска по сайту с использованием API Google AJAX Search . Вы сможете предоставить возможность посетителю произвести поиск как на вашем сайте, так и в интернете. При этом поиск можно осуществлять не только по страницам сайта, но и по изображениям и мультимедийным файлам.
44. jQuery эффект наложения описания на изображение
Очень интересный эффект, может быть использован в реализации портфолио. При нажатии на изображение оно затемняется полупрозрачным фоном, и появляется надпись с описанием того, на что следует обратить внимание.
45. Реализация страницы «Вопрос-ответ» с помощью jQuery
jQuery реализация страницы FAQ на сайте. Вверху страницы отображается список вопросов. При нажатии на вопрос страница плавно прокручивается к выбранному вами, и активный вопрос с ответом на него подсвечивается другим цветом. Так же в поле активного ответа появляется ссылка для возврата к списку вопросов.
46. Сайт на Ajax. Содержимое подгружается без перезагрузки страницы
Цвет изменяется при наведении курсора мыши. Можно сделать так, чтобы цвет изменялся случайным образом.
48. Путеводитель по сайту с использованием jQuery
С помощью этого интересного плагина можно познакомить посетителя с основными функциями вашего сайта, если он попал на него впервые. При загрузке страницы в верхнем правом углу выезжает блок с предложением провести экскурсию по сайту. Если посетитель впервые зашел на ваш сайт, он может с помощью небольшого путеводителя познакомиться с основными функциями. При этом страница затемняется и необходимые блоки на каждом шаге помечаются пометкой. Если же посетитель уже был ранее на вашем сайте, он просто может закрыть окно с предложением экскурсии по сайту.
49. Виртуальный тур по сайту «Joyride Kit»
С помощью этого плагина можно познакомить посетителя с основными функционалом страницы. Делается это в виде последовательного всплывающего описания элементов. Посетитель может посмотреть все подсказки, нажимая на кнопку Next, либо закрыть онлайн-тур (если он уже не первый раз попадает на эту страницу) воспользовавшись крестиком.