—»     —»   Tabulous.js: сортируем случайный контент во вкладки при помощи jQuery
  Раздел: Меню и Навигация   Нет комментариев  

Tabulous.js: сортируем случайный контент во вкладки при помощи jQuery



Aaron Lumsden из West-Yorkshire кажется очень любит jQuery. Совсем недавно мы представляли вам великолепный плагин для отображения прогресса заполнения веб-форм под названием progression.js. Сегодня же мы хотим поделиться с вами еще одним очень полезным плагином от того же автора. Tabulous.js позволяет вам сортировать любой контент в контейнеры с навигацией по вкладкам, к которым применены привлекательные эффекты переходов, позволяющие скрывать и отображать помещенный в них контент.

Tabulous.js: сортируем случайный контент во вкладки при помощи jQuery

Tabulous.js: разные эффекты, простота в использовании

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

Tabulous.js предлагает лишь одну функцию. Он позволяет организовать случайный контент во вложенные div-элементы, и предоставляет навигацию по вкладкам с интересными эффектами. Эффекты позволяют вам создать скольжение контента, либо перевороты div-элементов с заменой содержимого.

Tabulous.js: сортируем случайный контент во вкладки при помощи jQuery

Интеграция в проект происходит очень просто, как и во всех случаях с использованием jQuery. Здесь всего одна переменная под названием effect, которая гарантирует вам, что function-call пройдет плавно. После запуска jQuery, плагина и его соответствующего CSS-файла, вам нужно будет создать вложенный div поверх остальных, чтобы в нем разместились вкладки.

Давайте посмотрим на примере:

<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<!--tab content-->
</div>
<div id="tabs-2">
<!--tab content-->

</div>
<div id="tabs-3">
<!--tab content-->
</div>
</div>
<!--End tabs container-->

</div>
<!--End tabs-->

Сделав его, вам останется просто запустить function-call:

$('#tabs').tabulous({
effect: 'scale'
});

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

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

Ссылки

* Tabulous.js | Демо
* Tabulous.js | Github-репозиторий
* Aaron Lumsden на Github
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 3087   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31