2

我正在使用 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）。

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

4

2 回答 2

2

我认为，问题源于选项卡<li>和<a>内部是浮动元素，正如 jQueryUI CSS 中所设计的那样。

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

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

所以红色<div>正在缩小到最宽的元素 - <a>. IE 和 Firefox/Chrome 只是行为不同，只是它们对规范的解释。老实说，事实上 Firefox 和 Chrome 是相似的，而 IE 长期以来一直存在浮动错误，我在这里支持 Mozilla/Google，尽管可以理解 IE 在这种情况下似乎表现得更好。

您可以通过简单地在 red 上设置宽度来解决问题<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>

给出相同的结果。

于 2012-04-06T20:42:01.773 回答
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>

查看工作中的 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");​

查看工作中的 jsFiddle

于 2012-04-06T21:42:12.390 回答