移动端滑块验证

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

 39178  353  查看评论 (15)
分享到微信朋友圈
X
移动端滑块验证 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();
相关插件-拖和放,验证

jQuery移动端手势滑动切换(原创)

仿探探应用首页,原生图片切换(个人原创)移动端
  拖和放
 30431  334

jquery 拖拽排序

jQuery图片列表拖拽排序布局插件
  拖和放
 30951  364

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 85250  473

jQuery拖动图片排列插件

本插件是基于dragst.js,拖拽排列图片的顺序,使用方法简单,兼容各大浏览器
  拖和放
 25553  316

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    番茄你个西红柿 0
    2021/7/13 15:42:02
    怎么在vue框架里面用
    回复
    最后一抹忧伤 0
    2019/11/20 15:32:20
    滑块滑动时如果在安卓手机上发现浏览器分页也跟着滑动怎么办 回复
    fudue 0
    2019/8/27 19:29:14
    丶IF YOU 0
    2018/7/5 12:56:54
    请问怎么用在pc端啊
        hellolxc0
        2018/7/5 16:35:27
        http://www.jq22.com/jquery-info14819
    回复
    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
        已解决
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复