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

Скрипты

Рисунок Вертикальный слайдер-закладки на jQuery
x;z-index:1 }
Вертикальный слайдер-закладки на 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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


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

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

Мини-форум

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

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

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



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