Простой способ создания табов (вкладок) на jQuery
Случается так, что на странице бывает немалое количество контента, в результате чего страница выглядит очень нагроможденной. Есть множество способов оптимально настроить отображение контента и один из них, это использование табов (вкладок). Если Ваш сайт сделан с использованием какой-либо CMS, то несложно найти специализированные для этих целей плагины. Но многим не хотелось бы нагромождать свой сайт сторонними плагинами, поэтому предлагаю реализовать свой скрипт работы с табами, это позволит самому решать, в каком месте они будут задействованы, а также позволит следить за их правильным оформлением. Однажды я натолкнулся на очень простой способ создания табов, поэтому сейчас хотелось бы поделиться им с новичками.
Как это работает?
Создайте файл JS с именем tabs_script.js и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 |
(function($){ $(function() { $('dl.tab').on('click', 'dt', function () { $(this).addClass('active').siblings().removeClass('active'); }).children('dd').each(function () { $(this).wrapInner('<div class="tab-content"></div>'); }); }); }(jQuery)); |
Скрипт довольно простой, он отслеживает клик по табу $(‘dl.tab’), добавляет класс .active нажатому табу и удаляет его у всех соседних $(this).addClass(‘active’).siblings().removeClass(‘active’), заключая содержимое дочерних объектов каждого элемента из набора совпавших элементов (включая текстовые блоки) в конструкцию HTML с помощью функции wrapInner().
Создайте файл CSS с именем tabs_style.css и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
.tab.horizontal { width: 100%; overflow: hidden; font-size: 14px; margin: 2em 0; zoom: 1; padding: 1px; position: relative; } .tab.horizontal>dt { float: left; line-height: 2; height: 2em; border: 1px solid #AAA; color: #282D31; border-bottom: 0; padding: 0 1em; position: relative; left: 35px; margin-right: 3px; border-radius: 3px 3px 0 0; cursor: pointer; } .tab.horizontal>dt:hover, .tab.horizontal>dt.active { background-color: #eee; } .tab.horizontal>dt.active { z-index: 3; cursor: auto; } .tab.horizontal>dd { float: right; width: 100%; margin: 2em 0 0 -100%; position: relative; z-index: 2; display: none; } .tab.horizontal>dt.active + dd { display: block; } .tab.horizontal>dd>div.tab-content { border: 1px solid #AAA; border-radius: 3px; padding: 10px; } /* Вертикальные vertical*/ .tab.vertical { border: 1px solid #AAA; border-top: none; } .tab.vertical>dd { background: #fff; display: none; width: 100%; z-index: 2; margin: 0; } .tab.vertical>dd>div.tab-content { padding: 5px 10px; border-top: 1px solid #AAA; } .tab.vertical>dt { padding: 5px 10px; cursor: pointer; background-color: #F9F9F9; border-top: 1px solid #AAA; } .tab.vertical>dt.active, .tab.vertical>dt:hover { background-color: #eee; } .tab.vertical>dt.active + dd { display: block; } .tab.vertical { margin: 0; zoom: 1; width: 100%; } .tab.vertical>dt.active { z-index: 3; cursor: auto; } |
Здесь ничего сложного, Вы вправе изменить оформление табов так, как Вам захочется. Обратите внимание, что имеются двойные классы, а именно .horizontalдля горизонтальных табов и .vertical для вертикальных.
Файлы созданы, теперь необходимо создать структуру страницы, для этого создайте файл index.html и добавьте следующий код (также, чтобы всё это у нас работало правильно, убедитесь, что Вы подключили библиотеку jQuery):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/tabs_script.js"></script> <link rel="stylesheet" href="/tabs_style.css" type="text/css" /> </head> <body> <p>Горизонтальные вкладки</p> <dl class='tab horizontal'> <dt class='active'>Заголовок 1</dt> <dd>Текст вкладки</dd> <dt>Заголовок2</dt> <dd> <dl class='tab horizontal'> <dt>Заголовок 1</dt> <dd>Текст вкладки 1</dd> <dt class="active">Заголовок2</dt> <dd>Текст вкладки 2</dd> <dt>Заголовок 3</dt> <dd>Текст вкладки 3</dd> </dl> </dd> <dt>Заголовок 3</dt> <dd> <dl class='tab vertical'> <dt class='active'>Заголовок 1</dt> <dd>Текст вкладки</dd> <dt>Заголовок 2</dt> <dd>Текст вкладки 2</dd> <dt>Заголовок 3</dt> <dd>Текст вкладки 3</dd> </dl> </dd> </dl> <p>Вертикальные вкладки</p> <dl class='tab vertical'> <dt class='active'>Заголовок 1</dt> <dd>Текст вкладки 1</dd> <dt>Заголовок 2</dt> <dd> <dl class='tab horizontal'> <dt class='active'>Заголовок 1</dt> <dd>Текст вкладки 1</dd> <dt>Заголовок 2</dt> <dd>Текст вкладки 2</dd> <dt>Заголовок 3</dt> <dd>Текст вкладки 3</dd> </dl> </dd> <dt>Заголовок 3</dt> <dd> <dl class='tab vertical'> <dt class='active'>Заголовок 1</dt> <dd>Текст вкладки 1</dd> <dt>Заголовок 2</dt> <dd>Текст вкладки 2</dd> <dt>Заголовок 3</dt> <dd>Текст вкладки 3</dd> </dl> </dd> </dl> </body> </html> |
Как видите, мы используем списки данных DL, DT и DD. Сами табы у нас отделяются друг от друга с помощью тега DL, заголовки табов заключаем в теги DT и соответственно содержимое этих табов у нас находится в тегах DD. На мой взгляд, это достаточно простой способ создания табов.
Как быть владельцам CMS? Вы можете подключить файлы скрипта и стилей в своем шаблоне, а конструкцию табов прописывать в тексте материалов (статей).
Вы можете ознакомиться с примером работы табов скачав архив из вложения в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.