移动端滑块验证

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

移动端滑块验证 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以上所有浏览器
  拖和放
 8554  15

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 32205  238

htmlt拖放

html5拖放排序
  拖和放
 8439  32

jQuery双击拖拽图片

jQuery鼠标双击事件拖拽图片
  拖和放
 8398  17

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

    pkmiss 0
    2018/5/9 18:38:57
    平生心愿 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
    这怎么移动端宽度适配的呢 回复
取消回复