使用jQuery-UI 1.7,我已经集成了滑块.一切都正常,但拖动时滑块的手柄相互重叠.我如何防止这种情况.
你可以在这里看到我的ui滑块
默认视图:
重叠视图:
解决方法
您可以通过检测幻灯片事件处理程序中的重叠并返回false来防止幻灯片发生,从而实现此目的.例:
$( "#slider-range" ).slider({ range: true,min: 0,max: 500,values: [ 75,300 ],slide: function( event,ui ) { if ( ( ui.values[ 0 ] + 20 ) >= ui.values[ 1 ] ) { return false; } } });
body { padding: 50px; }
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <div id="slider-range"></div>
注意,在这个例子中,20的值根据句柄的宽度是简单的硬编码.根据您的用例,您必须将其改为任何有用的东西.