Кэмерон Молл - призывает веб дизайнеров чаще модернизировать сайт, вместо проведения регулярного редизайна. Гораздо лучше постоянно вкладывать в развитие сайта, позволяя ему развиваться, опережая время и модные тенденции.Кэмерона Молла ©

Rammdrum.com - сайт об ударнике Rammstein - Главная

Новости
Будь в курсе
Мини Чат

Делаем вкладки на jQuery (uCoz)

3887 |

(39)

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

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

Для пользователей uCoz, устанавливаем скрипт таба, после тега body

HTML-Code

Code

Для других cms, добавим библиотеку jQuery в начало нашей страницы и файл для таба:

HTML-Code

Code

Теперь давайте рассмотрим основной код:

- создаём основную ячейку div (id="tabs-1"), которая будет отвечать за номер табов, если вы захотите добавить несколько табов на страницу вашего сайта, то следует изменить данный ID на соответствующие цифры, а в выше предоставленном скрипте tab.js, в конце кода, добавить строку с соответствующим номером таба, например makeTabs('tabs-2');

- используем списки, в которые помещаем ссылку с названием того или иного таба и за место основной ссылки, прописываем якорь #first, #second, #third, #four при нажатии на которые, будет показано содержимое нужной ячейки.

- после списков, создаём div ячейки с ID, названия которых соответствую якорям в списках id="first", id="second" , id="third", id="four" в данных ячейках будет расположена нужная вам информация

HTML-Code

Code

<div id="tabs-1">
  <div class="tabs">

  <ul class="tabNavigation">
  <li><a href="#first">Толстой Л. Н.</a></li>
  <li><a href="#second">Wilfred Peterson</a></li>
  <li><a href="#third">Т.Эдисон</a></li>
  <li><a href="#four">Альберт Швейцер</a></li>
  </ul>

  <div id="first" class="tab_content">
  Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой.
  </div>

  <div id="second" class="tab_content">
  Успех состоит в том, чтобы сфокусировать всю энергию, заключенную в вас, на той цели, которую вы так страстно желаете достичь
  </div>

  <div id="third" class="tab_content">
  Достоинства человека должны определяться его делами, а не тем, что о нем говорят.
  </div>

  <div id="four" class="tab_content">
  Счастье – это хорошее здоровье и плохая память
  </div>

  </div>
</div>

CSS-Code

Code

/* Табы
------------------------------------------*/
#tabs-1 {text-align:center; margin-top: 20px;}
.tabNavigation {list-style:none; margin: 0; padding: 0;}
.tabNavigation li {
  display: inline;
  margin: 0px 5px 0px 5px;
  text-shadow: 1px 1px 1px #fff;
}

.tabNavigation li a {
  color: #555;
  background: url('fon_tab_01.gif') repeat-x top #F1F0F0;
  border-top: 1px solid #cecece;
  border-right: 1px solid #cecece;
  border-left: 1px solid #cecece;
  padding: 6px 10px 6px 10px;
}

.tabNavigation li a.selected,ul
.tabNavigation li a.selected:hover {color:#555; background:#fff; border-bottom: 1px solid #fff; }
.tabNavigation li a:hover {color: #555; background: url('fon_tab_01.gif') repeat-x top #e9e9e9;}
.tabNavigation li a:focus {outline: 0;}

.tab_content {
  overflow: hidden;
  text-align:left;
  border-top: 1px solid #cecece;
  padding: 5px 0px 10px 0px;
  margin-top: 6px;
}
/*------------------------------------------*/

В моём варианте, в css стили я добавил 1px белое изображение, которое прижато к верхней части вкладок, плюс основные вкладки выравнены по центру и изменена цветовая гамма на более приемлемую для восприятия пользователями.

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

Источник:
http://www.vremenno.net
Вольный перевод:
http://www.center-dm.ru

Ваша оценка новости

оценка новости4.3голосов: 18

Теги: css, вкладки, ucoz, jQuery, табы

38 | Adilet пишет: | 26.03.2012 | 00:00 0

Помогите пожалуйста! уже целый день не могу сделать! так и так пытался пожалуйста! вот мой мэйл i_one-such@mail.ru

RuleZ-DM	chernoffo	3loY
Silver	erudit	armenka
Angry	Skoda	iGosu