Создаем динамические закладки на jQuery

Здравствуйте, уважаемые читатели!

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

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

HTML-код

Созданная нами HTML разметка закладки содержит только единственный элемент li — кнопку добавления закладки.

<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent"></div>

jQuery

Говоря о динамическом элементе, нужно понимать, что он создается на лету, то есть нажал на кнопку «Добавить закладку» и она сразу же появляется (не нужно писать каких-то кодов и т. д. — все происходит на «автомате»). В jQuery это выполняется при помощи функции «addtab» с привязанным к нему обработчиком событий «click».

$(function() {
var total_tabs = 0;

// Инициализируем первую закладку
total_tabs++;
addtab(total_tabs);

$("#addtab, #litab").click(function() {
total_tabs++;
$("#tabcontent p").hide();
addtab(total_tabs);
return false;
});

function addtab(count) {
var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Закладка №'+count+'&nbsp;&nbsp;'+closetab+'</li>');
$("#tabcontent").append('<p id="c'+count+'">Содержание закладки № '+count+'</p>');

$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");

$("#t"+count).bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
});

$("#close"+count).bind("click", function() {
// Активируем предыдущую закладку
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+count).prev().fadeIn('slow');

$(this).parent().remove();
$("#c"+count).remove();
return false;
});
}
});

CSS-код

Добавляем к нашему элементу стили.

#tabul {
padding: 0;
margin: 0;
padding: 5px 0;
}
#tabul li {
display: inline;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
cursor: pointer;
}
.ntabs {
background: #BDC7D5;
margin-right: 1px;
font-size: 11px;
font-weight: bold;
color: #333;
border: 1px solid #BDC7D5;
padding: 5px 3px 5px 8px;
}
.add {
padding: 5px 8px;
}
#addtab {
font-size: 16px;
text-decoration: none;
position: relative;
top: 2px;
color: #333;
}
#addtab:hover {
color: #999;
}
.ctab {
background: #E7EDF6;
position: relative;
top: 2px;
border-bottom-width: 0;
}
.close {
text-decoration: none;
color: #999;
font-weight: bold;
font-size: 14px;
padding: 0 4px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
}
.close:hover {
background: #999;
color: #333;
}
#tabcontent {
border: 1px solid #BDC7D5;
background: #E7EDF6;
padding: 10px;
text-align: center;
font-weight: bold;
color: #666;
font-size: 24px;
}

Динамическая закладка готова, количество создаваемых закладок – неограничено. При желании, вы можете доработать данный элемент, добавить дополнительные кнопки или навигацию и т.д.