12 июня 2015
3939
jquery закладки

JQuery закладки

JQuery
Демонстрация » Скачать »

От всех авторов и веб разработчиков сайта RootHelp.ru, поздравляем Вас с очень важным днем для всех соотечественников, - с Днём России! В преддверии, выбора темы для написания материала, решил посвятить ее JQuery закладкам. На эту тему уже были подобные материалы, к примеру: JavaScript закладки или анимированные вкладки на JavaScript, а может Вам и вовсе будет полезна тема, связанная с JQuery закладками. Решил просто, как бы дополнить к данным темам еще новую, может кому-то придется по душе. Ведь мое дело, - предложить, ваше уже, - выбирать. 

 

В общем, сначала хочу описать суть того, что я пытался сделать. Моя задача была создать вертикальное навигационное меню, с возможностью анимационного переключения между закладками. Таким образом, добавив определенные JQuery и CSS свойства, получить нужный эффект.

А теперь, давайте по-порядку, пройдемся по всему коду.

 

JavaScript закладки на RootHelp.ru

 

Первая часть. HTML. Подключение библиотек js и стилей css.

 

Все по стандарту, подключаем сначала стили css, а дальше нужные нам библиотеки js. В данном скрипте, нам потребуется библиотека jquery.min.js и стили demo.css.

 

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 

Далее начнем уже сразу с разработки навигационного левого меню. Опять все по стандарту, создаем меню через теги списка ul li, задавая им обязательный индефикатор menu и два класса по умолчанию, у активного элемента класс act, у пассивного none. Соответственно, если Вы хотите добавить больше двух пунктов меню, просто дублируйте второй пункт меню с классом none.

 

<div id="menu">
<ul>
	<li class="act"><a href="#">Пункт 1<span></span></a></li>
	<li class="none"><a href="#">Пункт 2<span></span></a></li>
</ul>
</div>

 

Теперь можно переходить к разработке самого контента, который будет появляться при выборе, соответствующего, пункта меню. Тут все просто, задаем тегу div индефикатор demo, а остальное, я думаю, можно и не объяснять, так как просто код HTML и не более.

 

<div id="demo">

<h1>Скрипты для сайта</h1>
	
<h2>Дизайн сайта</h2>
<p>
<img src="img/roothelp.png" alt="roothelp.ru" width="400" height="305">
</p>

<h2>Чем мы занимаемся?</h2> 
<p>Мы являемся веб ресурсом, который разрабатывает и предоставляет 
качественные скрипты для сайта, с возможностью дальнейшей их 
интеграцией в свой проект.</p>

</div>

 

 

Вторая часть. CSS. 

 

Переходим к стилям css нашего скрипта с закладками и сразу же стоит задать двум главным блокам, а именно идентификаторы menu и demo нужные свойства ширины и положения.

 

#menu{
	width: 250px;
	float: left;
}


#demo {
    width: 500px;
	float: right;
}

 

Далее, исходя из содержимого списка навигационного меню, задаем им обязательные применимые свойства.

 

ul li{
    list-style: none;
}

ul li a {
    display: block;
    width: 250px;
    text-align: center;
	text-decoration: none;
}

 

Ну и для того, чтобы наши закладки выделялись, то есть при активной закладке с классом act она подсвечивалась, и при пассивном положении none, была обычной.

Класс act span, является не обязательным, так как просто задает уголок при активной закладке.

 

.act a{
	line-height: 40px;
	background: #000000;
    color: #FFFFFF;
	float: left;
}

.act span{
	border: 20px solid transparent;	
	border-left: 20px solid #000000;
	margin-left: 250px;
	margin-top: -40px;
	float: left;
}

.none a {
	line-height: 40px;
    color: #000000;
	background: #f1f1f1;
}

 

Третья часть. JavaScript. 

 

Теперь нам осталось сделать самое важное, создать JQuery механизм работы закладок. Для начала я решил по эксперементировать и создал небольшое анимационное движение навигационного меню влево при наведении, после отведения, состояние возвращалось по умолчанию в исходное положение. Это что касается функции animate

 

$("#menu").hover(function() {
	$("a").animate({'marginLeft':'1px'}, 1000); 
},
function(){
	$("a").animate({'marginLeft':'-1px'}, 1000);
});

 

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

 

$('li').removeClass('none').addClass('act');
$('li').not(this).removeClass('act').addClass('none');

 

Чтобы наш контент показывал нужную нам информацию, соответствующая выбранному пункту меню, мы добавляем функции сворачивания и разворачивания slideUp и slideDown с нужной нам высотой. Перед, этим хочу отметить, что задаем переменную demo, в которой будем хранить значения индекса элемента в наборе из списка. 

 

var demo = $(this).index();
$('#demo h2').slideUp(1000).eq(demo).slideDown(1000);
$('#demo p').slideUp(1000).eq(demo).slideDown(1000);

 

Теперь нам остается задать только первичные свойства нашим тегам, которые будут выводится на странице контента. Например, к тегу H1 я применил функцию show, которая будет всегда показывать данный тег с данными, а теги H2 и P применил функцию hide, которая скрывает данные с этим тегом. Ну, а также задал пару классов на JQuery, которые правда можно было задать и на CSS.

 

$('#demo h1').not(':first').show();
$('#demo h2').not(':first').hide();
$('#demo p').not(':first').hide();
$('#demo h2').css({'marginTop': '20px'});
$('#demo p').css({'marginTop': '10px', 'textAlign': 'justify'});	

 

Ну и напоследок, посмотрим весь код третьей части темы JQuery закладки.

 

$(document).ready(function(){
	$("#menu").hover(function() {
		$("a").animate({'marginLeft':'1px'}, 1000); 
		},
		function(){
		$("a").animate({'marginLeft':'-1px'}, 1000);
		});
    $('li').click(function(){
		$('li').removeClass('none').addClass('act');
        $('li').not(this).removeClass('act').addClass('none');
		var demo = $(this).index();
        $('#demo h2').slideUp(1000).eq(demo).slideDown(1000);
        $('#demo p').slideUp(1000).eq(demo).slideDown(1000);
    });
	$('#demo h1').not(':first').show();
    $('#demo h2').not(':first').hide();
    $('#demo p').not(':first').hide();
	$('#demo h2').css({'marginTop': '20px'});
	$('#demo p').css({'marginTop': '10px', 'textAlign': 'justify'});	
});

 

Еще раз поздравляю Вас с праздником, всего Вам наилучшего и позитивного! Большое спасибо за внимание!