编程 Javascript

bootstrap switch开关组件使用方法详解

Posted in Javascript onAugust 22, 2017

bootstrap中文网上有这么一个bootstrap-switch组件，很实用，看demo学习并记录一下。

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset=utf-8> 
    <meta name=description content=""> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> 
    <link href="css/bootstrap-switch.min.css" rel="external nofollow" rel="stylesheet" /> 
     <script src="js/jquery/jquery.1.11.3.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    <script src="js/bootstrap-switch.min.js"></script> 
 
  </head> 
  <body> 
     <input name="status" type="checkbox" data-size="small">  
     <script type="text/javascript"> 
      $('[name="status"]').bootstrapSwitch({  
      onText:"启动",  
      offText:"停止",  
      onColor:"success",  
      offColor:"info",  
      size:"small",  
    onSwitchChange:function(event,state){  
      if(state==true){  
        alert('已打开');  
      }else{  
        alert('已关闭');  
      }  
    }  
 
       })  
 
    </script> 
  </body> 
</html>

Bootstrap-Switch源码地址：https://github.com/nostalgiaz/bootstrap-switch

Bootstrap-Switch文档以及Demo：http://www.bootstrap-switch.org/examples.html

常用的属性

size：开关大小。可选值有'mini', 'small', 'normal', 'large'
onColor：开关中开按钮的颜色。可选值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor：开关中关按钮的颜色。可选值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText：开关中开按钮的文本，默认是“ON”。
offText：开关中关按钮的文本，默认是“OFF”。
onInit：初始化组件的事件。
onSwitchChange：开关变化时的事件。

bootstrap switch开关组件使用方法详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap switch开关组件使用方法详解

- Author -

javanbme

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

解决iframe的frameborder在chrome/ff/ie下的差异

Aug 12 Javascript

js iframe跨域访问(同主域/非同主域)分别深入介绍

Jan 24 Javascript

深入理解JavaScript系列（47）：对象创建模式（上篇）

Mar 04 Javascript

jquery实现鼠标拖拽滑动效果来选择数字的方法

May 04 Javascript

javascript中日期函数new Date()的浏览器兼容性问题

Sep 05 Javascript

JQuery中Ajax()的data参数类型实例分析

Dec 15 Javascript

js操作cookie保存浏览记录的方法

Dec 25 Javascript

vue权限路由实现的方法示例总结

Jul 29 Javascript

node.js的Express服务器基本使用教程

Jan 09 Javascript

如何在JavaScript中优雅的提取循环内数据详解

Mar 04 Javascript

浅谈Node新版本13.2.0正式支持ES Modules特性

Nov 25 Javascript

ng-alain的sf如何自定义部件的流程

Jun 12 Javascript

Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法

Aug 22 #Javascript

jQuery实现广告条滚动效果

Aug 22 #jQuery

基于jQuery的表单填充实例

Aug 22 #jQuery

JS倒计时实例_天时分秒

Aug 22 #Javascript

老生常谈javascript的面向对象思想

Aug 22 #Javascript

使用jQuery实现简单的tab框实例

Aug 22 #jQuery

基于node.js之调试器详解

Aug 22 #Javascript