15 лучших jQuery-плагинов для создания вкладок Javascript


Оглавление (нажмите, чтобы открыть):

Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление

Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге.

С тех пор прошло 2 года, я набрался определенного опыта в работе с jQuery, и вышеуказанный скрипт превратился в абсолютно новый скрипт, написанный мною полностью с нуля. Перед этим был еще один вариант данного скрипта, которым я пользовался, наверное, год. О нем я нигде не писал, да и сейчас уже нет смысла это делать, т.к. он потерял свою актуальность.

Почему я называю свой новый скрипт для jQuery-вкладок универсальным:

  • он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов, как это было сделано в старом варианте;
  • можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
  • содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,3 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.

Что ж, хватит сухих слов, переходим к сути.

Код jQuery-скрипта для переключаемых блоков с вкладками

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

Я предпочитаю «брать» его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip), и, например, для версии 1.4.2 размер составляет всего 24 килобайта по сравнению с несжатым файлом (70 Кб).

Вот такой у меня получился скрипт:

Добавлено 07.03.2010 (обновлено 09.04.2015)

В комментариях подсказали еще более сокращенный вариант этого скрипта (обратите внимание, что для него нужно использовать jQuery не ниже версии 1.7):

Для тех, кто еще не знает, как подключать этот скрипт — создать файл с расширением .js , вставить в него код скрипта и подключить по аналогии c jQuery (см. выше), естественно, заменив ссылку на адрес скрипта.

Скачать

Универсальный jQuery-скрипт для блоков с вкладками

Загрузок: 26145 | Размер: 15 Кб

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

HTML-код, который нужно использовать для скрипта

Обратите внимание, что структура HTML-кода строго привязана к скрипту, поэтому, если вы пожелаете изменить названия используемых классов, не забывайте их поменять и в скрипте.

Обязательные CSS-стили для вышеуказанного HTML-кода

Если, например, необходимо, чтобы по умолчанию отображался второй блок, тогда нужно переместить класс .active во второй блок div.tabs__content , а также переместить класс .active во второй элемент в списке вкладок.

Примеры

  • 1-й пример.
  • 2-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью cookie).
  • 3-й пример, в котором запоминается активная вкладка после перезагрузки страницы (с помощью localStorage, меньше кода по сравнению с cookie).
  • 4-й пример, в котором при переходе по ссылке с якорем, указывающим на номер таба, активируется соответствующий таб.

P.S. Мне в твиттере как-то сказали, что я «изобретаю колесо», что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я «изобрел колесо», главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

Требуется разработка печатного каталога товаров или услуг? Создание каталога в студии «Верстаем.ru» это оптимальное решение!

w3.org.ua

уроки front-end и back-end

Рубрики

Вкладки на javaScript

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

Конечный результат можно посмотреть здесь:

В данном примере мы разберем как создавать простые вкладки на чистом Java Script. Для того, чтобы обеспечить универсальность кода, вкладки и их содержимое будем обозначать используя классы. В HTML документе наберем следующий код:

Где tabs — блок-обертка, tab — заголовки вкладок, по которым осуществляется клик мышью, tabContent — содержимое вкладок.

Особенностью данного кода является то, что в html коде вкладка и ее содержимое не связаны.

Добавим оформление CSS для вкладок.

Как видно, в css введено два класса: hide — который служит для скрытия содержимого вкладки и show который показывает ее. Также есть класс whiteborder — который выделяет активную вкладку.

Как вы уже поняли, мы будем с помощью JS присваивать вкладкам нужные классы CSS, тем самым скрывая или отображая их.

Пишем код в JS

Для начала объявим глобальные переменные tab и tabContent, в которых будут содержаться элементы массива объектов с соответствующими классами.

Скрывать вкладки при первоначальной загрузке будем с помощью JS. При загрузке страницы выполним следующий код:

Простые горизонтальные вкладки (табы) для сайта на jQuery/JavaScript

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

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

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

Простые горизонтальные вкладки (табы) для сайта на jQuery

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

Основной контент (изображения и текст) в них адаптивен, остальное же вы дорабатываете по необходимости. Блок с вкладками занимает всю ширину области в которой находится.

Для установки табов на jQuery сделайте следующее.

1. Если у вас отсутствует библиотека jQuery, то подключите ее на вашем сайте в секцию HEAD:

2. Далее на нужные страницы вы вставляете верстку вкладок:

