Полезный блок с вкладками для uCoz
Полезный блок с вкладками для uCoz? и что же в нём такого полезного?) Ну к примеру можно в эти вкладки спрятать разные плееры для сайтов с тематикой онлайн кино или торрент. Если так подумать он много для чего полезный...)
Для начала подключим к странице jQuery и плагин. Желательно располагать код в теле HEAD. Владельцам сайта на uCoz располагать код после открывающего тега BODY, и только вызов плагина. jQuery на uCoz подключен по умолчанию (обычно). Делается следующим кодом:
Теперь нужно структурировать материал. Он должен иметь следующую структуру:
Заголовки H3 можно заменить на любой тег. Скрипт берет первый папавшийся элемент и использует его как название вкладки.
Далее, подключаем стили и вызываем функцию создания блока с вкладками. Делается это следующим кодом (желательно расположить в конце страницы):
Для начала подключим к странице jQuery и плагин. Желательно располагать код в теле HEAD. Владельцам сайта на uCoz располагать код после открывающего тега BODY, и только вызов плагина. jQuery на uCoz подключен по умолчанию (обычно). Делается следующим кодом:
Code
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/vkladki_block/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/vkladki_block/tabbook1.jquery.js"></script>
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/vkladki_block/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>
<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://uwebo4ka.3dn.ru/scripts/vkladki_block/tabbook1.css">
<script type="text/javascript">
$(function(){
$('#tabBook1').tabbook1({
width: '500px',
height: '300px',
speed: 700,
position: 'top',
maxlength: 20,
activepage: 0
});
});
</script>
<script type="text/javascript">
$(function(){
$('#tabBook1').tabbook1({
width: '500px',
height: '300px',
speed: 700,
position: 'top',
maxlength: 20,
activepage: 0
});
});
</script>
О материале:
Дата добавления: 12.04.2012 в 08:57
Материал просмотрен: 830 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
0.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет