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


Posted in Javascript onAugust 22, 2017

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

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

<!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开关组件使用方法详解

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

Javascript 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
微信小程序后端实现授权登录
Feb 24 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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
You might like
如何做到多笔资料的同步
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
javascript事件模型代码
2007/07/01 Javascript
JObj预览一个JS的框架
2008/03/13 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
Vue.use源码分析
2017/04/22 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python科学计算之narray对象用法
2019/11/25 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js