Question

我正在使用official sortable jQuery UI tabs example作为界面，用户可以根据特定订单移动标签。

现在我需要一个按钮来“保存”此用户在数组中创建的特定顺序。我该怎么做？

Answer 1

你的意思是这样吗？每次更改后，此脚本都会返回选项卡的顺序。

＆＃13;

$(function () {
    $("#tabs").tabs().find("ul").sortable({
        axis : "x",
        update: function (e, ui) {
             var tabsArray = [];
             $("#tabs > ul > li > a").each(function(){
               tabsArray.push(this.id);
             });
             alert(tabsArray);
        }
    });            
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<div id="tabs">
  <ul>
    <li id="li-1"><a id="Tab 1" href="#tabs-1">Tab 1</a></li>
    <li id="li-2"><a id="Tab 2" href="#tabs-2">Tab 2</a></li>
    <li id="li-3"><a id="Tab 3" href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div id="tabs-2">
    <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
  </div>
  <div id="tabs-3">
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p>
  </div>
</div>

＆＃13;

如何获得手动排序的jQuery选项卡的顺序？

1 个答案: