Вкладки часть 1

Вкладки - часть 1

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

Урок будет разделен на две части. В первой мы опишем, какие именно файлы вам нужны, где их скачать, как добавить на свою страницу и как инициализировать вкладки. Если вы чувствуете себя достаточно уверенно, вы можете просто дождаться второй части руководства, где мы добавим интеграцию с адресом jQuery, чтобы не осталось глубинных ссылок, которые у нас уже есть только частично..

Для самих вкладок воспользуемся готовой библиотекой. Один из самых распространенных и качественных — это jQuery UI. На самом деле это полный пакет виджетов JavaScript, но в этом случае мы будем использовать только вкладки..

jQuery UI

Сначала нам нужно загрузить функции вкладок из пользовательского интерфейса jQuery. Для этого мы переходим на http://jqueryui.com/, где нажимаем большую оранжевую кнопку «Пользовательская загрузка»..

На новой странице (http://jqueryui.com/download/) сначала найдите раздел «Компоненты» и снимите флажок «Переключить все». Таким образом мы отключим все и выберем только то, что нам нужно. Прокрутите вниз, пока не дойдете до раздела "Виджеты". В конце вы увидите вкладки — установите этот флажок. Если вы прокрутите назад, вы увидите, что есть еще два флажка — для Core и Widget. Это связано с тем, что вкладки требуют, чтобы эти два других компонента работали должным образом..

В настоящий момент вы должны находиться в этом состоянии: http://jqueryui.com/download/#!version=1.10.2components=1100000000000000001000000000000000 (прямая ссылка на контент: P). Полностью прокрутите вниз и нажмите Загрузить. Скачать сгенерированный архив.

Читать также:  Тестирование палиндрома часть 3

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

Откройте в проекте папку js и скопируйте в нее js / jquery-ui-1.10.2.custom.min.js (конечно, со временем выйдет новая версия — не беспокойтесь об этом).

Также скопируйте в проект папку css / ui-lightness. Снова положу в папку "js".

Все остальное в этом случае избыточно, поэтому вы можете удалить его..

Загрузить локально

Теперь нам нужно добавить файлы JS и CSS на наш сайт, чтобы головная часть выглядела для меня так:

голова>
мета-кодировка = "utf-8" />
meta http-Equiv = "x-ua-совместимый" content = "IE = edge" />
title> Вкладки с глубокими ссылками / заголовок>
ссылка href = "http://fonts.googleapis.com/css?family=Open+Sans:300subset=latin,cyrillic-ext,cyrillic" rel = "stylesheet" type = "text / css" />
ссылка rel = "stylesheet" type = "text / css" href = "js / ui-lightness / jquery-ui-1.10.2.custom.min.css" />
ссылка rel = "stylesheet" type = "text / css" href = "style.css" />
тип скрипта = "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>
тип скрипта = "text / javascript" src = "js / func.js? v2"> / script>
/ голова>

Обратите внимание, что я добавляю стили из пользовательского интерфейса jQuery перед собственными, чтобы потом легко их перезаписать. Я также добавляю файл JavaScript jQuery UI перед своим собственным файлом func.js. Это потому, что в func.js я буду использовать функции, определенные в пользовательском интерфейсе jQuery. Если он еще не проанализирован браузером, произойдет ошибка..

Читать также:  Массивы в PHP (часть 1)

Инициализация

Следующим шагом является добавление разметки, с которой может работать виджет jQuery UI Tabs. Обычно это должно выглядеть так:

div id = "вкладки">
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 = "первый">
p> Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum ./p>
/ div>
div id = "второй">
p> Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum ./p>
/ div>
div id = "третий">
p> Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum ./p>
/ div>
/ div>

Читать также:  Начало работы в PHP

Для инициализации вкладок нам нужно вызвать следующую функцию:

$ (‘# вкладки’). вкладки ();

Однако здесь есть тонкость. Мы загружаем наш контент с помощью AJAX, полагаясь на событие изменения из адреса jQuery. Однако событие изменения генерируется при первой загрузке страницы. Поэтому, если мы инициализируем вкладки DOM Ready, они будут скрыты, потому что событие изменения запускает AJAX, который занимает немного больше времени, чем инициализация вкладок, и перезаписывает их разметку. Кроме того, если мы перейдем с домашней страницы и загрузим страницу вкладок с помощью AJAX, вкладки не будут инициализированы снова, поскольку DOM Ready уже прошел. По этой причине мы инициализируем вкладки после того, как мы уже загрузили разметку с помощью AJAX и добавили ее в текущую DOM:

$ .get (url + ‘?’ + new Date (). getTime (), function (data, status, XHR) {if (status == ‘success’) {$ (‘section [role = "main"]’ ) .html ($ (data) .find (‘section [role = "main"]’). html ());
$ (‘заголовок’). html ($ (данные) .filter (‘заголовок’). html ()); $ (‘заголовок’). html ($ (данные) .find (‘заголовок’). html ());
$ (‘# вкладки’). вкладки (); } else {// сообщаем пользователю, что мы не можем подключиться к серверу}});

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

Ожидайте вторую часть урока, в которой мы добавим диплинкинг для наших вкладок..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?