Question

我正在开发一种快速解决方案，它使用带有多个手柄的Slider来定义动态布局的宽度。

我试图同时使用ExtJS3和最新的JQuery UI。

在ExtJS中，你可以约束句柄，这样就不会相互交叉，这对我需要的UI来说是一种非常直观的方法，但是有理由我不想在一个'岛'中使用ExtJS JQuery的海洋。

那么，有没有人知道一个秘密属性，或者一些限制JQuery滑块中多个句柄的代码？

为清晰起见：如果你有一个带2个手柄的滑块，一个在40，一个在60;约束将阻止您将手柄在60下降到20，而不先移动40手柄。

Answer 1

在幻灯片事件中，您可以通过检查滑块值来约束手柄移动，并返回true以允许幻灯片或false来阻止它（有关更多信息，请参阅jQuery UI文档）

Answer 2

您使用的是什么代码用于Jquery滑块？查看range slider demo，它有两个句柄，无法跨越它们。

Answer 3

正如@madcapnmckay指出的那样，如果你有一个带有两个手柄的滑块和选项中的range: true，则手柄不能相互拖过。

我遇到的问题是它没有正确约束但事实证明我有一个字符串'true'而不是一个布尔true

Answer 4

检查此解决方案：

slide : function( event, ui ) {
        //Actual Handle Selected
        var handleIndex = $(ui.handle).index()-1;

        var diffA, diffB;

        //Check with right handles
        if(handleIndex > 0)
            diffA = ui.values[handleIndex] - ui.values[handleIndex-1];

        //Check with left handles
        if(handleIndex < ui.values.length-1)
            diffB = ui.values[handleIndex+1] - ui.values[handleIndex];

        if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
            return false;
        }
   }

Answer 5

我在这里参加聚会有点晚了，但我想分享一下我用这种最简洁但又可读的方式。从技术上讲，它与@ tototresde的答案非常相似。

<body>
  <div id="header">
  </div>
  <div id="main">
    <div id="panel">
      <div id="panel-top">
        Top Panel
      </div>
      <div id="panel-bottom-overflow">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
  </div>
</body>

带有多个句柄的JQuery UI Slider：如何阻止句柄交叉？

5 个答案: