Здравствуйте, дорогие друзья! В сегодняшнем уроке Вы научитесь делать слайд-панели на jQuery. Существует множество подобных слайдов как этот, однако данный слайд привлек мое внимание больше, чем остальные, поскольку при смене вкладок, содержимое этих вкладок плавно изменяется. Для начала посмотрите демонстрацию и скачайте исходники файлов, которые мы будем использовать в ходе данного урока:
Шаг 1. HTML-конструкция панели
Итак, начнем с создания html-каркаса, который будет служить основой для нашего будущего меню. Ниже я привожу пример такого каркаса, который использовал я:
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>
Шаг 2. Стилизация панели
Отлично! Теперь те стили, которые мы привязывали к элементам панели, мы пропишем между тегами <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>
Шаг 3. Вставка фреймворка jQuery
Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наш слайд будет некорректно отображаться. Вставьте его, пожалуйста, также, между тегами <head> и </head> Выглядеть привязка фреймворка будет следующим образом. :
<script type="text/javascript" src="js/jquery.js"></script>
Шаг 4. Вставка JavaScript-кода
Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <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>
Ну, вот и все. Чтобы чуть-чуть улучшить дизайн этой панели, Вы можете еще поиграться немного со стилями и изображениями. Надеюсь, Вам урок понравился, жду Ваших комментариев! Ну а у меня на этом все. С уважением, Ваш jQuery-проводник - М. К.