jquery-ui - jQuery UI 选项卡上的多个 HTML 元素

Question

我正在使用 jQueryUI 选项卡，并且需要向每个选项卡添加 UI 元素，以允许用户编辑有关选项卡的信息或删除选项卡。

我在 <li> 上使用的标记对于给定的选项卡，如下所示:

<li>
    <div style="background-color:Red;"> <-- Red to see what's happening -->
        <a href="#tabs-1"><span>Tab One</span></a>
        <div style="text-align:right; margin-right:3px;">
            <div><span id="editTab-1">edit</span></div>
            <div><span id="delTab-1">X</span></div>
        </div>            
    </div>
</li>

这就像我在 IE 中所希望的那样呈现

 ______________________________
|                          Edit|
|      Tab One                 |
|___________________________X__|

但它无法在 Chrome 或 FireFox 中正确呈现(该选项卡的宽度仅足以容纳“Tab One”文本，而“Edit”/“X”主要位于选项卡“下方”(显然较低的 Z-Index)。

实现我的目标的兼容方式是什么？

Answer 1

我不确定这是否是你想要的，因为我没有在 IE 中测试过，但这适用于 Chrome 和 FF:

<div id="tabs">
    <ul style="cursor:pointer">    
        <li>
            <a href="#tabs-1">
                <div style="float: left; margin-right: 20px;">Tab One</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-1">edit</div>
                    <div id="delTab-1">X</div>
                </div>  
            </a>
        </li>   
        <li>
            <a href="#tabs-2">
                <div style="float: left; margin-right: 20px;">Tab Two</div>
                <div style="float: right; text-align:right;">
                    <div id="editTab-2">edit</div>
                    <div id="delTab-2">X</div>
                </div>  
            </a>
        </li>   
    </ul>        

    <div id="tabs-1" class="tabPane">Tab One Content</div>  
    <div id="tabs-2" class="tabPane">Tab Two Content</div>    
</div>  

See the working jsFiddle

如果要动态处理点击，可以使用:

var $tabs = $("#tabs").tabs();

$tabs.find("a div[id]").on("click", function() {

    var id = $(this).attr("id"),
        idTab = parseInt(id.substring(id.length - 1)),            
        isEdit = id.indexOf("edit") > -1,
        isDelete = id.indexOf("del") > -1,        
        index = $tabs.tabs('option', 'selected');

    if (index + 1 === idTab) {
        if (isEdit) { 
            console.log("Edit Tab " + (index+1)); 
            //however you want to edit here
        }

        if (isDelete) { 
            console.log("Delete Tab " + (index+1)); 
            $tabs.tabs("remove", index);
        }
    }

}).css("cursor", "pointer");​

See the working jsFiddle