Javascript вкладки без JQuery UI

Материал для тех, кто хочет ипользовать такой элемент пользовательского интерфейса, как вкладки, но совсем не хочет использовать JQuery + JQuery UI.

Этот скрипт, написанный мною, работает в IE6-9, FireFox, Opera, Chrom, Safari. Так же, если у пользоваетля отключен Javascript, то он увидит вполне приличную структуру, а корешки будут работать как анкорные ссылки - попробуйте отключите у себя в браузере Javascript и перезагрузите страничку.

В общем скрипт формирует так называемые вкладки Javascript UI Tab. Размер 5.45KB в сжатом виде 1.36KB

Скачать архив с примером и сриптом: вкладки Javascript UI Tab (5KB)

Пример работы вкладок Javascript UI Tab:

• Вкладка 1
• Вкладка 2
• Вкладка 3

Как видно из примера выше - вкладки могут быть даже вложенными. Конечно это не полноценная замена JQuery UI Tabs - за простоту и лёгкость нужно платить, но мой скрипт так же поддерживает некоторые события, которые происходят при работе с ним, например при инициализации скрипта, при открытии какой либо вкладки и при закрытии вкладки, и вы можете назначить этим событиям свои обработчики, а это уже просторное поле для творчества - можно даже получать данные через AJAX при открытии вкладок или при инициализации скрипта, обеспечить кэширование в случае с AJAX - тем самым повысив скорость работы и многое другое, всё зависит от вашей фантазии и опыта.

Вкладки Javascript как использовать:

Использовать скрипт просто, он работает со следующим HTML - каркасом:

<!-- Корешки вкладок //-->
<ul id="tabs-list">
  <li><a class="some" href="#tab-1">Вкладка 1</a></li>
  <li><a class="some" href="#tab-2">Вкладка 2</a></li>
  <li><a class="some" href="#tab-3">Вкладка 3</a></li>
</ul>

<!-- Тела вкладок //-->
<div id="tabs-body">	
	<div id="tab-1">
		<!-- СОДЕРЖИМОЕ ВКЛАДКИ 1 //-->
	</div>
    <div id="tab-2">
		<!-- СОДЕРЖИМОЕ ВКЛАДКИ 2 //-->
	</div>
    <div id="tab-3">
		<!-- СОДЕРЖИМОЕ ВКЛАДКИ 3 //-->
    </div>
</div>

Так же напишем следующие стили для нашего примера:

	#tabs-body{
		clear: both;
		width: 500px;
		border: solid 1px #093;
	} 
	#tabs-body div{
		padding: 10px;	
		margin: 0px;
		border: solid 1px #green;
	}
	#tabs-list {
		list-style: none;
		margin: 0px;
		padding: 0px;		
	}
	#tabs-list li {
		float: left;
		border: solid 1px #666;
		border-bottom: none;
		margin: 0px 5px;		
	}
	#tabs-list li a {   
		padding: 5px 10px;
		margin: 0px;
		display: block;
	}
	.current{
		background: #F30;
		color: #fff;
	}

Вкладки Javascript UI Tab код:

Код я старался комментировать подробно, поэтому листинг может показаться раздутым, на самом же деле я обычно пишу код как можно лаконичнее и яснее, ведь чем проще код - тем проще его поддерживаать и расширять.

var MsqTab = (function (GLOB) {
	"use strict";
	var DOC = GLOB.document;
	// Эта ф-ция вызывается в контексте объекта вкладок (того, что возвращаем ниже)
	function initEventListener(tab) {
		tab.list.onclick = function (e) {
			// Получаем кроссбр. объект события:
			var ev = e || GLOB.event,
				target = ev.target || ev.srcElement;
			// Если кликнули не на элементе А  или элемент является текущим - на выход:
			if (target.tagName !== "A" || (target.className && target.className.indexOf("current") !== -1)) {
				return false;
			}
			// Событие перед закрытием вкладки:
			if (!tab.config.closeTabCallback(tab)) {
				return false;
			}
			// Скрываем активную вкладку:
			tab.openTab.style.display = "none";
			// Получаем вкладку, соответствующую кликнутомуэлементу:
			tab.openTab = DOC.getElementById(target.hash.slice(1));
			// Событие перед открытием вкладки:
			if (!tab.config.openTabCallback(tab)) {
				return false;
			}
			// Отображаем вкладку, соответствующую клик. элементу:
			tab.openTab.style.display = "block";
			// Убираем класс "current" у, теперь уже бывшего элемента (ссылки) списка:
			tab.currLiA.className = tab.currLiA.className.replace(/(\s?current)\b/, '');
			// Запоминаем ссылку на кликнутый элемент списка (ссылку)...
			tab.currLiA  = target;
			// Устанавливаем ему класс "current", избегая ненужных пробелов:
			tab.currLiA.className += tab.currLiA.className.length ? " current" : "current";
			// Возвращаем всегда, что бы не происходило ни каких переходов:
			return false;
		};
	}
	// Инициализация конфигурации:
	function initConfig(newConfig, tabConfig) {
		var p;
		for (p in newConfig) {
			if (newConfig.hasOwnProperty(p) && tabConfig.hasOwnProperty(p)) {
				tabConfig[p] = typeof newConfig[p] === "undefined" ? tabConfig[p] : newConfig[p];
			}
		}
		return true;
	}
	return function (list, container, config) {
		return {
			list	  : null, // HTML-элемент-список элементов "А" вкладок
			listItems : null, // Массив ссылок(элементов "А") на вкладки
			tabItems  : null, // Массив вкладок(элементов "DIV")
			openTab	  : null, // Ссылка на объект (HTMLDIVElement) - открытую вкладку
			currLiA	  : null, // Ссылка на объект (HTMLAElement) - текущий (активный) элемент списка
			// Конфигурация:
			config   : {
				preOpen		     : 1,
				initCallback     : function (tabObj) {return true; },
				openTabCallback  : function (tabObj) {return true; },
				closeTabCallback : function (tabObj) {return true; }
			},
			/**
			* Инициализация вкладок срабатывает сразу.
			* @param HTMLULElement list - список с элементами-вкладками.
			* @param HTMLElement container - контейнер тел вкладок. 
			* @param Object config - объект конфигурации.
			* @param boolean false
			*/
			init : function (list, container, config) {
				var length, i;
				this.list		= list;
				this.listItems	= list.getElementsByTagName("A");
				this.tabItems	= container.getElementsByTagName("DIV");
				// Инициализация конфигурации:
				initConfig(config, this.config);				
				for (i = 0, length = this.listItems.length; i < length; i += 1) {
					// Ищем текущий (активный) элемент списка
					// И запоминаем ссылки на них.
					if ((i + 1) === this.config.preOpen) {
						this.currLiA  = this.listItems[i];
						// В случае, если currLiA уже имел какой - либо класс-стиль - нам нужно добавить сначала пробел, а потом уже наш класс.
						// Если currLiA НЕ имел какого - либо класса-стиля нам нужно установить имя без пробела.
						// Устанавливаем имя класса, избегая ненужных пробелов:
						this.currLiA.className += this.currLiA.className.length ? " current" : "current";
						this.openTab = DOC.getElementById(this.listItems[i].hash.slice(1));
					}
					// Скрываем все не активные вкладки:
					if (this.tabItems[i] !== this.openTab) {
						this.tabItems[i].style.display = "none";
					}
				}
				// Событие инициализации:
				if (!this.config.initCallback(this)) {
					return false;
				}
				// Навешиваем ОДИН! единственный обработчик сразу на весь список:
				initEventListener(this);
				return this;
			}
		}.init(list, container, config);
	};
}(this));

