jQuery UI .tabs（）無內容標簽？

Question

我想要一組標簽。 在每個標簽頁眉中，都有一段文字和一個按鈕，可在單擊時刪除其所屬的標簽頁。 在選項卡標題（ <li> ）之后，我想有一個額外的按鈕，可以在單擊時創建一個新選項卡。 例如 ：

<div class="TabSet">
    <ul>
        <li><a href="#tabContent0">TEXT<button class="RemTab">x</button></a></li>
        <li><a href="#tabContent1">TEXT<button class="RemTab">x</button></a></li>
        <li><a href="#tabContent2">TEXT<button class="RemTab">x</button></a></li>
        <li><button class="AddTab">+</button></li>
    </ul>
    <div id="tabContent0">CONTENT</div>
    <div id="tabContent1">CONTENT</div>
    <div id="tabContent2">CONTENT</div>
</div>

如果我的<li>元素多於<div>元素，jQueryUI .tabs（）是否可以工作？ 如果沒有，是否有明確的解決方法？

謝謝你的幫助。

Answer 1

首先，“做這項工作”的答案總是“試一試”。

其次，可以通過攔截並取消beforeActivate事件來偽造“空”標簽。 在取消事件處理程序之前，將適當地修改DOM以添加新標簽並調用refresh方法更新UI。

Answer 2

這是我的工作：我在活動選項卡上插入一個“關閉按鈕”：

var $tabs = $('#tabs').tabs({
    heightStyle: 'content',
    activate: function(event, ui) {

        var $activeTab = $tabs.find('.ui-tabs-active');

        // Remove all the close buttons
        $('.ui-tabs-tab i.tabCloser').remove();

        var $thisCloseTabLink = $('<i class="icon-cancel-circled tabCloser">')
            .hover(
                function() {
                    $(this).addClass('icon-cancel-circled-outline');
                }, function() {
                    $(this).removeClass('icon-cancel-circled-outline');
                }
            );

        // Add the close button
        $activeTab.append($thisCloseTabLink);
    }

});