и заполняете их необходимым содержимым.

Для создания новых вкладок дублируйте последнюю навигационную ссылку с увеличением числа в data-item, а также последний элемент data-item=»content_tabs_», где число вы проставляете то же самое, что и в новой ссылке.

Ion.Tabs 1.0.2
Легкий и удобный плагин для создания вкладок(табов) с поддержкой скинов

Обратная связь и поддержка

В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

Контакты

Поддержать

Реклама

Описание

  • Поддерживает несколько групп вкладок на одной странице.

  • Генерирует события и выполняет функции обратного вызова.
  • Поддерживает несколько видов сохранения позиции вкладок, в том числе и для нескольких групп на одной странице.
  • Очень легкий в настройке и стилизации. Поддерживает скины.
  • Имеет публичные методы для управления извне.
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
  • Репозиторий на GitHub.
  • Плагин свободно распространяется на условиях лицензии MIT.
  • Информация
  • Описание
  • Полезности
Мастер Йода рекомендует:  5 вредных привычек неэффективных программистов

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

Недавно коллега по работе рассказал о том, что в стандартных светильниках используются дешёвые ПРА (пускорегулирующие аппараты), и что при желании их можно заменить на более продвинутые ЭПРА (электронные ПРА). Преимущества перед обычным пуском заключаются в быстром зажигании ламп, отсутствии характерного звука от дросселя, фильтре, убирающем мерцание, а также более щадящем отношении к лампам.

Прочитав описание на википедии, а также впечатлившись рассказами коллеги, на следующий же день купил две ЭПРА (себе и жене), первые попавшиеся в местной барахолке для ламп типа T8 мощностью 18 Вт. Один поставил сразу, и тут же заметил, что не вижу раздражающего мерцания, а лампы стали светить ярче. Через пару дней подключил второй ЭПРА в светильник над рабочим местом жены, заодно решил сфотографировать весь процесс. Возможно, вам данная статья покажется тривиальной и дилетантской, но лично мне и нескольким моим коллегам эти знания были в новинку.

  • История
  • Миссия
  • Прогресс
  • Фотогалерея
  • Контакты

Перед началом работ замерил световой поток, вышло около 405-407 люкс. Хотя устанавливаю ЭПРА в основном с целью избавиться от мерцания, точнее увеличить его частоту, но изменения в яркости также интересны, ведь в электронном пуске заявлен больший КПД.

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

Выключив верхний свет и открутив зажимы с питания (если будете делать, не забудьте оголённые контакты на время работ защитить изолентой), вытащил светильник из навесного потолка и положил его на пол. Верная помощница тут же протёрла его от пыли / грязи, так как при установке предыдущего ЭПРА я знатно угваздался (на фото только начало помывки).

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

Дрели и сверла под рукой не было, поэтому отверстия в тонкой жести прокрутил отвёрткой и острым саморезом. Понадобилось сделать две новых дырки под габариты креплений нового ЭПРА. После чего прикрутил устройство двумя широкими и короткими обрубленными шурупами, держится крепко и на умеренно сильные дёргания не поддаётся.

15 лучших jQuery-плагинов для создания вкладок Javascript

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

Tabulous — плагин вкладок, табов

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

Адаптивные вкладки преобразующиеся в аккордион

Легкий jQuery плагин, который преобразует обычные горизонтальные или вертикальные вкладки на устройствах с меньшим размером экрана в аккордион.

DOMTab — вкладки на javascript

DOMtab — это jаvascript, который связывает ссылки из списка с секциями контента в виде таб интерфейса. Данные табы очень хорошо поддаются внешнему преобразованию с помощью CSS свойств, что позволит вписать их в любой дизайн. Ни каких jQuery и Mootools библиотек не используется, только чистый jаvascript.

jTabs — плагин вкладок

jTabs — плагин вкладок использующий jQuery.

Универсальные вкладки на jQuery

Простая реализация создания горизонтальных или вертикально расположенных вкладок на jQuery с использованием нескольких строк кода для управления вкладками.

Ajax вкладки

Сделаем вкладки (tabs) используя jQuery и технологию ajax для подгрузки содержимого из файлов (или базы данных).

Вкладки — tabs

Простая реализация вкладок на jаvascript без подключения сторонних java библиотек.

Вкладки со скошенными углами

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

Вертикальное tabmenu

