Пятница, 29.03.2024, 02:47
Приветствую Вас Гость | RSS
Главная Скрипт блока с вкладками - ФорумРегистрацияВход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Все для вебмастера!!! » Скрипты для UCOZ!!! » Скрипт блока с вкладками
Скрипт блока с вкладками
Armen_Chelsea
Офлайн
Дата: Вторник, 17.01.2012, 13:06 | Сообщение # 1
Постов: 182

Блок использует 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>
Форум » Все для вебмастера!!! » Скрипты для UCOZ!!! » Скрипт блока с вкладками
  • Страница 1 из 1
  • 1
Поиск:

ОБМЕН БОЛЬШИМИ БАННЕРАМИ 468x60
Последние обновленные темы:
Администратор - Армен Адамян © 2024