论坛风格切换
您好,欢迎光临本站!   登录 注册新用户
  • 1980阅读
  • 0回复

[分享源码]Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程 [复制链接]

上一主题 下一主题
 
发帖
113
黑豆
565
威望
565
贡献值
0
交易币
0
红豆
0
只看楼主 倒序阅读 0 发表于: 2016-01-11
一、使用方法
<link href='dist/rcswitcher.min.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/rcswitcher.min.js"></script>    

二、Html结构
<label >level 1 </label><input type="radio" name="level" value="level1" >
<label >Access CP</label><input type="checkbox" name="access_cp" value="access_cp">  

三、初始化插件
$('input[type=checkbox]').rcSwitcher();  
              
四、配置参数
$('input[type=checkbox]').rcSwitcher({
theme: 'flat',      
width: 80,                      
height: 26,            
blobOffset: 0,        
reverse: true,        
onText: 'YES',                      
offText: 'NO',        
inputs: true,          
autoFontSize: true,    
autoStick: true        
});

配置参数也可以作为data属性写在HTML标签中。例如:data-ontext=""和data-offtext=""分别相当于onText和offText属性。
<input type="checkbox" name="" value="" data-ontext="YES" data-offtext="NO" />

五、事件
$(':radio').rcSwitcher().on({
'turnon.rcSwitcher': function(e, dataObj ){
},
'turnoff.rcSwitcher': function( e, dataObj ){
},
change.rcSwitcher': function( e, dataObj, changeType ){

    }

});

KeyMob移动广告联盟是一家以精准的移动营销为目的的移动广告营销联盟,致力于为广告主提供精准的移动营销和应用推广服务,为应用开发者创造更高和优秀的广告收益。
快速回复
限100 字节
 
上一个 下一个