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”文字，而“编辑”/“X”主要位于标签下方（显示较低的Z-Index）

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

Answer 1

我认为，这个问题源于这样一个事实：标签<li>然后<a>里面是浮动元素，就像在jQueryUI CSS中设计的那样。

技术部分最好用这句话加以总结（来自http://css.maxdesign.com.au/floatutorial/introduction.htm）

如果未设置宽度，则结果可能无法预测。从理论上讲，具有未定义宽度的浮动元素应缩小到其中最宽的元素。这可能是单词，句子甚至是单个字符 - 结果可能因浏览器而异。

所以红色<div>缩小到最宽的元素 - <a>。 IE和Firefox / Chrome只是表现不同，只是他们对规范的解释。说实话，Firefox和Chrome很相似，而且我在这里与Mozilla / Google有long history of float bugs这一事实虽然可以理解IE在这种情况下表现得更好。

您只需在红色<div>上设置宽度即可解决问题。然而，标记也可能更清晰，例如：

<li style="background-color:red;width:150px">
    <a href="#tabs-1">Tab One</a>
    <div id="editTab-1" style="text-align:right;margin-right:3px">edit
        <p id="delTab-1">X</p>
    </div>
</li>

给出相同的结果。

Answer 2

我不确定这是否是你想要的，因为我没有在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 的

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

2 个答案: