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

В данном уроке используются закладки на основе тега li. Методика очень проста, когда создается закладка, для нее генерируется id с помощью переменной счетчика, а также создается элемент содержания, который также соответствует счетчику.

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

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

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;
}

Готово! Вы можете поместить закладку в элемент div и показывать ее как скрытое содержание. Тег ul расширяется динамически, поэтому количество добавляемых закладок не ограничено. Можно добавить кнопки навигации по закладкам и задействовать свойство CSS left.

Добавлено: 28 Апреля 2018 09:30:48 Добавил: Андрей Ковальчук Нравится 0

Добавить