Хаки и Скрипты 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

Можешь почитать и вот эту статейку "Хочу уведомления на рабочем столе"

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

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