jquery-ui – 如何防止jQuery UI滑块处理重叠?

前端之家收集整理的这篇文章主要介绍了jquery-ui – 如何防止jQuery UI滑块处理重叠?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用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的值根据句柄的宽度是简单的硬编码.根据您的用例,您必须将其改为任何有用的东西.

原文链接:https://www.f2er.com/jquery/176385.html

猜你在找的jQuery相关文章