Табы для сайта (вкладки) на javascript!


Вкладки на javascript Приветствую всех читателей этого блога! Сегодня я расскажу о том, как можно сделать простые и "легкие" вкладки (tabs) для вашего сайта. Вкладки - это очень удобные элементы веб-ресурса, так как они экономят время, улучшают юзабилити, да и в качестве элементов дизайна их тоже нередко используют. Давайте рассмотрим основные особенности табов и разберем код на javascript.

Основные особенности

Во-первых вкладки будут реагировать не только на клик мыши, но и на наведение (то есть для смены вкладки достаточно навести курсор мыши) . Во-вторых, наши вкладки будут автоматически изменяться свой размер в зависимости от названия (длины названия) разделов. Это значит, что если вам нужно будет сменить название какого-нибудь раздела, то вам не нужно будет изменять список стилей (сss) - размеры автоматически будут настроены. В-третьих название Активной (текущей, выбранной) вкладки будет "подсвечено" с помощью белой рамки.

Разберем код..

<script type="text/javascript">

		//Номер текущего выбранного таба
	var curent_tab = 1;
	
		//Названия табов
	var tabName_1 = "Автомобили";
	var tabName_2 = "Энциклопедия";
	var tabName_3 = "Развлечения";
	
	
			//Функция установки настроек
	function setting(){
		
			var wrapper = document.getElementById('wrap');
			
				//Выбираем все кнопки, присваивая их глобальным переменным
			window.battom1 = document.getElementById('bat_1');
			window.battom2 = document.getElementById('bat_2');
			window.battom3 = document.getElementById('bat_3');
		
				//Даем табам названия
			battom1.innerHTML = tabName_1;
			battom2.innerHTML = tabName_2;
			battom3.innerHTML = tabName_3;
		
				//Выбираем все Div блоки, присваивая их глобальным переменным
			window.taba1 = document.getElementById('tab_1');
			window.taba2 = document.getElementById('tab_2');
			window.taba3 = document.getElementById('tab_3');
					
			var newWidth = battom1.clientWidth + battom2.clientWidth + battom3.clientWidth; 

			newWidth += 6;
			
			wrapper.style.width =  newWidth + 'px';
			
			taba1.style.width = newWidth + 'px';
			taba2.style.width = newWidth + 'px';
			taba3.style.width = newWidth + 'px';			
	}

	function show_tab(num){
	

		if(num == 1 && curent_tab != num){
				
				taba1.style.display='block';	
				battom1.style.border = '1px solid #ffffff';
				
				battom2.style.border = 'none';
				battom3.style.border = 'none';
				
				
				taba2.style.display='none';
				taba3.style.display='none';
				curent_tab = num;
		}
		
		if(num == 2 && curent_tab != num){
		
				taba2.style.display='block';	
				battom2.style.border = '1px solid #ffffff';
				
				battom1.style.border = 'none';
				battom3.style.border = 'none';
				
				taba1.style.display='none';
				taba3.style.display='none';
				curent_tab = num;
		}
	
		if(num == 3 && curent_tab != num){
		
				taba3.style.display='block';	
				battom3.style.border = '1px solid #ffffff';
				
				battom1.style.border = 'none';
				battom2.style.border = 'none';
				
				taba1.style.display='none';
				taba2.style.display='none';
				curent_tab = num;
		}
	}

</script>
Каждую строчку кода разбирать не будем, исходя из комментариев все должно быть понятно, разберем некоторые только некоторые моменты. В коде имеются две основные функции, первая из которых: setting() - соответственно эта функция отвечает за первоначальные настройки, а именно:
  • Выборка элементов по id (вкладок, блоков)
  • Присвоение табам их названия
  • Вычисление новых размеров div блоков
  • Изменение размеров блоков
Данная функция вызывается в момент загрузки страницы, а именно элемента body: <body onload="setting()"> Идем далее.. show_tab - эта функция отвечает за показ нужных вкладок и срабатывает при наведении мыли либо по клику. У нее имеется параметр num - это номер текущей табы, он проверяется при вызове функции и если он равен номеру текущей вкладки (то есть мы навели на уже выбранную, активную вкладку), то ничего не происходит, иначе, тот блок, который мы выбрали, становится видимым, а два других исчезают (становятся невидимыми.) Также, переменной, отвечающей за текущий таб, присваивается значение переданного параметра: curent_tab = num; Можно взглянуть на пример работы вышеописанного алгоритма, а также скачать html страницу данного примера.
Demo пример вкладок Скачать пример
На этом все, надеюсь вы найдете им применение, пока!


Раздел: Программирование

Дата последнего изменения: 2014-01-24 00:10:48

Просмотров: 12001

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*