Вертикальный слайдер-закладки на jQuery

Скрипты

Рисунок Вертикальный слайдер-закладки на jQuery
Вертикальный слайдер-закладки на jQuery Вертикальный слайдер-закладки на jQuery
оценка: 4.3 из 5
оценок: 9

По многочисленным просьбам (ровно 1 человек), предлагаю вертикальный вариант слайдера-закладок на основе jQuery. В отличии от горизонтального слайдера в этом анимация происходит сверху-вниз. Такой слайдер прекрасно будет смотреться в правом, или левом блоке сайта. Можно, также, использовать его как меню для нескольких категорий.

Скрипт слайдера можно скачать и установить на своем хосте. Скачать его можно по следующей ссылке: скрипт вертикального слайдера-закладки.

В основе скрипта лежит фрймворк jQuery. Поэтому выясните, подключен ли он на вашем сайте (если ваш сайт на UCOZ, то подключен). Если jQuery не подключен, то впишите в тело HEAD вашего сайта следующий код:

Code
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Структура блока слайдера должна выглядеть следующим образом:

Code
<div class="spTabSliderVert">
  <div>Контент блока 1</div>
  <div>Контент блока 2</div>
  <div>Контент блока 3</div>
  <div>Контент блока 4</div>
</div>

Контент элементов слайдера должен быть взят в тег DIV, или другой тег. Все элементы, в свою очередь, должны быть взяты в блок DIV с определенным классом. Слайдер можно разместить в любом месте страницы сайта в пределах тега BODY.

Сразу после блока слайдера нужно вписать код подключения скрипта и вызов функции запуска слайдера. Код выглядит следующим образом:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/sptabslider/sptabslidevert.js"></script>
<script type="text/javascript"><!--
  $(document).ready(function(){
    $sptabslidevert.init('spTabSliderVert',300,50,200,400);
  });
// -->
</script>

Функция запуска слайдера используется следующим образом:

Code
$sptabslidevert.init(Class, Speed, TabHeight, Width, Height);

Параметры у функции запуска слайдера следующие:

  • Class - класс DIV блока слайдера.
  • Speed - скорость анимации слайдера.
  • TabHeight - высота закладкок слайдера.
  • Width - ширина слайдера.
  • Height - высота слайдера.

Рабочий пример вертикального слайдера-закладок можете увидеть ниже:



Картинка 1
 Кулинарные рецепты
 перейти
Картинка 2
 Софт для ПК
 перейти
Картинка 3
 Эмуляторы и игры
 перейти
Картинка 4
 Свалка - интересное
 перейти


Скрипт вертикального слайдера-закладок тестировался на следующих браузерах:

  • Opera 10
  • Firefox 3.6
  • Google Chrom
  • Internet Explorer 6
  • Internet Explorer 7

Если у вас что-то не получается, пишите в нашем мини-форуме ниже. Также принимаются благодарности и предложения.

Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Вертикальный слайдер-закладки на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:8695
Рейтинг:4.3/9
Дата добавления:2011-01-27 07:57, Четверг
Добавил:Szen
Теги:закладки, слайдер

Мини-форум

№ 02011-01-27 07:57
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Вертикальный слайдер-закладки на jQuery".
Гость
Учавствовать в обсуждении "Вертикальный слайдер-закладки на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 121
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz