Sliding_Validation_Gu一款基于jquery的滑块验证插件-BFW插件库

Sliding_Validation_Gu一款基于jquery的滑块验证插件

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置参数

SlidingValidation.create(参数1, 参数2, 参数3);

/**
*参数1 —— 在传入的元素的结尾插入-obj
*/

/**
*参数2 —— 修改滑动验证的样式-{"key":"value"}
* position: "relative", 滑动验证的定位
top: "0px", 滑动验证的top值
left: "0px", 滑动验证的left值
slide_block_wrapper_width: "300px", 滑动验证的宽度
slide_block_wrapper_height: "40px", 滑动验证的高度
slide_block_width: "50px", 滑动块的宽度
slide_block_height: "100%", 滑动块的高度
margin: "0px 0px 0px 0px", 滑动验证的marigin
slider_wrapper_zindex: 10000, 滑动验证的z-index
slider_wrapper_bg: "#e8e8e8", 滑动验证的背景颜色
slider_bg: "rgb(255,255,255)", 滑块的背景颜色
progress_bg: "rgb(255,184,0)", 滑动进度的背景颜色
default_text: "请向右滑动滑块", 滑动区域的文字
default_text_color: "black", 滑动文字的默认颜色
success_text_color: "white", 成功后滑动文字的颜色
default_text_font_size: "12px", 滑动文字的文字大小
success_show_text: "验证成功", 验证成功后滑动文字的内容
success_slider_wrapper_bg: "rgb(76,175,80)", 滑动成功后滑动进度的背景颜色
success_url_icon: "sliding_block_image/ok.png", 滑动成功后滑块上面的图片 url地址
default_url_icon: "sliding_block_image/right-arrow.png", 默认滑块上面的url地址
box_shadow: "1px 1px 5px rgba(0,0,0,0.2)", 滑动验证的阴影
border: "1px solid #ccc" 滑块的border
*/

/**
*参数3 —— 滑动验证成功之后执行的方法-function(){}
*/

完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["Sliding_Validation_Gu"], function() {
                var sliding_validation = SlidingValidation.create($('#slider'), {}, function() {alert("验证成功");});

            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div id="slider">

    </div>
</body>
</html>