В этом уроке я покажу Вам как используя jQuery можно создать вкладки, которые можно добавлять и удалять динамически.
В этом уроке мы попытаемся симулировать ситуацию с веб браузерами, в которых в новые страницы открываются в новых вкладках. Наш скрипт будет так тоже уметь.
Какую же информацию можно разместить в этих вкладках? Это возможно наиболее важный вопрос. Я бы сказал, что Вам необходимо использовать подобные вкладки когда Вам необходимо выполнить набор операций в одно и то же время. К примеру, Вы можете искать и заменять текст во всех вкладках одним действием, а потом сохранить все изменения еще одним. Далее, эти вкладки также будут полезны для предоставления информации к прочтению (тексты, отчеты). Как обстоит дела с формами? Что если мы создадим приложение, которое будет позволять управлять разной информацией в одно и то же время? В одной вкладке, я могу изменять данные о наличии товара, в то время как в другой я могу изменять совсем другую информацию. Звучит довольно интересно, но конечно воплотить в жизнь это нелегко.
Внедрение
Давайте взглянем как же создать подобные вкладки. В этом уроке мы предположим, что у нас есть список документов, которые можно открыть в разных вкладках. Вкладки с контентом можно легко закрыть в любую минуту нажатием на "х". Ограничение состоит в том, что один документ можно открыть только раз.
Ниже представлена HTML структура. Мы будем использовать атрибут rel для создания ID элементов и атрибут title для создания контента. Заметьте, что вместо использования атрибута title, Вы можете загружать документы с помощью AJAX.
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
</ul></div><div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
План действий у нас такой: я нажимаю на ссылку DOCUMENT 1, открывается новая вкладка с названием DOCUMENT 1 и контентом "This is the content of Document1". На вкладке будет красный крестик, который позволит закрыть вкладку.
$("#documents a").click(function() {
addTab($(this));
});
Этот код добавит событие клика для каждой ссылки документов, а также передаст саму ссылку к функции addtab.
function addTab(link) {
// Спрятать другие вкладки
$("#tabs li").removeClass("current");
$("#content p").hide();
// Добавить новую вкладку с контентом
$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'>x</a></li>");
$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
$(link).attr("title") + "</p>");
// set the newly added tab as curren
$("#" + $(link).attr("rel") + "_content").show();
}
Функция addtab сперва спрячет все вкладки (если они есть) и удалит класс current со всех вкладок. Этот класс задает другой цвет для активной вкладки. Далее, функция создаст новую вкладку (элемент li), который будет содержать ссылку для названия вкладки, и еще одну ссылку для закрытия. Контент добавляется таким же образом. В конце скрипт устанавливает нажатую вкладку в качестве текущей.
Теперь добавим немного функциональности нашим вкладкам. При нажатии шапки вкладки должен отображаться ее контент. При нажатии на крестик вкладка должна убраться. Для этих 2-х сценариев будем использовать метод live, который привяжет события к элементам уже существующим и тем, которые появятся позже.
$('#tabs a.tab').live('click', function() {
// Взять название вкладки
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// Показать текущую вкладку
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Взять название вкладки
var tabid = $(this).parent().find(".tab").attr("id");
// убрать вкладку и контент
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});
Первая функция добавит контент, вторая - наоборот уберет. Осталось еще несколько вещей. Во-первых, нам необходимо внедрить ограничение, которое будет следить за тем, чтобы вкладка была открыта только 1 раз. Для этого мы расширим нашу функцию addtab
// Если вкладка существует в списке, тогда
if ($("#" + $(link).attr("rel")).length != 0)
return;
И последнее, что нам необходимо сделать - это случай, когда нам необходимо удалить вкладку. После удаления вкладки нам необходимо позаботиться о том, чтобы отображалась другая вкладка. По умолчанию, это будет первая в списке, но также можно настроить, чтобы отображалась следующая или предыдущая.
// если нет текущей вкладки и если они еще есть, тогда показывай первую в списке
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// найти первую вкладку
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// взять ее ссылку и показать контент
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
Заключение
Технически мы завершили все приготовления, за Вами идеи их использования. Если пользоваться ими в неправильном контексте, можно навредить своему сайту чрезмерной сложностью и неюзабильностью. Также необходимо подумать о других вещах. Как быть, если будет много вкладок? Как с этим справляться? Так же как Файрфокс? Как добавлять новые вкладки и должна ли она добавляться в конец или в начало списка?
Есть над чем подумать! :) Удачи в этом нелегком деле!