В последнее время понемногу занимаюсь вёрсткой и натяжкой на WP нового дизайна. Так что надеюсь, в скором времени дизайн этого блога обновится.
В процессе верстки пришлось столкнуться с необходимостью создания блока с вкладками (табами) в которых при переключении отображаются категории, архив блога, самые популярные записи и облако тегов. Для реализации этого эффекта я использовал виджет jQuery UI: Tabs, о котором и хочу сегодня рассказать.
Скачать последнюю версию плагина можно на сайте jqueryui.com, там же есть подробное описание всех доступных виджетов с примерами и API документация.
Чтобы виджет заработал, нужно подключить к странице (сайту) библиотеку jQuery и скрипт самого плагина. Для этого между тегами <head></head> вставляются следующие строки:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> |
В данном случае я подключил скрипты без закачки на свой сервер, используя внешние ссылки. Также был подключен файл стилей, благодаря которому блок с вкладками примет симпатичное визуальное оформление. К слову сказать, на сайте есть визуальный редактор, с помощью которого можно самому создать тему для виджета либо выбрать любую другую из имеющихся шаблонов. Сделать это можно во вкладке Themes.
Между тегами <body></body> необходимо добавить следующую HTML-разметку:
<div id="tabs"> <ul> <li><a href="#tabs-1">Вкладки №1</a></li> <li><a href="#tabs-2">Вкладки №2</a></li> <li><a href="#tabs-3">Вкладки №3</a></li> </ul> <div id="tabs-1"> Содержимое вкладки №1 </div> <div id="tabs-2"> Содержимое вкладки №2 </div> <div id="tabs-3"> Содержимое вкладки №3 </div> </div> |
В этом html коде элементы <li> являются ярлыками вкладок. Для них посредством якорей заданы ссылки на соответствующие элементы <div>, в которых содержится контент для наполнения вкладок.
Осталось привязать функционал виджета к HTML-размете:
<script> $(function() { $( "#tabs" ).tabs(); }); </script> |
Данный код необходимо вставить между тегами <head></head> и сохранить страницу. Блок с вкладками должен заработать.
По умолчанию при загрузке страницы будет открыта первая вкладка. Чтобы при загрузке открывалась вторая вкладка нужно изменить скрипт привязки функционала виджета к HTML-разметке на следующий:
<script type="text/javascript"> $(document).ready(function() { $('#tabs').tabs({ active:1 }); }); </script> |
Если захотите чтобы вкладки открывались не по клику, а скажем при наведении курсора, то скрипт примет следующий вид:
<script type="text/javascript"> $(document).ready(function() { $('#tabs').tabs({ event: "mouseover" }); }); </script> |
Со всеми параметрами, методами и событиями, которые поддерживает данный плагин можно ознакомится на странице API документации.
Если есть какие-то вопросы, задавайте в комментариях, я постараюсь на них ответить.
Загрузка ...
Добавить комментарий