вход

Как создать вкладки при помощи CSS и jQuery плагина Tabify

Как создать вкладки при помощи CSS и jQuery плагина Tabify

Сегодня хочу рассказать о небольшом jQuery скрипте, который позволяет быстро и легко создавать на страницах простые вкладки. Сам скрипт называется Tabify. Вы можете скачать последнюю его версию на сайте автора. Чтобы создать на вашей странице вкладки, достаточно просто подключить библиотеку jQuery и скрипт Tabify. Оформление вкладок, как всегда будем описывать правилами CSS.

Jquery плагин Tabify позволяет вам легко создавать вкладки с любым содержанием. Все, что вам нужно, это создать немаркированный список для заголовков вкладок и пару связанных div контейнеров. Основное различие между конкурентами и Tabify, является его малый размер.

Как это выглядит

Как видите, очень неплохой результат, полученный без применения графики.

как создать вкладки при помощи CSS и jQuery плагина Tabify

как создать вкладки при помощи CSS и jQuery плагина Tabify

Как использовать Tabify

Я как обычно приведу код из полностью рабочего примера, со структурой и стилями. Стили вы можете подобрать сами исходя из вашего оформления. Итак, для начала разметка блока, содержащего вкладки.

<div id="tabs"><!-- вкладки -->
        <ul>
          <li class="active"><a href="#pane1">Вкладка 1</a></li>
          <li><a href="#pane2">Вкладка 2</a></li>
          <li><a href="#pane3">Вкладка 3</a></li>
        </ul>
        <div id="panes"><!-- контейнер для панелей -->
          <!-- панель для вкладки 1 -->
          <div id="pane1" class="tab">
            <p>Текст вкладки 1 ...</p>
          </div>
          <!-- панель для вкладки 2 -->
          <div id="pane2" class="tab">
            <p>Текст вкладки 2 ...</p>
          </div>
          <!-- панель для вкладки 3 -->
          <div id="pane3" class="tab">
            <p>Текст вкладки 3 ...</p>
          </div>
        </div><!-- контейнер для панелей -->
      </div><!-- вкладки -->

Обратите внимание на начальную вкладку, которая обозначена слассом class="active". Скрипт jQuery будет в дальнейшем переназначать этот красс на вкладку, по который был клик мышки.

Эта структура будет работать сразу, после подключения скрипта. Давайте подключим скрипты, которые нам необходимы.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabify.js"></script>

После этого, мы просто вызываем функцию управления вкладками для нашего тега <div id="tabs">.

<script type="text/javascript">
				
			$(document).ready(function () {
				$('#tabs').tabify();
			});
					
</script>

Как видите все предельно просто, и мы получаем работающий функционал при минимальном объеме подгружаемых скриптов


/* общий конейнер с вкладками */
#tabs{
      display:block;
      margin-top:20px;
      clear:both;
}
/* немаркированный список заголовка */
#tabs ul{
      display:block;
      height:auto;
      margin:0;
      padding:0;
      margin-top:10px;
      font-size: 12px;
      list-style:none;
}
/* элемент списка */
#tabs ul li {
      margin:0;
      padding:0;
      float:left;
}
/* ссылка заголовка вкладки */
#tabs ul li a {
      display:block;
      margin:0;
      margin-right:2px;
      padding:10px 15px;
      float:left;
      color: #ddd;
      background-color:#56585d;
      text-decoration:none;
      /* стили CSS3 для закругления уголков */
		 -webkit-border-top-left-radius: 8px; /* Safari, Chrome */
		-webkit-border-top-right-radius: 8px; /* Safari, Chrome */
		  -khtml-border-top-left-radius: 8px; /* KHTML */
		 -khtml-border-top-right-radius: 8px; /* KHTML */
			 -moz-border-radius-topleft: 8px; /* Firefox */
			-moz-border-radius-topright: 8px; /* Firefox */
				 border-top-left-radius: 8px; /* CSS3 */
				border-top-right-radius: 8px; /* CSS3 */             
      
}
/* наведение мышки на вкладку */
#tabs ul li a:hover {
      color:#FFF;
      background-color:#121518;
      text-decoration:none;
}
/* активная вкладка */
#tabs ul .active a,
#tabs ul .active a:hover {
      font-weight:bold;
      color:#121518;
      background-color:#e5e5e5;
      text-decoration:none;
      border:none;
      border-bottom:2px solid #e5e5e5;
      -webkit-text-shadow: 0px 1px 1px #fff;
         -moz-text-shadow: 0px 1px 1px #fff;
              text-shadow: 0px 1px 1px #fff;
      
}
/* контейнер с панелями вкладок */
#tabs #panes {
      margin:0;
      padding:0;
      clear:both;
      display:block;
      background-color:#e5e5e5;
      /* стили CSS3 для закругления уголков */
               -webkit-border-radius: 8px; /* Safari, Chrome */
      -webkit-border-top-left-radius: 0px; /* Safari, Chrome */
                  -moz-border-radius: 8px; /* Firefox */
          -moz-border-radius-topleft: 0px; /* Firefox */
                       border-radius: 8px; /* CSS3 */
              border-top-left-radius: 0px; /* CSS3 */
}
/* оформление вкладок */
#tabs #panes .tab {
      margin:0;
      display:block;
      padding:20px;
      clear:both;	
}

После этого получаем красивые рабочие вкладки, созданные при помощи CSS и jQuery

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Как создать вкладки при помощи CSS и jQuery плагина Tabify

  1. антонина:

    почему то не работает

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

Статья → Как создать вкладки при помощи CSS и jQuery плагина Tabify

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.