switch開關(guān)的實現(xiàn)

實現(xiàn)效果
實現(xiàn)效果

實現(xiàn)方式:

  1. 創(chuàng)建checkbox元素: <input type="checkbox" checked="" />
  2. 將checkbox樣式改為switch開關(guān)樣式,并加上綁定代碼:
<script type="text/javascript">
   require(['bootstrap.switch','util'], function($,util){
      $(function(){
     $(':checkbox').bootstrapSwitch();
     $(':checkbox').on('switchChange.bootstrapSwitch', function(e, state){
            console.log($(this).bootstrapSwitch('state'));  //打印當(dāng)前switch狀態(tài)
     });
      });
   });
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,973評論 19 139
  • /Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home...
    光劍書架上的書閱讀 3,943評論 2 8
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,860評論 1 18
  • 圖片發(fā)自簡書App 日歷, 掛在墻上, 像心里的一幅畫, 每天都是數(shù)的變幻, 輕數(shù)細(xì)捻中, 溜走的是回憶, 寫下的...
    潔語落筆尖閱讀 226評論 1 1