Слайдер-закладки на jQuery

Скрипты

Рисунок Слайдер-закладки на jQuery
Слайдер-закладки на jQuery Слайдер-закладки на jQuery
оценка: 4.0 из 5
оценок: 6

Предлагаю вашему вниманию скрипт слайдера-закладки. Такой слайдер будет экономить место на странице, но при этом не будет скрывать информацию из виду. К тому же, слайдер-закладка позволит добавить вашему сайту динамичности. Поэтому, приступим к подключению скрипта к странице сайта.

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

Так как скрипт основан на функционале jQuery, то его тоже нужно подключить. jQuery подключаем следующим кодом, который размещаем в теле HEAD вашей страницы:

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

Если ваш сайт сделан на UCOZ, то jQuery подключать не нужно.

Блоки, которые будут в слайдере должны иметь следующую структуру:

Code
<div class="spTabSlider">
  <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/sptabslide.js"></script>
<script type="text/javascript"><!--
  $(document).ready(function(){
    $sptabslide.init('spTabSlider',300,50,100);
  });
// -->
</script>

Функция, формирующая слайдер, содержит параметры, описанные ниже.

Code
$sptabslide.init(Class, Speed, TabWidth, Height);
  • Class - класс блока, в котором находятся элементы слайдера.
  • Speed - скорость анимации, может иметь значение от 0 (очень быстро) до 500 (очень медленно).
  • TabWidth - ширина видимой части скрытого блока, состоит из цифрового значения и измеряется в пикселях.
  • Height - высота блока со слайдером, состоит из цифрового значения и измеряется в пикселях.

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




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



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

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

На этом все. Скрипт должен работать без проблем. Если что-то не получается - пишите в мини форуме ниже.

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

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




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


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

rss
Категория:Скрипты
Просмотрено:6507
Рейтинг:4.0/6
Дата добавления:2011-01-25 22:32, Вторник
Добавил:Szen
Теги:слайдер, закладки

Мини-форум

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

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

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



Онлайн всего: 7
Гостей: 6
Пользователей: 1

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