Вертикальное меню в котором скрипт создает вкладки из ul и li элементов. Контент отображается, когда вы наводите курсор мыши на вкладку меню. Скрипт предтсавляет собой комбинацию приёмов CSS и jQuery.

Вкладки Easy Tabs

jаvascript для создания вкладок EasyTabs. Компактный и совместим со всеми браузерами. Не требуется дополнительных jаvascript библиотек (jQuery, Mootools и т.д.)

Простые вкладки

Сегодня поговорим о создании простых вкладок на jQuery.

Выбрана категория: jQuery

Библиотека jQuery является самым популярным инструментом JavaScript для фронтенд разработчиков. Очень редко можно встретить сайт, который не использует эту библиотеку. Практически на каждом сайте применяются различные jQuery плагины. Каждый день появляется что-то новое. И это новое мы собираем и предлагаем Вам.

camRoll Sl > 26.06.2020 weatherless jQuery

camRoll — jQuery плагин, который представляет собой приятного вида слайдер с высокой производительностью. Данный слайдер позволяет пользователю перемещаться между слайдами, при нажатии или касании элементов […]

VvvebJs — Drag & Drop конструктор сайтов

VvvebJs — это библиотека javascript, разработанная с помощью jQuery и Bootstrap 4. Особенности: Компоненты и блоки / фрагменты с drag and drop. Отмена / Повтор […]

FormSl > 05.06.2020 weatherless jQuery, Слайдер

FormSlider — плагин jQuery, который интегрирует модифицированный Flexslider с логическими страницами-слайдами, которые могут иметь функции и поведение, предоставляемые плагинами. Основная идея заключается в том, чтобы […]

Nicebord.js — Анимированные границы элементов с jQuery

Nicebord.js — это плагин jQuery для создания приятных анимационных границ на элементах сайта. С помощью данного инструмента вы без труда сможете сделать ваш сайт более […]

Timer Animation — Анимационный таймер на jQuery

jQuery Timer Animation — плагин jQuery для создания анимированного таймера. Для использования необходимо задать время в минутах и секундах. Узнать подробности и скачать бесплатно плагин […]

PrMenu — Адаптивное выпадающее мульти меню jQuery

PrMenu — легкий, адаптивный плагин меню для jQuery. Данный плагин предоставляет собой меню со ссылками, равномерно распределенными по всей ширине контейнера меню. Основные особенности плагина […]

js.device.selector — jQuery плагин для определения типа устройства


Плагин jQuery, которые определяет текущий тип устройства и тип отображения браузера, делая точки останова CSS доступными в JavaScript. Данное решение позволяет определять ваши точки останова […]

Geocomplete — Плагин jQuery для автозаполнения в Google Maps

Geocomplete — простой плагин автозаполнения для карт Google. Плагин является простым в использовании и полностью бесплатным. Скачать плагин jQuery можно по ссылкам.

viewRecorder — Плагин jQuery для записи активности пользователя

viewRecorder — это плагин Jquery, предназначенный для записи активности пользователя, во время посещения вашего веб-сайта. Данный jQuery плагин можно скачать бесплатно.

lem Youtube — Оболочка jQuery для YouTube API

lem Youtube — это jQuery-оболочка для YouTube API. Отличный бесплатный инструмент для реализации множества интересных идей связанных с видео и аудио. Скачать бесплатно плагин jQuery […]

Лучшие шаблоны

Искать

Информация

Категории

  • CSS3 (32)
  • JavaScript (152)
    • jQuery (42)
    • VueJS (19)
    • Анимация (28)
    • Изображения (12)
    • Подсказки (tooltips) (6)
    • Разное на JavaScript (30)
    • Слайдер (12)
    • Таблицы (5)
    • Формы (12)
  • WordPress (130)
    • Плагины WordPress (11)
    • Шаблоны WordPress (119)
      • Адаптивные (7)
      • Блог (33)
      • Интернет-магазины (18)
      • Корпоративные (25)
      • Креативные (7)
      • Лендинги (5)
      • Музыка (1)
      • Новости (4)
      • Портфолио (4)
  • Лучшие (13)
  • Новости (32)
    • IT новости (18)
    • WEB новости (13)
  • Статьи (14)
  • Шаблоны HTML5 (39)
    • IT сфера (3)
    • Интернет-магазины (7)
    • Корпоративные (19)
    • Креативные (9)
    • Специальные (1)

