Хаки и Скрипты Next Generation CMS : JS, CSS : Вкладки-Табы на jQuery и CSS

irbees2008 Опубликовано - 9 - июня JS

Автор: --------------
Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt

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

Как использовать Tabify
1. для начала разметка блока, содержащего вкладки.

Код:

<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 будет в дальнейшем переназначать этот красс на вкладку, по который был клик мышки.
Эта структура будет работать сразу, после подключения скрипта.
2. скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковать ,залить и затем подключим скрипты, которые нам необходимы.У многих скрипт jquery подключен,повторно подключать не надо

Код:

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

3. вызываем функцию управления вкладками для нашего тега

Код:

<div id="tabs">

Код:

<script type="text/javascript">

                        $(document).ready(function () {
                                $('#tabs').tabify();
                        });

</script>

4. И последнее CSS

Код:

/* общий конейнер с вкладками */
#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

Можешь почитать и вот эту статейку "Стильное адаптивное меню с поддержкой retina"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.