
Здравствуйте, уважаемые читатели!
Закладки являются важнейшим инструментом интернет пользователя. Сегодня мы попробуем реализовать динамические закладки при помощи 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">×</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Закладка №'+count+' '+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;
}
Динамическая закладка готова, количество создаваемых закладок – неограничено. При желании, вы можете доработать данный элемент, добавить дополнительные кнопки или навигацию и т.д.