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 相关文章推荐
让元素在网页中可拖动示例代码
Aug 13 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
javascript实现密码验证
Nov 10 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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做推送服务端实现ios消息推送
2013/07/01 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python实现BackPropagation算法
2017/12/14 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
会计电算化毕业生自荐信
2014/03/03 职场文书
公司委托书怎么写
2014/08/02 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
总结Python使用过程中的bug
2021/06/18 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