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 相关文章推荐
解决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
You might like
3.从实例开始
2006/10/09 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python中自带的三个装饰器的实现
2019/11/08 Python
keras之权重初始化方式
2020/05/21 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
python内置进制转换函数的操作
2021/06/02 Python
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript