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 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php 购物车完整实现代码
2014/06/05 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php实现的日历程序
2015/06/18 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python实现简单flappy bird
2018/12/24 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
审核会计岗位职责
2013/11/08 职场文书
数学教学随笔感言
2014/02/17 职场文书
作风建设年活动总结
2014/08/27 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书