Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程

一、使用方法


    

二、Html结构

 

三、初始化插件
$('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属性。


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

    }
 
});

KeyMob移动广告联盟是一家以精准的移动营销为目的的移动广告营销联盟,致力于为广告主提供精准的移动营销和应用推广服务,为应用开发者创造更高和优秀的广告收益。

你可能感兴趣的:(Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程)