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 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
js原型链原理看图说明
Jul 07 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue如何使用async、await实现同步请求
Dec 09 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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+ajax实现无刷新数据分页的办法
2015/11/02 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
微信自定义分享php代码分析
2016/11/24 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
全球精选男装和家居用品:Article
2020/04/13 全球购物
车间主管岗位职责
2013/11/14 职场文书
室内拓展活动方案
2014/02/13 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
博士生专家推荐信
2015/03/25 职场文书
结婚司仪主持词
2015/06/29 职场文书
结婚幸福感言
2015/08/01 职场文书
公司员工培训管理制度
2015/08/04 职场文书
学习十八大的感悟
2015/08/11 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript