switch開關的實現

實現效果
實現效果

實現方式:

  1. 創建checkbox元素: <input type="checkbox" checked="" />
  2. 將checkbox樣式改為switch開關樣式,并加上綁定代碼:
<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'));  //打印當前switch狀態
     });
      });
   });
</script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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