jQuery滑块验证插件(PC)

所属分类:输入-拖和放,验证

 7109  103  查看评论 (14)
jQuery滑块验证插件(PC) ie兼容6

使用方法

1.引入样式和脚步

<link rel="stylesheet" href="css/jquery.slider.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.slider.min.js"></script>

2.初始化插件

$("#slider2").slider({
    width: 340, // width
    height: 40, // height
    sliderBg: "rgb(134, 134, 131)", // 滑块背景颜色
    color: "#fff", // 文字颜色
    fontSize: 14, // 文字大小
    bgColor: "#33CC00", // 背景颜色
    textMsg: "按住滑块,拖拽验证", // 提示文字
    successMsg: "验证通过了哦", // 验证成功提示文字
    successColor: "red", // 滑块验证成功提示文字颜色
    time: 400, // 返回时间
    callback: function(result) { // 回调函数,true(成功),false(失败)
        $("#result2").text(result);
    }
});
相关插件-拖和放,验证

jQuery拖放插件Gridly

Gridly是一个JQuery插件,它能够拖动,删除和调整一个网格的大小。
  拖和放
 46534  89

vue2.0可拖拽,点击可滑动进度条

基于vue2.0实现的,鼠标可拖拽,点击可滑动的进度条,显示当前进度
  拖和放
 1496  10

jQuery九宫格拖拽效果

九宫格拖拽效果简单上手附带代码注释详解
  拖和放
 4363  26

鼠标轨迹跟随

鼠标轨迹跟随
  拖和放
 10501  35

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    露露 0
    2017/11/1 15:38:09

    手机不能用么?只能PC使用?

    回复
    拖拉机斯基 0
    2017/9/25 17:04:31
    Decade小肥佬 0
    2017/9/19 9:07:06
    很好用,就是滑块有点不灵敏 但是能兼容IE6、7真的超棒!!!
        hellolxc0
        2017/9/19 11:56:31

        感谢支持

    回复
    王彩霖, 0
    2017/8/25 23:45:31
    支持支持
        hellolxc0
        2017/8/26 9:32:37

        感谢支持^_^

    回复
    ymfever 0
    2017/8/25 11:30:18

    如何才能禁止拖动滑块。因为这个验证之前肯定要有表单验证嘛,如果上面的表单验证不通过,如何才能使用户拖不动滑块

        hellolxc1
        2017/8/25 12:14:36
        没有封装禁用功能,你可以在表单验证通过后在初始化滑块插件;其实用户在表单未通过拖拽也是一样的,你都是需要在所有验证通过才会发送请求,那禁不禁用不是一样嘛
        ymfever0
        2017/8/25 16:47:26

        因为产品要求 ,表单验证完成和滑块拖动成功之后,提交按钮才能点击。但是我试过,现在无论拖几次,只要不刷新页面的话,result只能返回一次,也就是说只能返回第一次拖动的结果。这个初始化也不能写在判断语句里面,因为页面一进来滑动模块就要加载的。我qq是378196683,方便加我qq交流一下嘛?

        hellolxc0
        2017/8/25 17:20:37
        滑块每次拖拽都会返回验证结果
        Decade小肥佬0
        2017/9/19 9:09:09

        /* 如果验证之后,一直不登录,一分钟后将初始化刷新验证 */

        setInterval(function() {

        $("#slider").load(location.href + "#slider>*", "");

        }, 60000);

    回复
    misaka_laobu 0
    2017/8/19 11:22:28

    不错,5个币。值

        hellolxc0
        2017/8/20 17:02:59
        感谢支持^_^
    回复
    学习jq 0
    2017/7/31 14:46:22
取消回复