Question

我正在尝试从基本结构创建一个简单的ui标签。

我有四个标签

苹果
橙
芒果
更多

当我拖动Orange和More时，他们的身高会增加并且当摔跤恢复正常时。 Apple和Mango元素不会发生这种情况。

enter image description here

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

好吧，我所建议的是一种黑客攻击，但由于它是一个相当直接的问题，我们手中没有多少，我的想法是设置 min-width > li #tabs 中的元素大于当前宽度，大约 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 2

为需要的人发布最终代码..

更改为<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
});

Answer 3

我遇到了这个问题，我认为这是最好的解决方法。

这里的问题是，当你对li元素进行排序和排序时，jquery ui会添加自己的排序方式＆＃39;对元素。当你将li元素放置到位时，它会恢复原来的样式。
排序样式向下舍入宽度css属性，因此如果您的宽度为70.35px，则将其舍入为70px，因为宽度缩小，所以任何元素或文本都会换行到新行。

修复：排序开始时，添加额外的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);
      }
    });
  });

Jquery ui tabs：可排序的weired元素高度

3 个答案: