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>