Вертикальные и горизонтальные табы на jQuery
Данный плагин позволяет реализовать простые и удобные в использовании вертикальные/горизонтальные вкладки на jQuery.
Как реализовать:
1.Подключаем библиотеку jQuery и сам плагин:
|
1 2 |
<script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/jquery.tabs.min.js"></script> |
- Подключаем стили CSS
|
1 |
<link rel="stylesheet" href="dist/jquery.tabs.css"> |
- Теперь html код самих вкладок (табов)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="jq-tab-wrapper" id="verticalTab"> <div class="jq-tab-menu"> <div class="jq-tab-title active" data-tab="1">title 1</div> <div class="jq-tab-title" data-tab="2">title 2</div> <div class="jq-tab-title" data-tab="3">title 3</div> </div> <div class="jq-tab-content-wrapper"> <div class="jq-tab-content active" data-tab="1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum, animi aperiam! Odio harum error enim aliquam voluptates, quibusdam fuga maxime doloremque blanditiis et! Laborum neque esse ab voluptates, perferendis nam. Sint alias provident reiciendis ut facilis obcaecati, aliquid excepturi architecto quibusdam aperiam numquam! Reprehenderit vitae ducimus, magni labore maiores architecto aliquid inventore facere aut eveniet officia recusandae voluptatum maxime provident.</div> <div class="jq-tab-content" data-tab="2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, magnam mollitia consequuntur modi sit nostrum molestiae sunt nihil, quisquam eligendi expedita quae, id natus provident labore odio! Necessitatibus, odit. Iure. Delectus magnam eius, facere ratione est dicta, placeat labore possimus, praesentium ex quos similique veritatis illum velit minima dolor beatae.</div> <div class="jq-tab-content" data-tab="3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit cumque aperiam amet officiis atque accusamus repudiandae perspiciatis aliquid voluptatum itaque, sint, pariatur architecto mollitia laborum fuga culpa dignissimos quo debitis. </div> </div> </div> |
Где
|
1 |
id="verticalTab" |
означает (задает) что вкладки вертикальные, и соответственно
|
1 |
id="horizontalTab" |
горизонтальные вкладки.
- Активируем плагин:
|
1 2 3 4 5 6 |
<script> $(function () { $('#verticalTab').jqTabs(); $('#horizontalTab').jqTabs({direction: 'horizontal', duration: 200}); }); </script> |
Готово.
