1

我想要一组标签。在每个选项卡标题中，都有一段文本和一个按钮，用于在单击时删除它所属的选项卡。在选项卡标题 ( <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>如果我的元素多于元素，jQueryUI .tabs() 是否有效<div>？如果没有，是否有明确的解决方法？

谢谢你的帮助。

4

2 回答 2

2

首先，“这行得通”的答案总是“试试看”。

其次，可以通过拦截和取消beforeActivate事件来伪造“空”标签。在取消您的事件处理程序之前，将适当地修改 DOM 以添加一个新选项卡并调用该refresh方法来更新 UI。

于 2013-08-13T21:50:35.273 回答
0

这是我所做的：我在活动选项卡上插入一个“关闭按钮”：

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

});
于 2017-11-09T16:06:22.377 回答