Одна из самых больших проблем веб дизайнеров, компактное размещение информации на странице сайта без потери удобства пользования. Применение вкладок jQuery, отличный способ справиться с этой проблемой и широко используется в блогах в последнее время. Сегодня мы создадим небольшие информационные HTML окна, которые будут появляться на страницах сайта при нажатии на определённую вкладку. Мы достигнем такого эффекта с помощью технологии jQuery.
Вы можете сами посмотреть, что у нас в итоге выйдет или скачать здесь. Обычно данная панель устанавливается в боковой части страницы, но применив фантазию можно выйти за эти рамки. Итак, перейдём к построению вкладок.
Шаг 1. HTML разметка
<div id="tabbed_box_1" class="tabbed_box"> <h4>Навигация сайта <small>Выберите вкладку</small></h4> <div class="tabbed_area"> <ul class="tabs"> <li><a class="tab active" title="content_1" href="#">Topics</a></li> <li><a class="tab" title="content_2" href="#">Archives</a></li> <li><a class="tab" title="content_3" href="#">Pages</a></li> </ul> <div id="content_1" class="content"> <ul> <li><a>HTML Techniques <small>4 Posts</small></a></li> <li><a>CSS Styling <small>32 Posts</small></a></li> <li><a>Flash Tutorials <small>2 Posts</small></a></li> <li><a>Web Miscellanea <small>19 Posts</small></a></li> <li><a>Site News <small>6 Posts</small></a></li> <li><a>Web Development <small>8 Posts</small></a></li> </ul> </div> <div id="content_2" class="content"> <ul> <li><a>December 2008 <small>6 Posts</small></a></li> <li><a>November 2008 <small>4 Posts</small></a></li> <li><a>October 2008 <small>22 Posts</small></a></li> <li><a>September 2008 <small>12 Posts</small></a></li> <li><a>August 2008 <small>3 Posts</small></a></li> <li><a>July 2008 <small>1 Posts</small></a></li> </ul> </div> <div id="content_3" class="content"> <ul> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Contribute</a></li> <li><a>Contact</a></li> </ul> </div> </div> </div>
Если коротко, то мы указали очередность контейнеров <div> и элементов <ul>, <li>. Так же добавили внутри идентификаторы «id» и классы «class» которые будут использованы в таблицах стилей CSS для придания нужного нам дизайна и частично в коде jQuery. В HTML разметке главное следить за открытием и закрытием тегов, иначе проблемы неминуемы.
Кстати, возможно кто-то обратил внимание на очередность кода. То есть порядок такой же как и в блоге WordPress. Об интеграции в WordPress я напишу в следующей статье. Но на самом деле Вы могли бы использовать данный способ в различных целях.
Шаг 2 Стили CSS
Теперь мы добавим некоторые стили, чтобы сделать внешний вид намного лучше:
#tabbed_box_1 { margin: 0px auto 0px auto; width:300px; } .tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#ffffff; letter-spacing:-1px; margin-bottom:10px; } .tabbed_box h4 small { color:#e3e9ec; font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px; } .tabbed_area { border:1px solid #494e52; background-color:#636d76; padding:8px; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#464c54; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #464c54; } ul.tabs li a:hover { background-color:#2f343a; border-color:#2f343a; } ul.tabs li a.active { background-color:#ffffff; color:#282e32; border:1px solid #464c54; border-bottom: 1px solid #ffffff; } .content { background-color:#ffffff; padding:10px; border:1px solid #464c54; font-family:Arial, Helvetica, sans-serif; } #content_2, #content_3 { display:none; } .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li:last-child { border-bottom:none; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .content ul li a:hover { color:#a59c83; } .content ul li a:hover small { color:#baae8e; }
Выше приведенный код необходимо скопировать в созданный вами файл, например, css-tabs.css и прописать к нему путь в хедере(<link rel="stylesheet" href="http://ваш_сайт/.../css/css-tabs.css" type="text/css" />).
Шаг 3 Использование jQuery
Во-первых, нужно перейти на сайт JQuery и скачать последнюю версию библиотеки сценариев. Либо подгружать её с помщью гугла, установив этот скрипт в <head>:
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>
На ресурсе JQuery можно, также, подобрать множество полезных функций с наглядными примерами их использования. Мы же воспользуемся следующим примером приведения в действие вкладок:
// When the document loads do everything inside here ... $(document).ready(function(){ // When a link is clicked $("a.tab").click(function () { // switch all tabs off $(".active").removeClass("active"); // switch this tab on $(this).addClass("active"); // slide all content up $(".content").hide(); // slide this content up var content_show = $(this).attr("title"); $("#"+content_show).show(); }); });
Сейчас коротко объясню что к чему. Во-первых, рекомендуется создать файл, к примеру, jquery-tabs.js и вставить туда выше представленный код. Во-вторых, указать путь к этому файлу в <head>:
<script type="text/javascript" src="http://ваш_сайт/.../js/jquery-tabs.js"></script>
Теперь, насчёт самого скрипта.
$(document).ready (function (){...}); Данный сценарий говорит браузеру о выполнении всего того, что будет находится внутри этого кода. В нашем случае мы указываем следующие команды:
$(«a.tab»).click (function () {...}); Расшифровывается это так: Если Вы кликаете на вкладку с тегом <a> и внутри него имеется класс «tab», то задействуются все элементы в функции click (); Не буду перечислять всё, а отмечу только то, что Вы можете изменить, по Вашему усмотрению.
Найдите функцию show (); У Вас появляется выбор, экспериментальным методом поменять скорость вывода информации на странице, следующим образом, show (2000); можно заменить, например на slideDown (2000); или fadein (2000); Подставляйте различные значения, те которые Вам удобны и вперёд!
