web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
选择框
可将radio按钮和checkbox转换为开关按钮的jQuery插件
分类:
选择框
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
该滑动开关按钮插件需要浏览器支持CSS3 transition属性和transform属性,jQuery版本要求大于1.7.0。 使用该滑动开关按钮插件需要引入jQuery(版本>1.7+),rcswitcher.min.js和rcswitcher.min.css文件。 ```html
``` ##### HTML结构 该l滑动开关按钮插件的HTML结构使用label和input的组合。 ```html
level 1
Access CP
``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滑动开关按钮插件。 ```html $('input[type=checkbox]').rcSwitcher(); ``` ##### 配置参数 ```html $('input[type=checkbox]').rcSwitcher({ // 默认值 // 描述 theme: 'flat', // light 滑动开关按钮的主题:'flat, light, dark, modern' width: 80, // 56 in 'px' height: 26, // 22 blobOffset: 0, // 2 reverse: true, // false 颠倒开关顺序 onText: 'YES', // 'ON' ON状态时的文本 offText: 'NO', // 'OFF' OFF状态时的文本 inputs: true, // false 显示相应的inputs autoFontSize: true, // false 根据滑动开关按钮的高度自动调整字体大小 autoStick: true // false 自动放置在父元素中 }); ``` 配置参数也可以作为data属性写在HTML标签中。例如:data-ontext=""和data-offtext=""分别相当于onText和offText属性。 ```html
``` ##### 事件 ```html $(':radio').rcSwitcher().on({ 'turnon.rcSwitcher': function( e, dataObj ){ // to do on turning on a switch // dataObj.$input current input jq object // dataObj.$switcher current switch jq object // dataObj.components.$toggler swich toggler jq object // dataObj.components.$on switch on jq object // dataObj.components.$off switch off jq object // dataObj.components.$blob switch blob jq object }, 'turnoff.rcSwitcher': function( e, dataObj ){ // to do on turning off a switch }, 'change.rcSwitcher': function( e, dataObj, changeType ){ // to do on turning on or off a switch // changeType is 'turnon' || 'turnoff' } }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告