15 очень крутых и удивительных jQuery макетов и UI плагинов

В нынешнее конкурентное время каждый хочет привлечь внимание своей целевой аудитории. Каждый из нас, правда? Да, на просторах интернета все стремятся предоставить своим посетителям удивительный дизайн, расширенные возможности с быстрой навигацией, чтобы похвастаться и получить признание. И в этом нам помогают последние разработки HTML5 и CSS3. Но с сожалением приходится признать, что работы с HTML5 и CSS3 для управления веб — страницей недостаточно, и когда этот факт становится достаточно раздражающим, в игру вступают плагины JQuery.

Реклама: Сервис RemontPk.com тщательно чистит ноутбуки
15 Super Cool and Awesome jQuery Layout and UI Plugins

Итак, сегодня мы поговорим о 15 потрясающих JQuery макетах и UI плагинах, которые вам непременно пригодятся в работе.

 

1. jQuery Responsive Web

instantShift - jQuery Responsive Web

Интерактивный дизайн — это новая тенденция в отрасли веб — разработок. Если вы используете интерактивный дизайн на своем сайте, вам никогда не понадобится его отдельная мобильная версия для посетителей, использующих смартфон или планшет для доступа в интернет. Удивительный jQuery Responsive Web заставляет ваш сайт адаптироваться под любые размеры экрана.

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

Для реализации этого в существующий сайт или блог нужно просто добавить код «$ (window) responsiveWeb ();» в ваш .js файл. Кроме того, убедитесь, что вы используете версию JQuery v1.2.x и выше.

 

2. jQuery UI Layout

instantShift - jQuery UI Layout

jQuery UI Layout  - еще один фантастический плагин JQuery, который быстро и легко выполняет множество функций. Вдохновил на создание этого плагина его предшественник BorderLayout ExtJS, но новая разработка предлагает лучший контроль и позволяет легче настроить макет. С помощью jQuery UI Layout  вы можете создать любое оформление пользовательского интерфейса, начиная от простых заголовков или боковых панелей, заканчивая сложными приложениями со статусом, панелью инструментов, меню, вложенными формами и многим другим. Он предлагает неограниченные возможности планировки и десятки вариантов интерфейса с полным контролем CSS.

При использовании этого плагина, вы можете использовать любые элементы HTML5, такие как дивы, фреймы и т.д. Кроме этого, вы можете также применять его в комплексе с другими JQuery UI виджетами, чтобы придать вашей работе особое изящество.

 

3. Shapeshift

instantShift - Shapeshift

Вы когда-нибудь слышали о jQuery Masonry? Этот также популярный JQuery плагин не попал в наш список. На создание Shapeshift разработчиков вдохновил именно он. jQuery.Shapeshift предназначен для построения сеточных макетов наподобие Pinterest. jQuery.Shapeshift — полноценная альтернатива с приятным бонусом: элементы сетки можно перетаскивать. Перемещения никак не воздействуют на сетку, она заполняет освободившееся место автоматически. Плагин отлично работает с адаптивными шаблонами и сенсорными устройствами.

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

Некоторые продвинутые особенности Shapeshift, которые сделают его вашим любимчиком:

  • Система сетка колонн: Все присутствующие элементы движутся сверху вниз и слева направо
  • Схема drag & drop («перетащил и оставил»): Вы можете перетаскивать веб-элементы, чтобы переместить их на макете
  • Адаптивность: как только вы поменяете размер окна браузера, сетка под него изменит свою величину
  • Работа на touch — устройствах: интегрирует его с JQuery UI Touch Punch, который позволяет работать схеме drag & drop на сенсорных устройствах.

 

4. jLayout

instantShift - jLayout

Вы хотите иметь в распоряжении продукт, предлагающий различные схемы алгоритмов? Тогда попробуйте использовать плагин jQuery jLayout. Этот идеальный плагин предлагает четыре макета алгоритмов для размещения HTML — элементов на веб — странице. Первый алгоритм представляет собой границы, разделяющие компоненты на 5 разных территорий. Второй — это сетка, в которой компоненты разложены по схеме, определенной пользователем. Третий — это flexGrid, представляющий данные в виде таблицы. Последний и завершающий алгоритм – это поток, который размещает компоненты в строки, а при дефиците горизонтального пространства данные могут перемещаться в новые строки.

 

