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

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:

JavaScript Вкладка 1

JavaScript Tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel tortor sed turpis pretium eleifend. Quisque ut orci vitae ante scelerisque commodo. Maecenas ultricies quam vitae dui placerat malesuada. Integer pellentesque odio a quam vestibulum venenatis. Cras sit amet odio lorem, id gravida arcu. Morbi porta luctus odio, quis bibendum augue ultricies vel.

JavaScript Вкладка 2

JavaScript Tab 2 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rutrum est sodales augue convallis iaculis sit amet porta lectus. Pellentesque ut odio nibh, in convallis erat. Praesent sit amet congue lacus. Sed tincidunt volutpat lobortis. Curabitur pharetra, elit ac consequat dignissim, est diam cursus eros, vel egestas diam dolor vitae purus.

JavaScript Вкладка 3

Donec hendrerit pharetra aliquet. Nullam est augue, tristique quis vestibulum ut, feugiat sit amet lacus. Morbi viverra porta lorem at gravida. Vivamus tempus mattis elit, ut faucibus augue gravida quis. Nulla nisl velit, faucibus a pharetra et, auctor dapibus justo. Nullam accumsan, urna in vestibulum suscipit, lacus felis laoreet lectus, ut iaculis justo nisl eu arcu.

JavaScript Вкладка вложенная 1

JavaScript Tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel tortor sed turpis pretium eleifend. Quisque ut orci vitae ante scelerisque commodo. Maecenas ultricies quam vitae dui placerat malesuada. Integer pellentesque odio a quam vestibulum venenatis. Cras sit amet odio lorem, id gravida arcu. Morbi porta luctus odio, quis bibendum augue ultricies vel.

JavaScript Вкладка вложенная 2

JavaScript Tab 2 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rutrum est sodales augue convallis iaculis sit amet porta lectus. Pellentesque ut odio nibh, in convallis erat. Praesent sit amet congue lacus. Sed tincidunt volutpat lobortis. Curabitur pharetra, elit ac consequat dignissim, est diam cursus eros, vel egestas diam dolor vitae purus.

JavaScript Вкладка вложенная 3

JavaScript Tab 2 Aenean scelerisque mi vitae tellus faucibus semper. Vivamus non lectus metus. Praesent vel sapien leo, vel commodo felis. Etiam congue convallis pellentesque. Vestibulum non nibh rutrum ante pharetra luctus. Vivamus metus velit, molestie ut aliquet eget, laoreet a erat. Morbi accumsan commodo consequat. Mauris non massa nulla, et lobortis dolor.

Как видно из примера выше - вкладки могут быть даже вложенными. Конечно это не полноценная замена 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.

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

Добавить комментарий


Защитный код
Обновить



Кто на сайте
Сейчас 75 гостей онлайн