Tabs — част 1

В този урок ще продължим работа с файловете, които използвахме в примера за deep linking. Само не забравяйте да си оправите стойността на root, променливата. Този път наистина ще добавим табове в страницата tabs.

Урокът ще бъде разделен на две части. В първата ще опишем точно какви файлове ви трябват, от къде да си ги изтеглите, как да ги добавите в страницата си и как да инициализирате табовете. Ако се чувствате достатъчно уверени в това, може просто да изчакате втора част от урока, където ще добавим интеграция с jQuery Address, за да не остане deep linking-ът, който вече имаме само частичен.

За самите табове ще използваме готова библиотека. Една от най-разпространените и качествени е jQuery UI. Това всъщност е цялостен пакет с JavaScript widget-и, но в този случай ние ще използваме само табове.

jQuery UI

Първо трябва да изтеглим tabs функционалността от jQuery UI. За целта отиваме на http://jqueryui.com/ където кликваме на големия оранжев бутон “Custom Download”.

От новата страница (http://jqueryui.com/download/) първо намерете секцията Components и премахнете отметката на Toggle All. Така ще изключим всичко и в последствие ще си изберем само каквото ни трябва. Скролнете надолу докато стигнете до секцията Widgets. Към края ѝ ще видите Tabs — включете отметката за това. Ако скролнете обратно нагоре ще видите, че са поставени други две отметки — за Core и Widget. Това е така, защото Tabs изисква тези два други компонента, за да работи правилно.

Би трябвало в момента да сте в това състояние: http://jqueryui.com/download/#!version=1.10.2&components=1100000000000000001000000000000000 (да живее deep linking :P). Скролнете докрай надолу и кликнете Download. Изтеглете генерирания архив.

След като разархивирате това, което изтеглихте, ще забележите, че вътре пак има доста файлове, които в нашия случай са излишни. Има демонстрации как работи, основната jQuery библиотека, която вече сме добавили и др.

Отворете папка “js” от проекта и копирайте в нея js/jquery-ui-1.10.2.custom.min.js (естествено е, че след време вече ще има нова версия — нека това не ви притеснява).

Копирайте и папката css/ui-lightness в проекта. Аз отново ще я поставя в папка "js".

Всичко останало е излишно в този случай, така че може да го изтриете.

Зареждане локално

Сега трябва да добавим JS и CSS файловете към сайта ни, така че head частта при мене изглежда вече така:

<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	
	<title>Deep Linking — Tabs</title>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,cyrillic" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="js/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery-address/jquery.address-1.5.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>
	
	<script type="text/javascript" src="js/func.js?v2"></script>
</head>

Забележете, че добавям стиловете от jQuery UI преди своите собствени, за да мога в последствие лесно да ги презапиша. Освен това добавям и jQuery UI JavaScript файла преди моя собствен func.js файл. Това е защото във func.js ще използвам функционалност, която е дефинирана в jQuery UI. Ако тя още не е парсирана от браузъра ще възникне грешка.

Инициализиране

Следващата стъпка е да добавим markup, с който jQuery UI Tabs widget-а може да работи. Той в общи линии трябва да изглежда така:

<div id="tabs">
	<ul>
		<li><a href="#first">First</a></li>
		<li><a href="#second">Second</a></li>
		<li><a href="#third">Third</a></li>
	</ul>
	
	<div id="first">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	
	<div id="second">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	
	<div id="third">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

За да инициализираме табовете трябва да извикаме следната функция:

$('#tabs').tabs();

Тук обаче има една тънкост. Зареждаме съдържанието си с AJAX, разчитайки на change event от jQuery Address. Обаче change event се генерира още при първоначалното зареждане на страницата. Така че ако инизиализираме табовете на DOM Ready, те ще се скрият, тъй като change event-ът предизвиква AJAX, който отнема малко по-дълго от инициализирането на табовете и презаписва техния markup. Освен това, ако пристигаме от home страницата и заредим tabs страницата с AJAX, табовете отново няма да се инициализират, тъй като DOM Ready вече е минал. По тази причина ще инициализираме табовете след като вече сме заредили markup-а с AJAX и сме го добавили в текущия DOM:

$.get(url + '?' + new Date().getTime(), function (data, status, XHR) {
	if (status == 'success') {
		$('section[role="main"]').html($(data).find('section[role="main"]').html());
		
		$('title').html($(data).filter('title').html());
		$('header').html($(data).find('header').html());
		
		$('#tabs').tabs();
	} else {
		// tell the user we could not connect to the server
	}
});

Можете да видите резултата на https://magadanski.com/demo/tabs/tabs.html

Очаквайте втора част на урока, в която ще добавим и deep linking за нашите табове.

Един отговор за “Tabs — част 1”

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.