具有多个句柄的JQuery UI Slider:如何阻止句柄交叉? [英] JQuery UI Slider with Multiple handles: How to stop the handles from crossing?

问题描述

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

I'm developing a quick solution that uses a Slider with multiple handles to define widths for a dynamic layout.

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

I've attempted to use both ExtJS3 and the latest JQuery UI.

在ExtJS中，您可以约束句柄，以免彼此交叉，这是我需要的UI的一种非常直观的方法，但是出于某些原因，我宁愿不将ExtJS用于一个岛".大量的JQuery.

In ExtJS, you can constrain the handles so the don't cross over each other, and it's quite an intuitive approach to the UI I need, however there are reasons why I would rather not use ExtJS for one 'island' in a sea of JQuery.

那么，有人知道机密属性，还是一些代码会约束JQuery滑块中的多个句柄?

So, does anyone know of a secret attribute, or a bit of code that constrains multiple handles in the JQuery slider ?

为清楚起见:如果您有一个带有2个手柄的滑块，一个在40个手柄上，另一个在60个手柄上；约束将阻止您将60的手柄向下拖动到20，而无需先移动40的手柄.

For clarity: if you have a slider with 2 handles, one at 40 and one at 60; the constraint would stop you dragging the handle at 60 down to 20, without first moving the 40 one.

推荐答案

在slide事件中，您可以通过检查滑块值并返回true来允许滑动，或者通过false来防止滑动来限制手柄移动(请参阅jQuery UI文档)了解更多信息)

In the slide event you can constrain the handle movement by checking the slider values and returning true to allow the slide or false to prevent it (see the jQuery UI docs for more information)

这篇关于具有多个句柄的JQuery UI Slider:如何阻止句柄交叉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！