移动端滑块验证

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

 39629  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拖动滑块选择数字插件sider.jquery.js

通过拖动滑块快速输入数值,并可以设置常用的数值快速选择
  拖和放
 27464  313

jquery div拖拽换位合并拆分(原创)

拖动div块,两个div距离足够近时合并,远一点时换位。右键点击已合并的div,可显示可选择拆分数组,点击要拆分的数据,即可拆分。再次右击已合并的div即可收起可选择的拆分数据组
  拖和放
 19936  226

JS表格列自由拖拽排序特效代码

该插件为纯js代码,实现表格列的自由拖拽,以及按列排序
  拖和放
 39575  404

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38054  373

讨论这个项目(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
        已解决
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复