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

2642
6 из 10
Проголосовало: 4






Блок использует 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>
Автор публикации: Загрузка
Загрузка
Ka3aHTuI7, это его n материал
  • Всего комментариев: 4

The_Host
0
The_Host написал: Написано 19 Января 2012 в 18:56
Комментарий №3
biggrin

RAF
-1
RAF написал: Написано 19 Января 2012 в 18:31
Комментарий №2
Ниче неработает

sorokin_andrey
0
sorokin_andrey написал: Написано 19 Января 2012 в 19:59
Комментарий №4
не знаю как у тебя у меня всё норм wink

sorokin_andrey
0
sorokin_andrey написал: Написано 19 Января 2012 в 17:00
Комментарий №1
класно всё работает happy

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: