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

我正在使用jQueryUI选项卡，并且需要将UI元素添加到每个允许用户编辑有关选项卡的信息的选项卡，或者删除选项卡。jQuery UI选项卡上的多个HTML元素

我在<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明显）。如何实现我的目标？

来源

2012-04-06 Eric J.

你能不能做一个简单的[的jsfiddle（http://jsFiddle.net）证明你的问题？ – 2012-04-06 19:29:56

Working on one ... – 2012-04-06 19:35:56

@Scott：这里有一个可用的jsFiddle。 HTTP：//的jsfiddle。net/ericjohannsen/WYXAB/ – 2012-04-06 19:45:31

我不知道如果这是你打算或没有，因为我还没有在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

来源

2012-04-06 21:42:12

也适用于IE浏览器，虽然选项卡比其他选项的显示效果要小一些。我现在正在研究这个问题。可能是由于我的页面上的其他CSS。 – 2012-04-06 21:56:48

我正在制定所选标签内部的编辑和X的单击细节。我尝试通过'$（“＃tabs”）绑定点击事件。tabs（{create：function（event，ui）{...}）}）;' – 2012-04-06 22:05:24

+1不依赖于设置宽度 – andyb 2012-04-06 22:06:12

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

技术部分可以最好用这句话（从http://css.maxdesign.com.au/floatutorial/introduction.htm）

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

所以红色的<div>是收缩到最宽的元素 - <a>。 IE和Firefox/Chrome的行为不同，只是他们对规范的解释。说实话，Firefox和Chrome是相似的，IE浏览器已经有了一个long history of float bugs我会在Mozilla/Google这边，尽管可以理解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>

给出了相同的结果。

来源

2012-04-06 20:42:01 andyb

设置固定宽度当然可以解决问题。您是否知道不需要预先选择宽度的解决方案？ – 2012-04-06 21:48:27

就像Scott的回答一样，你可以在''div id =“editTab-x”/>'上添加一个'float：right'并且移除宽度以得到相同的结果。 – andyb 2012-04-06 22:05:51

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

回答

相关问题