jquery - Jquery ui tabs:sortable weired element heights

Question

I am trying to create a simple ui tabs from basic structure.

I have four tabs

1. Apple
2. Orange
3. Mango
4. More

When I drag Orange and More their height increases and when dropped goes back to normal. This does not happen with Apple and Mango elements.

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Apple</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-2">Orange</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-3">Mango</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
        <li>
            <a href="#tabs-4">More</a> 
            <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
        </li>
    </ul>
    <div id="tabs-1"><p>Apple</p></div>
    <div id="tabs-2"><p>Orange</p></div>
    <div id="tabs-3"><p>Mango</p></div>
    <div id="tabs-4"><p>More</p></div>    
</div>

CSS:

 #tabs li .ui-icon-close {
     float: left;
     margin: 0.4em 0.2em 0 0;
     cursor: pointer;
 }

JS : JSFIDDLE

var tabs = $("#tabs").tabs();
// Make Tabs Sortable
tabs.find(".ui-tabs-nav").sortable({
    axis: "x",
    stop: function () {
        tabs.tabs("refresh");
    }
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    tabs.tabs("refresh");
});

Answer 1

この問題に遭遇しましたが、これが最善の解決策だと思います。

• ここでの問題は、li 要素を保持して並べ替えると、jquery ui が独自の「並べ替えスタイル」を要素に追加することです。li 要素を配置すると、元のスタイルに戻ります。
• 並べ替えスタイルは幅 css プロパティを切り捨てます。したがって、幅が 70.35 ピクセルの場合、70 ピクセルに丸められます。幅が縮小されるため、要素またはテキストは新しい行に折り返されます。

修正: 並べ替えの開始時に、1px 幅を追加します。並べ替えが終了すると、自動的に元の幅に戻ります。例を参照してください:

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
      axis: "x",
      start: function(event, ui) {
        ui.helper.width(ui.helper.width() + 1);
      }
    });
  });

Answer 2

わかりました、私が提案しているのは一種のハックですが、それは非常に単純な問題であるため、私たちの手にはあまりありません。アイデアは、#tabs内のli要素の最小幅を現在の幅より大きく設定することです。約3px。

理由:誰かが要素をドラッグしようとすると、 li要素の幅がjs によって設定され、最終的に UI の歪みが発生します。

ハック:次のスクリプトを使用します。

$(document).ready(function(){
 $('#tabs li').each(function(){
    var wd = (parseInt($(this).css('width').replace('px',''))+3)+'px';
    $(this).css('min-width',wd);
 });
});

jsfiddle

Answer 3

必要な人のために最終コードを投稿する..

<span>uiボタンに変更すると機能します..

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Apple</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-2">Orange</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-3">Mango</a> 
            <button>close</button>
        </li>
        <li>
            <a href="#tabs-4">More</a> 
            <button>close</button>
        </li>
    </ul>
    <div id="tabs-1"><p>Apple</p></div>
    <div id="tabs-2"><p>Orange</p></div>
    <div id="tabs-3"><p>Mango</p></div>
    <div id="tabs-4"><p>More</p></div>    
</div>

CSS:

body { font-size: 62.5%; }

#tabs li button {
 margin-top:8%;
    margin-right:2px;
 font-size: 55%;

 }

JS:

var tabs = $("#tabs").tabs();
// Make Tabs Sortable
tabs.find(".ui-tabs-nav").sortable({
    axis: "x",
    stop: function () {
        tabs.tabs("refresh");
    }
});
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    tabs.tabs("refresh");
});

$("button").button({
    icons: {
        primary: "ui-icon-close"
    },
    text: false
});