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

Закладки являются одним из важных элементов интерфейса пользователя. В данном уроке мы сделаем динамические закладки с использованием 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.

 


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yBtPCxg1HXk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Динамические закладки на jQuery | | 2012-06-19 12:08:03 | | Статьи Web-мастеру | | Закладки являются одним из важных элементов интерфейса пользователя. В данном уроке мы сделаем динамические закладки с использованием jQuery.  В библиотеке JQuery UI имеется функционал для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: