Главная » 2012 » Январь » 16 » Скрипт блока с вкладками (Javascript)
16.01.2012, 22:46

Скрипт блока с вкладками




Блок использует jQuery. для удобства использования, скрипт составkty в виде плагина к jQuery.
Особенности скрипта:

-Текст располагается на странице семантически. Если у пользователя отключен JavaScript, он увидит простой структурированный список текста.
-Переход между вкладками происходит с эффектом растворения.
-Внешний вид блока с вкладками можно оформить так, как захочется при помощи CSS стилей.
-На странице можно располагать сколько угодно блоков с вкладками.

Для начала подключим к странице jQuery и плагин. Желательно располагать код в теле HEAD. Владельцам сайта на uCoz располагать код после открывающего тега BODY, и только вызов плагина. jQuery на uCoz подключен по умолчанию (обычно). Делается следующим кодом:
Code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery/tabbook1/tabbook1.jquery.js"></script>

Теперь нужно структурировать материал. Он должен иметь следующую структуру:
Code
<div id="tabBook1">
  <div>
  <h3>Заголовок 1</h3>
  Текст 1
  </div>
  <div>
  <h3>Заголовок 2</h3>
  Текст 2
  </div>
  <div>
  <h3>Заголовок 3</h3>
  Текст 3
  </div>
  <div>
  <h3>Заголовок 4</h3>
  Текст 4
  </div>
</div>


Заголовки H3 можно заменить на любой тег. Скрипт берет первый папавшийся элемент и использует его как название вкладки.

Далее, подключаем стили и вызываем функцию создания блока с вкладками. Делается это следующим кодом (желательно расположить в конце страницы):
Code
<link rel="stylesheet" type="text/css" href="http://szenprogs.ru/scripts/jquery/tabbook1/tabbook1.css">
<script type="text/javascript">
  $(function(){
  $('#tabBook1').tabbook1({
  width: '500px',
  height: '300px',
  speed: 700,
  position: 'top',
  maxlength: 20,
  activepage: 0
  });
  });
</script>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://szenprogs.ru/
Категория: JavaScript's | Просмотров: 1775 | Добавил: sold93 | Рейтинг: 4.0/4 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]