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元素

回答

相關問題