我有一个 jQuery UI slider ,当用户尝试使用轨道滑动时我想禁用它。它应该仅在有人将 handle 拖动到某处时才起作用/启用。应禁用单击并尝试拖动滑动来移动 handle 。我不确定是否可以使用 unbind
或 mousedown
事件来完成此操作。
我注意到的问题是,我的句柄从 1 变为 100。当您移动句柄的开头时,它会显示使用 ui.value
。但是,如果您尝试超出 handle 并在 slider 轨道上滑动,ui.value
会重置其值。
所以,我想禁用非 handle 拖动。
最佳答案
这可以使用 2 行 css 代码来完成!
这是 HTML
<div class="SliderContainer"><div id="BGS0"></div></div>
这是JS
$('#BGS0').slider();
这是CSS
.SliderContainer {
pointer-events: none;
/* Other settings here */
}
.SliderContainer > .ui-slider .ui-slider-handle {
pointer-events: auto;
/* Other settings here */
}
注意:我使用 SliderContainer 类作为父 DIV,因为默认情况下此 DIV 内禁用任何指针事件。然后我仅为 slider handle 启用了指针事件。只有父 DIV 内的 slider 受此选项影响,因为我使用了 .SliderContainer > .ui-slider .ui-slider-handle
选择器。
关于jQuery UI slider - 禁用轨道上的滑动/启用 handle mousedown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10093156/