Главная » Статьи » Веб-дизайн

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



Блок использует jQuery. для удобства использования, скрипт состав в виде плагина к 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>


Источник: http://webo4ka.ru/load/46-1-0-2411
Категория: Веб-дизайн | Добавил: fotocom (29.04.2015)
Просмотров: 155 | Теги: веб-дизайн, скрипты, панель с вкладками | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети