移动端滑块验证

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

 6004  47  查看评论 (9)
移动端滑块验证 ie兼容11

注:请在移动端查看,或者开启浏览器模拟查看效果

更新时间:2018/2/24 下午8:59:17

更新说明:修复事件


更新时间:2018/1/22 下午1:37:23

更新说明:修复宽高设置问题


使用方法

1.引入样式和脚本

<link rel="stylesheet" href="css/ft-slider.css" />
<script src="js/ft-slider.min.js" type="text/javascript" charset="utf-8"></script>

2.初始化插件

var slider = new FtSlider({
    id: "slider",
    callback: function(res) {
        // res返回验证结果
    }
});

 配置参数

OptionTypeDefaultDescription
widthnumber280宽度
heightnumber34高度
textMsgstring请按住滑块,拖动到最右边|提示文字
successMsgstring验证成功验证成功提示文字
callbackfunction回调函数参数是验证结果

 方法

MethodDescriptionExample
restore状态还原slider.restore();
相关插件-拖和放,验证

可拖拽图片文本框(类似QQ发送消息框)

支持拖拽图片,并且将图片转换为base64,兼容IE8以上所有浏览器
  拖和放
 7981  15

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 41362  130

jquery拖拽插件

jquery拖拽排序插件,和别的拖拽插件不同这个一次只能拖动到临近的位置。
  拖和放
 6117  22

jQuery自由拖曳照片插件

可自由拖曳照片,并展现文字和内容
  拖和放
 4081  27

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

    平生心愿 0
    2018/4/16 14:28:49
    - Xiong 0
    2018/2/24 14:27:57
    成功以后再点一下拉环会退回去,能不能修改一下
        hellolxc0
        2018/2/25 9:14:46
        已修复该问题
    回复
    久念┾ 0
    2018/2/7 9:53:43
    您好,请问这个怎么在vue里面使用
    回复
    vhvcb 0
    2018/1/29 12:19:07
    不明觉厉 0
    2018/1/22 13:30:03

    问题已经解决,谢谢楼主分享

        我的微博201760
        2018/4/13 15:19:59
        请问移动端宽度适配你是怎么解决的呀 求分享
        我的微博201760
        2018/4/13 15:21:07
        已解决
    回复
    不明觉厉 0
    2018/1/22 11:58:41
    这怎么移动端宽度适配的呢 回复
取消回复