Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程...
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
一、使用方法
<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結(jié)構(gòu)
<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();? ?
????????????? ?
四、配置參數(shù)
$('input[type=checkbox]').rcSwitcher({
theme: 'flat',????? ?
width: 80,????????????????????? ?
height: 26,??????????? ?
blobOffset: 0,??????? ?
reverse: true,??????? ?
onText: 'YES',????????????????????? ?
offText: 'NO',??????? ?
inputs: true,????????? ?
autoFontSize: true,??? ?
autoStick: true??????? ?
});
配置參數(shù)也可以作為data屬性寫在HTML標(biāo)簽中。例如:data-ontext=""和data-offtext=""分別相當(dāng)于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移動(dòng)廣告聯(lián)盟是一家以精準(zhǔn)的移動(dòng)營銷為目的的移動(dòng)廣告營銷聯(lián)盟,致力于為廣告主提供精準(zhǔn)的移動(dòng)營銷和應(yīng)用推廣服務(wù),為應(yīng)用開發(fā)者創(chuàng)造更高和優(yōu)秀的廣告收益。
轉(zhuǎn)載于:https://my.oschina.net/u/2505907/blog/600771
總結(jié)
以上是生活随笔為你收集整理的Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 要成为一个 Java 架构师得学习哪些知
- 下一篇: treeSet中对象的比较