Слайдер-закладки на jQuery
Скрипты
Слайдер-закладки на jQueryПредлагаю вашему вниманию скрипт слайдера-закладки. Такой слайдер будет экономить место на странице, но при этом не будет скрывать информацию из виду. К тому же, слайдер-закладка позволит добавить вашему сайту динамичности. Поэтому, приступим к подключению скрипта к странице сайта.
Скрипт очень простой. Те, кто желает разместить скрипт на своем хосте, можете скачать его по следующей ссылке: sptabslide.js.
Так как скрипт основан на функционале jQuery, то его тоже нужно подключить. jQuery подключаем следующим кодом, который размещаем в теле HEAD вашей страницы:
Если ваш сайт сделан на UCOZ, то jQuery подключать не нужно.
Блоки, которые будут в слайдере должны иметь следующую структуру:
<div>Контент блока 1</div>
<div>Контент блока 2</div>
<div>Контент блока 3</div>
<div>Контент блока 4</div>
</div>
Блоки слайдера должны состоять из любого элемента, не только DIV. Все блоки должны быть взяты в общий элемент DIV с определенным вами классом. Контент каждого блока может быть совершенно любым. Можно вносить как картинки, так и таблицы. Код можно размещать в любом месте в пределах тега BODY.
Сразу после самого блока нужно подключить сам скрипт и выполнить функцию формирования слайдера. Если скрипт слайдера вы разместили на своем хосте, то замените соответствующий адрес в коде. Код следующий:
<script type="text/javascript"><!--
$(document).ready(function(){
$sptabslide.init('spTabSlider',300,50,100);
});
// -->
</script>
Функция, формирующая слайдер, содержит параметры, описанные ниже.
- Class - класс блока, в котором находятся элементы слайдера.
- Speed - скорость анимации, может иметь значение от 0 (очень быстро) до 500 (очень медленно).
- TabWidth - ширина видимой части скрытого блока, состоит из цифрового значения и измеряется в пикселях.
- Height - высота блока со слайдером, состоит из цифрового значения и измеряется в пикселях.
Рабочий пример слайдера-закладок можете увидеть тут:
Кулинарные рецепты
Софт для ПК
Эмуляторы и игры
Свалка - интересноеСкрипт слайдера-закладок тестировался на следующих браузерах:
- Opera 10
- Firefox 3.6
- Google Chrom
- Internet Explorer 6
- Internet Explorer 7
На этом все. Скрипт должен работать без проблем. Если что-то не получается - пишите в мини форуме ниже.
Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Слайдер-закладки на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 8171 |
| Рейтинг: | 4.0/6 |
| Дата добавления: | 2011-01-25 22:32, Вторник |
| Добавил: | Szen |
| Теги: | слайдер, закладки |
Рекомендуем
Дополнительно к Слайдер-закладки на jQuery
Мини-форум
| № 0 | 2011-01-25 22:32 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Слайдер-закладки на jQuery". |
| Гость |