Новости

Статьи

О сайте

WEATHERLESS — это современный блог, который собирает в себе профессиональные инструменты для создания и улучшения web-сайтов. Основой ядра материалов являются шаблоны HTML5 & CSS3, плагины JavaScript, а также все, что касается популярных CMS — премиум WordPress и Joomla!

Особенностью данного блога является то, что здесь уделяется особое внимание премиум-приложениям. Мы ищем и рекомендуем платные плагины WordPress. Находим и предлагаем купить шаблоны Joomla.

Все бесплатные приложения расположены в соответствующих категориях.

Полезные плагины для сайта на jQuery

В ста­тье про jQuery мы ска­за­ли: плюс jQuery в том, что для этой биб­лио­те­ки есть пла­ги­ны на любой слу­чай. Наста­ло вре­мя это дока­зать — дарим вам под­бор­ку класс­ных и про­ве­рен­ных пла­ги­нов на все слу­чаи жиз­ни.

Мастер Йода рекомендует:  Выпущен большой релиз Google Chrome v4 под Windows

1. Slideout.js

Этот пла­гин упро­ща­ет раз­ра­бот­ку мобиль­ных веб-приложений и добав­ля­ет под­держ­ку свай­па вле­во для досту­па к меню. На сай­тах тоже мож­но исполь­зо­вать, если хоти­те сде­лать мобиль­ную вер­сию мак­си­маль­но похо­жей на про­грам­му.

Отдель­ное спа­си­бо раз­ра­бот­чи­кам за то, что этот пла­гин весит все­го 2 кило­бай­та и не тре­бу­ет ника­ких допол­ни­тель­ных над­стро­ек.

2. PhotoSwipe

Нуж­на кра­си­вая гале­рея на сайт? Ставь­те PhotoSwipe — про­ве­рен­ную гале­рею с ани­ма­ци­ей, мно­же­ством настро­ек и актив­ным сооб­ще­ством. Подой­дёт, если вам нуж­но про­сто кра­си­во раз­ме­стить фото на сай­те, что­бы их мож­но было листать, раз­во­ра­чи­вать на весь экран и начи­нать про­смотр с любой кар­тин­ки.

3. Toastr

Пла­гин для уве­дом­ле­ний на все слу­чаи жиз­ни. Настра­и­вать мож­но всё — от тек­ста сооб­ще­ния до ани­ма­ции появ­ле­ния и дли­тель­но­сти пока­за. Мож­но на сво­ём сай­те делать вид, что кто-то толь­ко что зака­зал ваш про­дукт из Буда­пешта, а кто-то дру­гой толь­ко что про­смат­ри­вал эту стра­ни­цу и тоже хотел купить. Всех такие всплы­ваш­ки бесят, но они рабо­та­ют.

4. SweetAlert

Меня­ет стан­дарт­ные бра­у­зер­ные уве­дом­ле­ния на стиль­ные и замет­ные сооб­ще­ния. Теперь про­пу­стить их будет слож­нее, а поль­зо­ва­тель сра­зу пой­мёт, что он него что-то хотят. Что­бы понять, как это рабо­та­ет, срав­ни­те два уве­дом­ле­ния: стан­дарт­ное и SweetAlert:

5. jQuery-Tabledit

Пла­гин для тех, кто рабо­та­ет с база­ми дан­ных. Напри­мер, если вы дела­е­те админ­ку для кор­по­ра­тив­но­го сай­та или веб-интерфейс для таб­лиц, то пла­гин помо­жет вам рабо­тать с поля­ми таб­ли­цы как с обыч­ны­ми поля­ми вво­да. Мож­но раз­ре­шить толь­ко про­смотр, изме­не­ние, уда­ле­ние или всё вме­сте. Про­грам­ми­сту оста­ёт­ся настро­ить пла­гин так, что­бы все изме­не­ния попа­да­ли обрат­но в базу.

6. Skrollr

Лёг­кий спо­соб сде­лать эффект парал­лак­са на стра­ни­це — исполь­зо­вать Skrollr. Парал­лакс в общем слу­чае — это когда что-то дви­жет­ся на перед­нем фоне быст­рее, чем на зад­нем или на осталь­ных. Эда­кое псевдо-3D, толь­ко при скрол­ле. Парал­лакс любят исполь­зо­вать про­из­во­ди­те­ли смарт­фо­нов на застав­ках, а с этим пла­ги­ном мож­но сде­лать в таком сти­ле целый сайт.

7. IntroJS

Удоб­ная шту­ка для созда­ния обу­ча­ю­щих сай­тов или поша­го­вых руко­водств. Она поэтап­но пока­жет все эле­мен­ты на стра­ни­це и объ­яс­нит, что они озна­ча­ют. Если нуж­но сде­лать онлайн-презентацию для заказ­чи­ка и нет вре­ме­ни объ­яс­нять — бери­те IntroJS.

8. ScrollMagic

Хит­рый пла­гин с огром­ны­ми воз­мож­но­стя­ми настро­ек. Он закреп­ля­ет какой-то эле­мент стра­ни­цы в опре­де­лён­ном месте и вклю­ча­ет ани­ма­цию в нуж­ный момент. Нуж­ный момент выби­ра­е­те вы сами, и их может быть несколь­ко на одной стра­ни­це. Посмот­ри­те при­мер, и вам ста­нет понят­но, насколь­ко крут этот пла­гин.

9. FloatLabel.js

Про­стой, но удоб­ный пла­гин: он рабо­та­ет с поля­ми вво­да и сле­дит за тем, когда вы нач­нё­те туда что-то вво­дить. Как толь­ко нач­нё­те — он дела­ет из назва­ния поля мини-заголовок и поме­ща­ет его наверх:

10. jQuery GoUp!

Самый про­стой пла­гин в обзо­ре. Кноп­ка про­сто воз­вра­ща­ет вас наверх, в самое нача­ло стра­ни­цы. Когда лень скрол­лить.

50 полезных плагинов JQuery 2012 года

29 декабря 2012 | Опубликовано в Веб-дизайн | 12 Комментариев »

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 — 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-эффекта.

Мастер Йода рекомендует:  Как сделать абзац в HTML

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

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

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

И другие.

Плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Noty — это jQuery плагин, с помощью которого без особых проблем и сложностей можно легко на своем сайте или блоге создать уведомления типа: information, error, alert, success, warning, или просто заменить стандартные уведомления на сайте, при регистрации например. Абсолютно каждое уведомление можно настроить, чтобы оно выводилось поочередно.

JQuery-плагин позволяет легко помещать маркеры на карте сайта с помощью Google Map API V3.

Плагин, который позволяет легко добавлять интерактивные карты на вашем сайте. Вы получите мощную API карту, настраиваемые маркеры и обработчик-событий.

Jплагин, который использует Scalable Vector Graphics (SVG) для рендера векторных карт. Он работает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML.

Простой в использовании JQuery плагин для социальных виджетов сетей. В настоящее время он поддерживает Facebook, Twitter и Google+.

Tooltipster представляет собой легкий и простой в стиле JQuery плагин, который поможет вам легко создавать всплывающие подсказки.

BigVideo.js — jQuery плагин, который упрощает адаптирование фонового видео на веб-страницу. Вы можете использовать одно или несколько видео или использовать плагин в качестве проигрывателя, с отображением плей-листа.

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

Простые адаптивные вкладки (табы) для сайта на JavaScript и CSS

Дата публикации: 2015-11-03

От автора: в данной статье мы рассмотрим, как сделать макет из нескольких адаптивных вкладок (табов) для сайта на JavaScript и CSS 3, который просто отлично подходит в тех случаях, когда необходимо вместить много связанного контента в маленькой и компактной области.

Часто вкладки можно встретить в блогах в виде виджетов сайдбаров, в которых, обычно, отображаются последние или любимые посты, или категории. Но помимо второстепенной роли вкладкам (табам) также отводят и главную роль на страницах. К счастью создавать вкладки (табы) для сайта не такое и сложное занятие. В этой статье мы рассмотрим все, что необходимо для их создания, даже позаботимся о устаревших браузерах с выключенным JS. Давайте разберем структуру и разметку вкладок.

Структура и разметка

Итак, наша структура включает в себя:

Секцию меню с вкладками. Активная вкладка подсвечивается

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

И сами вкладки, которые или спрятаны, или видны

Вся конструкция помещается в главный DIV, который будет использоваться в JS для нахождения дочерних элементов. Начнем разметку:

Значение для идентификатора можно взять любое, оно пригодится позже в JavaScript. Также обратите внимание на класс no-js, его мы будем удалять перед манипуляциями с JS. Если вы работали с библиотеками с методом обнаружения поддерживаемых свойств, как Modernizr, то вам это будет знакомо. Добавим меню:

Я сразу сделал первую вкладку активной, первый индекс в JavaScript будет 0. Обратите внимание на то, что количество вкладок может изменяться, но обязательно необходимо, чтобы количество табов и ссылок на них было равным. Перейдем к вкладкам: каждая вкладка это отдельный DIV. У первого блока сразу добавлен класс is-active. Конечная разметка выглядит так:

На данном этапе в браузере будет просто куча элементов в одном ряду, но мы это поправим в CSS.

Добавляем стили в CSS

Замечание: я использую flexbox, для автоматической генерации вендорных префиксов autoprefixer с Gulp. В CSS ниже я не писал вендорные префиксы. Если вам нужна готовая версия, она есть на GitHub. Блоки c-tabs как таковых стилей не требуют, так что начнем с меню. Меню у нас состоит из набора ссылок, ниже я добавил немного стилей:

Пройдемся по стилям меню. Основной контейнер это элемент flexbox с классом c-tabs-nav. Каждая ссылка это резиновый элемент с классом c-tabs-nav__link, который растягивается так, чтобы вместить все элементы с небольшими отступами между ссылок. На каждую ссылку вешается событие клика для переключения между вкладок. Также ссылки будут менять свое состояние в зависимости от того, навели на них мышку или кликнули. В демо у каждой ссылки своя иконка и текст в тегах I и span соответственно. На маленьких экранах текст в span скрывается для экономии места. Сделать это можно простым медиа запросом, который мы добавим в конец файла.

Теперь рассмотрим стили для конкретной вкладки:

Ну тут все просто и интуитивно понятно, но все же пройдемся поэтапно. Каждому табу присвоен класс c-tab, все вкладки спрятаны по умолчанию (display: none). Если к элементу добавляется класс is-active, то значение свойства display меняется на block. Класс c-tab__content отвечает за область контента внутри вкладки, функциональной нагрузки он не несет. Хотя через него можно напрямую обращаться ко вкладкам, не трогая основной контейнер.

На данном этапе у вас на экране уже должно быть что-то привлекательное. Но по клику по ссылкам меню ничего не происходит! Без паники, сейчас исправим.

Вдохнем жизнь при помощи JS

Давайте поэтапно распишем, чего мы хотим добиться с помощью JS:

Нам необходимо каким-то образом найти компоненты, чтобы потом их настроить

Нужно как-то инициализировать компоненты

Необходимо проверить, на все ли вкладки навешены обработчики события

Нам нужен метод для перехода к указанной вкладке, который можно вызывать как внутри, так и из разметки

И в конце концов, нужно получить доступ к нашим компонентам, т.е. необходимо добавить их в глобальное пространство имен

Поручим это дело IIFE:

Теперь настроим нашу функцию и сделаем ее глобальной:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Обратите внимание, что функция tabs принимает один аргумент option. Добавим пару переменных в кэш, сделав их доступными для следующей нашей функции:

Мы инициализировали пять переменных:

El – содержит элемент, найденный по селектору через option

tabNavigationLinks – коллекция ссылок меню с определенным классом, полученных через option

tabContentContainers – контент вкладок с определенными классами, полученный через option

activeIndex – индекс активной вкладки, по умолчанию равен 0

initCalled – булево значение, по умолчание равно false. Используется для проверки, вызывалась ли функция init, т.к. более одного раза данную функцию вызывать не нужно.

Подумаем дальше. Нам нужна какая-то функция, которая будет пробегаться по всем ссылкам вкладок и вешать на них обработчики событий, а также удалять класс no-js. И, естественно, нужна функция для обработки этих событий. И, наконец, нужна функция, которая будет переключать нас на заданную вкладку по ее индексу, которая будет вызываться из функции обработчика. Забегая наперед, нам нужно сделать так, чтобы функцию инициализации и функцию по переходу на конкретную вкладку можно было вызывать в любом месте. Благодаря нашему JS и переменной initCalled со значением по умолчанию false, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код:

Как сделать вкладки-табы для сайта на jQuery

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

Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с >

Переходим к CSS стилям наших вкладок.

Тут главное указать для активного блока с контентом свойство display со значением block, а для активной вкладки — такой же стиль, как и при наведении.

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

Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.

Добавить комментарий