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 相关文章推荐
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
js实现图片懒加载效果
Jul 17 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
YII路径的用法总结
2014/07/09 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python continue继续循环用法总结
2018/06/10 Python
python3中eval函数用法使用简介
2019/08/02 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
会计专业的自荐信
2013/12/12 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
药剂专业自荐书
2014/06/20 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
民事上诉状范文
2015/05/22 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python