5. jQuery Full Content

instantShift - jQuery Full Content

Размышляли ли вы когда-нибудь о возможности запуска сайта или приложения в полноэкранном режиме? Если нет, то вам будет интересно узнать об этой новой тенденции в отрасли веб — разработок. С плагином jQuery Full Content достижение этой цели выглядит довольно простым. Этот плагин создает контейнеры с полной шириной и высотой окна экрана и добавляет им динамическую позицию. Каждый такой контейнер может быть легко установлен в любом горизонтальном или вертикальном положении. Прокрутка анимации с этим плагином может осуществляться между двумя и более контейнерами. В дополнение к этому, плагин jQuery Full Content очень легко настраивается и довольно простой в использовании. Он поддерживает Internet Explorer версии 8.0+.

 

6. CSS-Template-Layout

Вы когда-нибудь слышали о CSS-Template-Layout от W3? http://www.w3.org/TR/2009/WD-css3-layout-20090402/

Наверное, да, но этот проект все еще находится в разработке. Однако, вы можете воспользоваться его способностью ломать определенный набор CSS-правил и отображать содержимое так, как определено в спецификации. Лучше всего этот плагин характеризует его возможность поддерживать почти все современные и старые браузеры, например, у вас не возникнет с ним проблем в обозревателе Internet Explorer версии IE6+, Firefox 2+, Opera 9+, Safari 3.1+ и Chrome 1+.

Его дополнительные возможности:

  • Добавив немного кода «$.templateLayoutShowOnReady ()» перед $(document).ready (function) {}, можно избежать кратковременного появления шаблона, страница перед DOM загружается полностью
  • С помощью кода «$. RedoTemplateLayout ()» вы можете легко снова запустить процесс шаблона
  • Вы можете использовать / реализовать JQuery функцию CSS (имя, значение), если вы хотите изменить свойства отображения и позицию шаблона на конкретных веб — элементах.

7. jQuery Nested

instantShift - jQuery Nested

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

 

8. Columnizer

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

Самое замечательное, что вы всегда имеете возможность задать ширину и количество столбцов, которые будут использоваться. Главное, определитесь с предпочтениями, остальную работу оставьте Columnizer.

У этого удивительного плагина есть много других особенностей:

  • В его последней версии можно устанавливать разрывы между строками для некоторых или всех столбцов, присутствующих на вашем сайте.
  • Можно изменить параметры и устанавливать разрывы только вручную, без автоматического columnizing -эффекта, который стоит по умолчанию.
  • Любой узел класса CSS, обозначенный как «columnbreak», будет работать как разрыв столбца для этого конкретного столбца.
  • Если вы столкнулись с какой-либо ошибкой при использовании CSS классов, которые Columnizer применил с другими стилями, просто соедините их все с помощью «cssClassPrefix».

 

9. Freetile.js

instantShift - Freetile.js

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

Хотя создателей Freetile изначально вдохновили другие JQuery layout плагины, такие как vGrid, Woomark и Masonry, но им удалось сделать кое-что особенное. Чтобы применять его на сайте, Вам не нужно определять ширину столбцов, соответствующую размеру веб — элемента. Более того, вы также можете настроить Freetile согласно собственным предпочтениям.

 

10. Gridster.JS

instantShift - Gridster.JS

Gridster – это еще один потрясающий плагин JQuery для работы с интерфейсом. Он похож на плагин  Shapeshift , который мы уже рассмотрели выше. Gridster позволяет строить макеты интуитивно, перетаскивая веб — элементы через несколько столбцов, расположенных на веб — странице. С помощью этого плагина вы можете динамически добавлять или удалять элементы из сетки.  Для обеспечения гладкой и эффективной работы Gridster  на сайте, используйте только Internet Explorer 9 + и последние версии Firefox, Google Chrome, Opera и Safari.

 

11. Script.Aculo.Us

instantShift - Script.Aculo.Us