Вкладки Javascript UI Tab запуск:

Запуск скрипта вкладок происходит вызовом функции MsqTab(list, container,[ config]), которая принимает 2 обязательных и 1 не обязательный параметр:

1. HTMLUlElement list - список корешков
2. HTMLDivElement container - контейнер
3. Object config - объект конфигурации

// Ф-ция "вкладки" :
MsqTab(
	// Список корешков вкладок:
	document.getElementById("tabs-list"), 
	// Контейнер тел вкладок:
	document.getElementById("tabs-body"),
	// Объект конфигурации:
	{
		// Вкладка, открытая по-умолчанию:
		preOpen : 2,
		// Обработчик события, происходящего после инициализации вкладок:
		initCallback : function(tab){
			//console.log(tab);
			//console.log("INIT TAB EVENT!!!");
			return true;
		},
		// Обработчик события, происходящего после открытия какой либо вкладки:
		openTabCallback : function(tab){
			//console.log(tab);
			//console.log("OPEN TAB EVENT!!!");
			return true;
		},
		// Обработчик события, происходящего после закрытия какой либо вкладки:
		closeTabCallback : function(tab){
			//console.log(tab);
			//console.log("CLOSE TAB EVENT!!!");
			return true;
		}
	}
);

Вкладки Javascript UI Tab события:

События, которые происходят при работе скрипта перечислены ниже. На мой взгляд этих событий достаточно, но если вы считаете, что неплохо добавить ещё пишите - добавим

• init - запускается после того, как объект вкладок проинициализарован - имя обработчика должно быть initCallback
• closeTab - запускается при закрытии какой-либо вкладки - имя обработчика должно быть closeTabCallback
• openTab - запускается при закрытии какой-либо вкладки - имя обработчика должно быть openTabCallback

Тут стоит отметить, что когда пользователь кликает на какой-либо вкладке - сначала запуститься событие closeTab, открытой перед этим вкладки, а лишь затем событие openTab - вновь открываемой вкладки.

Обработчики должны быть методами объекта конфигурации, передаваемого как необязательный 3-й параметр. Обработчику передастся единственный аргумент - сам объект вкладок. Обработчики должны возвращать true если вы хотите что бы они не прерывали действия скрипта!

Т.е. если обработчик initCallback - вернёт false или приводимое к false значение, то вкладки проинициализируются, но работать не будут.

Если обработчик closeTabCallback - вернёт false или приводимое к false значение, то текущая открытая вкладка не закроется и новая не откроется.

Если обработчик openTabCallback- вернёт false или приводимое к false значение, то текущая открытая вкладка закроется, но новая не откроется.

Такое поведение обработчиков как бы эмулирует предотвращение действия по-умолчанию для их событий.

Объект конфигурации может содержать следующие члены:

config   : {
    preOpen          : 1,
    initCallback     : function (tabObj) {return true; },
    openTabCallback  : function (tabObj) {return true; },
    closeTabCallback : function (tabObj) {return true; }
}

Он, кстати, определён в листинге, в строке 56. В объекте вкладок доступны свойства:

list      : null, // HTML-элемент-список элементов "А" вкладок
listItems : null, // Массив ссылок(элементов "А") на вкладки
tabItems  : null, // Массив вкладок(элементов "DIV")
openTab   : null, // Ссылка на объект (HTMLDIVElement) - открытую вкладку
currLiA   : null, // Ссылка на объект (HTMLAElement) - текущий (активный) элемент списка
// Конфигурация:
config   : {
    preOpen          : 1,
    initCallback     : function (tabObj) {return true; },
    openTabCallback  : function (tabObj) {return true; },
    closeTabCallback : function (tabObj) {return true; }
},

Это опять же, определёно в листинге, в строке 50.

Ну, вот и всё. Надеюсь объяснил доступно - пользуйтесь на здоровьеи пишите пожелания и комменты.