pc 移动端 js 滑块验证 自适应插件(不支持IE)

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

 3505  12  查看评论 (0)
分享到微信朋友圈
X
pc 移动端 js 滑块验证 自适应插件(不支持IE) ie兼容12

更新时间:2023-03-05 22:27:46

1、介绍

pc 移动端 -js 滑块验证 自适应插件; 自适应自动跳转样式,修改样式,圆角,边框,背景,颜色等

2、使用说明

引入: 

<script src="./js/sliderVerif.js"></script>

使用:

#box 插入位置的类名或id   {} 参数

var box = new sliderVerif("#box", {
    sliderText: "请按住滑块拖动",// 滑块提示文字
    succText: "验证通过",// 滑块完成提示文字
    sliderTextColor: "#666",//滑块提示文字颜色
    succTextColor: "#fff",//滑块完成提示文字颜色
    fontSize: 1,//字体大小  数字/字符串 字符串可以带单位 ,数字默认单位 em
    /**
     * 盒子 样式
     */
    boxStyle: {
        bg: "#e5e5e5",//背景颜色  颜色名称,RGB,RGBA,16进制
        barBg: "#5abc3c",// 进度条 背景颜色   颜色名称,RGB,RGBA,16进制
        radius: 0,//按钮圆角   数字/字符串  字符串可以带单位,同 border-radius
        borderWidth: 0,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#333",//边框颜色  颜色名称,RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    /**
     * 按钮 样式
     */
    btnStyle: {
        color: "#333",// 按钮 图标颜色   颜色名称,RGB,RGBA,16进制
        succColor: "#5abc3c",//滑动完成 图标颜色    颜色名称,RGB,RGBA,16进制
        bg: "#fff",//按钮背景颜色    颜色名称,RGB,RGBA,16进制
        succBg: "#fff",//滑动完成 背景颜色    颜色名称,RGB,RGBA,16进制
        radius: null,//按钮圆角   数字/字符串  字符串可以带单位,同 border-radius,不是数字和字符串,使用 boxStyle.radius
        borderWidth: 1,//边框宽度  数字/字符串 字符串可以带单位
        borderColor: "#e5e5e5",//边框颜色   颜色名称,RGB,RGBA,16进制
        borderStyle: "solid",//边框样式   同 css border-style 属性值
    },
    // 是否监听屏幕变化,自动修改响应式样式
    isResizeAutoStyle: false,
    //返回状态方法
    getCompleteState: (res) => {
        console.log(res);
    },
});

3、参数说明

参数名参数作用参数类型默认值描述/注意
sliderText滑块提示文字String请按住滑块拖动-
succText滑动完成提示文字String验证通过-
sliderTextColor滑块提示文字颜色String#666颜色名称,RGB,RGBA,16进制
succTextColor滑动完成提示文字颜色String#fff颜色名称,RGB,RGBA,16进制
fontSize提示文字字体大小Number/String1数字:字体单位em,字符串:随便你写什么单位都行
isResizeAutoStyle是否监听屏幕变化,自动修改响应式样式Booleanfalse监听屏幕变化,100ms ,响应式修改样式



盒子属性  boxStyle:{}
boxStyle.bg滑块背景颜色String#e5e5e5颜色名称,RGB,RGBA,16进制
boxStyle.barBg滑块进度背景颜色String#5abc3c颜色名称,RGB,RGBA,16进制
boxStyle.radius滑块盒子 圆角Number/String0数字:单位px,字符串:同 css border-radius
boxStyle.borderWidth滑块盒子 边框宽度Number/String0数字:单位px
boxStyle.borderColor滑块盒子 边框颜色String#333颜色名称,RGB,RGBA,16进制
boxStyle.borderStyle滑块盒子 边框样式Stringsolid同 css border-style 属性值



按钮样式  btnStyle:{}
btnStyle.color按钮图标颜色String#333颜色名称,RGB,RGBA,16进制
btnStyle.succColor滑动完成按钮图标颜色String#5abc3c颜色名称,RGB,RGBA,16进制
btnStyle.bg按钮背景颜色String#fff颜色名称,RGB,RGBA,16进制
btnStyle.succBg滑动完成按钮背景颜色String#fff颜色名称,RGB,RGBA,16进制
btnStyle.radius按钮圆角Number/Stringnull同 boxStyle.radius,不填写默认使用 boxStyle.radius
btnStyle.borderWidth按钮 边框宽度Number/String0数字:单位px
btnStyle.borderColor按钮 边框颜色String#333颜色名称,RGB,RGBA,16进制
btnStyle.borderStyle按钮 边框样式Stringsolid同 css border-style 属性值



getCompleteState:(res)=>{}
getCompleteState滑动完成返回方法functionfunction滑动完成,返回方法,res返回值  true/false

4、可用方法

  • 重置方法 : reset()

  • 更新样式方法 : upStyle() ,屏幕变化,会导致px样式无法完美还原样式,需要 这方法,重新设置px

列子

 var box = new sliderVerif("#box");
 box.reset();
 box.upStyle()

相关插件-验证,拖和放

Modern Fms 表单验证插件

Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 13561  181

JQUERY form表单验证

easy将是一个系列的库 目前只有一个文件easyform,包含3个类,easytip : tooltip控件,支持灵活的配置。easyinput : 单个input验证控件easyform :表单验证控件
  验证
 185431  654

jquery多功能表单验证

基于jquery封装的表单验证插件
  验证
 40502  361

点击按钮获取验证码倒计时

这是一个基于jQuery的点击按钮获取验证码倒计时插件,这个插件在我们的开发中非常常用
  验证
 48432  399

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

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复