jquery 实现滑动条的简单验证

参考： blog.csdn.net/qq_42249896/article/details/81001877

 

另外还需要修复原来的 drag.js 里的两处 bug。

 

1 在 drag.js 的 dragOk(); 这句后面添加下面两句：

// 拖动成功后，将滑块置于最右侧
handler.css({'left': maxWidth});
drag_bg.css({'width': maxWidth});

这样可以保持滑块拖动成功后，滑块总是被置于最右侧。

效果：

2 如果需要自定义滑动条的宽度，需要在 drag.js 的
var handler = drag.find( '.handler' );
var drag_bg = drag.find( '.drag_bg' );
var text = drag.find( '.drag_text' );
这三句的后面添加下面几句，来修改滑动条的宽度

// 是否输入了滑动条的宽度参数
var newWidth = options.width;
var notHaveWidthParam = newWidth === null || newWidth === undefined;

// 根据输入的参数，修改滑动条的宽度
if(notHaveWidthParam !== true){
    this.css({'width': newWidth});
    text.css({'width': newWidth});
}

然后在页面的 js 里加上 width 参数来自定义滑动条的宽度

<script type="text/javascript">
$(function(){
    $('#drag').drag({'width': '200px'});   // 自义滑动条的宽度
});
</script>