Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 15:42
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 14
Гостей: 13
Пользователей: 1
MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты Вид новостей

Слайд панели на jQuery

Слайд панели на jQuery

HTML:
Код: 
<div class="container">  
<div class="TabMenu">  
<span> <img src="images/contact.png" /> </span> <span> <img src="images/ipod.png" /> </span> <span> <img src="images/drive.png" /> </span> </div> <div class="ContentFrame"> <div class="AllTabs"> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей первой вкладки </p> </div> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей второй вкладки </p> </div> <div class="TabContent"> <p> Здесь будет текст содержимого Вашей третьей вкладки </p> </div> </div> </div> </div>

Теперь те стили, которые мы привязывали к элементам панели, мы пропишем между тегами <head> и </head> Ниже я разместил примерный код стилей, который будет применяться в стилизации этого слайда:

CSS:

Код: 
<style type="text/css"> body { margin:0; padding:0; } .container { background: url(images/slideTabbg.png); width:388px; height:300px; overflow:hidden; margin:auto; } .selector { background: url(images/selector.png); } .hovering { background: url(images/selector.png); opacity: 0.5; } .container .TabMenu { position: relative; top: 5px; left: 2px; z-index: 10; } .container .TabMenu span { display: inline-block; height: 77px; margin: 0px; padding:0px; } .container .ContentFrame { width: 360px; height:206px; left: 10px; position: relative; overflow:hidden; } .container .ContentFrame .AllTabs { position: relative; left:0px; width: 1190px; height: 206px; overflow:hidden; } .container .ContentFrame .AllTabs .TabContent { width:360px; height: 200px; margin-right:20px; text-align: justify; float:left; overflow:hidden; } </style>

Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наш слайд будет некорректно отображаться. Вставьте его, пожалуйста, также, между тегами <head> и </head> Выглядеть привязка фреймворка будет следующим образом. :

Код: 
<script type="text/javascript" src="js/jquery.js"></script>

Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <head> и </head> прописать следующий небольшой javascript-код:

JavaScript:

Код: 
<script type="text/javascript"> $(document).ready(function(){ //Инициализация //Устанавливаем селектор для первой вкладки $(".container .TabMenu span:first").addClass("selector"); //Базовое действие при наведении мышью $(".container .TabMenu span").mouseover(function(){ $(this).addClass("hovering"); }); $(".container .TabMenu span").mouseout(function(){ $(this).removeClass("hovering"); }); //Действие при нажатии на вкладку панели $(".container .TabMenu span").click(function(){ //Удаление существующего селектора $(".selector").removeClass("selector"); //Добавление стилей селектора $(this).addClass("selector"); //Установка ширины панели var TabWidth = $(".TabContent:first").width(); if(parseInt($(".TabContent:first").css("margin-left")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-left")); if(parseInt($(".TabContent:first").css("margin-right")) >0) TabWidth += parseInt($(".TabContent:first").css("margin-right")); //Устанавливаем границы скольжения содержимого вкладки var newLeft = -1* $("span").index(this) * TabWidth; //Теперь анимируем наше содержимое вкладки $(".AllTabs").animate({ left: + newLeft + "px" },1000); }); }); </script>
Смотрим ПРИМЕР
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3806 | Рейтинг: 4.3/3 | |Категория: Скрипты Вид новостей | Добавил: mdbaner | Дата: 12.06.2009 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru