Вкладки jQuery

Опубликовано: 4 Ноябрь 2010Автор ratemir

Вкладки jQueryОдна из самых больших проблем веб дизайнеров, компактное размещение информации на странице сайта без потери удобства пользования. Применение вкладок 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); Подставляйте различные значения, те которые Вам удобны и вперёд!

Метки: , Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх