Html5添加原生radio按鈕和checkbox複選框轉換爲很是好看的滑動開關按鈕的插件教程

1、使用方法
<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>    

2、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">  

3、初始化插件
$('input[type=checkbox]').rcSwitcher();   
               
4、配置參數
$('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" />

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

    }
 
});

KeyMob移動廣告聯盟是一家以精準的移動營銷爲目的的移動廣告營銷聯盟,致力於爲廣告主提供精準的移動營銷和應用推廣服務,爲應用開發者創造更高和優秀的廣告收益。javascript

相關文章
相關標籤/搜索