Script.aculo.us имеет открытый исходный код, но представляет собой полноценную JavaScript библиотеку, которая помогает веб — разработчикам строить интуитивно понятный пользовательский интерфейс и создавать мощные веб — сайты. Эта удивительная script библиотека предоставляет своим пользователям некоторые интересные функции и полный контроль в интернете с помощью визуального эффекта двигателя, автозавершение на основе Ajax, редактирование на месте, библиотека drag and drop, слайдеры и многое другое. Однако, если вы не хотите предлагать одновременно все эти функциональные возможности конечным пользователям, вы можете ограничить выполнение всех сценариев, определив их в список, разделенный запятыми, который будет выглядеть примерно так:

1 <script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

 

12. Grid-A-Licious

instantShift - Grid-A-Licious

Сегодня в тренде стиль Pinterest, поэтому перед веб — разработчиками ставится задача сделать подобный пользовательский интерфейс для своих сайтов. И Grid-A-Licious легко может помочь в этом. Но он по-прежнему имеет уникальное отличие по сравнению с остальными плагинами такого рода. Grid-A-Licious мягко адаптируется к различным размерам и разрешениям экрана. Поэтому, если вы хотите строить мощные, легко реагирующие сайты, то вы должны попробовать Grid-A-Licious всего один раз, чтобы узнать о своих возможностях и о его простоте.

Помимо адаптивности, есть еще некоторые интересные особенности Grid-A-Licious, которые перечислены ниже:

  • Настройка ширины просвета между колонками
  • fadeInOnAppear эффект (возможность убрать/добавить элемент на страницу)
  • Prepend и Append методы для добавления новых элементов
  • Полный комплекс мероприятий Call back

 

13. Metro UI CSS

instantShift - Metro UI CSS

Когда Microsoft запустила Windows 8 на мировой рынок, его пользовательский интерфейс привлек массу внимания, и люди начали делать свои веб — сайты с аналогичным UI. Для веб – разработчиков создание подобного интерфейса является, конечно, задачей трудоемкой, но не более того. Metro UI CSS дает им возможность разрабатывать двойников Window 8 за короткий период. Metro UI CSS использует предопределенные CSS стили и разметки. С замечательным Metro UI CSS можно изменять и лучше контролировать ваше меню и навигацию, «аккордеон», кнопки, рейтинг, «карусель», слайдер, боковую панель, диалоговое окно, календарь и т.д.

Особенности:

  • Он был разработан с использованием LESS — динамического языка стилевой разметки
  • Вы можете скачать его бесплатно, по обратным ссылкам
  • Он поддерживает адаптивный макет
  • Он обладает легкой в использовании grid – системой

 

14. jQuery EasyUI

instantShift - jQuery EasyUI

Фреймворк EasyUI , как следует из названия, помогает разработчику создавать пользовательские интерфейсы. EasyUI является частью коллекции JQuery UI плагинов, которые предлагают важнейшие функции для создания современных интерактивных веб — приложений, имеющих индивидуальный дизайн пользовательского интерфейса. Это мощный инструмент экономии времени, а лучшее в нем то, что он также может быть использован при создании пользовательского интерфейса для HTML5 и JavaScript приложений. Его можно успешно применять при разработке приложений Drag and Drop, меню, кнопок, макетов, DataGrids, data Windows, data Trees и Forms.

 

15. jQuery Tools

instantShift - jQuery Tools

JQuery — это мощная JavaScript библиотека, которая может легко повысить общую функциональность  веб — сайта. И JQuery Tools представляет собой массивный свод наиболее важных JQuery элементов, которые могут быть использованы для создания удивительных пользовательских интерфейсов, с подсказками, «аккордеонами», вкладками, навигацией и визуальными эффектами.

Для использования JQuery Tools не нужно быть специалистом в веб — дизайне, новичок может также легко его применять, поскольку есть много демоверсий на их главном сайте. По ним можно обучаться, также доступен их исходный код для развития. Кроме того, JQuery Tools библиотека регулярно обновляется.

Если это список JQuery UI макетов и плагинов не стал полезным для вас или вы применяли какие-то из данных плагинов, пожалуйста, поделитесь своим опытом в комментариях ниже.

Источник: instantShift


Оставить комментарий