欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery 实现滑动条的简单验证

程序员文章站 2024-03-21 11:13:46
...

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

 

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

 

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

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

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

效果:

jquery 实现滑动条的简单验证


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>