Bootstrap开关(switch)控件学习笔记分享


Posted in Javascript onMay 30, 2016

bootstrap-switch插件是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展。

Bootstrap开关(switch)控件学习笔记分享

功能说明:

介绍chekbox与radio的两个表单的简单使用,其他更多的效果与功能可以浏览demo,点击按钮以滑动的方式进行on/off切换。

使用说明:

1.引入CSS与JS文件

<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        
<script src="static/js/bootstrap-switch.js"></script>

2.html内容添加

<div class="make-switch" data-on="info" data-off="success">
          <input type="checkbox" checked>
        </div>
        <div class="make-switch" data-on="success" data-off="warning">
          <input type="checkbox" checked>
        </div>
        <div class="make-switch" data-on="warning" data-off="danger">
          <input type="checkbox" checked>
        </div>
        <div class="make-switch" data-on="danger" data-off="default">
          <input type="checkbox" checked>
        </div>
        <div class="make-switch" data-on="default" data-off="primary">
          <input type="checkbox" checked>
        </div>

1). div完全是为了给checkbox添加式样。
2). input就很简单了,就是普通的标签。

3).make-switch:对使用插件的checkbox添加CSS样式。

4).data-on:为on状态时的CSS样式。

5).data-off:为off状态时的CSS样式。

3.radio单选框的使用:

<label for="option11">Option 1</label>
            <div class="make-switch radio2">
              <input id="option11" type="radio" name="radio2" value="option11">
            </div>
            <label for="option12">Option 2</label>
            <div class="make-switch radio2">
              <input id="option12" type="radio" name="radio2" value="option12" checked="checked">
            </div>
            <label for="option13">Option 3</label>
            <div class="make-switch radio2">
              <input id="option13" type="radio" name="radio2" value="option13">
            </div>

radio单选框的使用方法是相同的,因为单选框先中其中一个是其他状态都要改变,所以要添加相应的JS代码;

<script>
  $('.radio2').on('switch-change', function () {
    $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
  });
</script>

4.启动

$("div[class='switch']").each(function() {
  $this = $(this);
  var onColor = $this.attr("onColor");
  var offColor = $this.attr("offColor");
  var onText = $this.attr("onText");
  var offText = $this.attr("offText");
  var labelText = $this.attr("labelText");

  var $switch_input = $(" :only-child", $this);
  $switch_input.bootstrapSwitch({
    onColor : onColor,
    offColor : offColor,
    onText : onText,
    offText : offText,
    labelText : labelText
  });
});

1). 通过jquery获取所有的switch div,从而获取其属性onColor 、offColor 等等
2). 紧接着,获取div包含的子元素input。
3). 通过bootstrapSwitch方法对input进行加载。

这样我们就以简单的实现我们想要的开关按钮效果了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是关于Bootstrap开关(switch)控件的使用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
javaScript中的空值和假值
Dec 18 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
jquery获取复选框checkbox的值实现方法
May 30 #Javascript
JS在onclientclick里如何控制onclick的执行
May 30 #Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 #Javascript
js获取所有checkbox的值的简单实例
May 30 #Javascript
一览画面点击复选框后获取多个id值的方法
May 30 #Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python ip正则式
2009/05/07 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python的exec、eval使用分析
2017/12/11 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
公司薪酬管理制度
2014/01/31 职场文书
奖学金个人总结
2015/03/04 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
学者《孟子》名人名言
2019/08/09 职场文书