Bootstrap基本插件学习笔记之按钮(21)


Posted in Javascript onDecember 08, 2016

前面已经介绍过Button的使用。通过button按钮,我们还能实现一些诸如按钮状态控制等形式的交互。

0x01 加载状态

添加data-loading-text=”Loading…”属性:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>按钮交互</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>按钮交互</h1>
 </div>
 <button id="btnLoad" type="button" class="btn btn-primary" data-loading-text="Loading...">
  加载状态
 </button>
 <script>
  $(function () {
   $("#btnLoad").click(function () {
    $(this).button('loading').delay(1000).queue(
      function () {
       $(this).button('reset');
       $(this).dequeue();
      }
    )
   })
  })
 </script>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之按钮(21)

$("#btnLoad").click(function () {
  $(this).button('loading').delay(1000).queue(
    function () {
     $(this).button('reset');
     $(this).dequeue();
    }
   )
})

loading状态持续1s后,将会执行reset,恢复原始状态。

0x02 复选框

设置data-toggle为”buttons”可以实现复选框按钮组的效果:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>复选框按钮组</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>复选框按钮组</h1>
 </div>
 <div class="btn-group" data-toggle="buttons">
  <button class="btn btn-default">
   <input type="checkbox">选项1
  </button>
  <button class="btn btn-default">
   <input type="checkbox">选项2
  </button>
  <button class="btn btn-default">
   <input type="checkbox">选项3
  </button>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之按钮(21)

0x03 单选按钮

类似地:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>单选按钮</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>单选按钮</h1>
 </div>
 <div class="btn-group" data-toggle="buttons">
  <button class="btn btn-default">
   <input type="radio" name="radio">选项1
  </button>
  <button class="btn btn-default">
   <input type="radio" name="radio">选项2
  </button>
  <button class="btn btn-default">
   <input type="radio" name="radio">选项3
  </button>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本插件学习笔记之按钮(21)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
jQuery操作之效果详解
May 19 jQuery
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 #Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 #Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 #Javascript
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
详解python中的 is 操作符
2017/12/26 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python3 map函数和filter函数详解
2019/08/26 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
经典商业广告词
2014/03/13 职场文书
创先争优承诺书范文
2014/03/31 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python中的3种定义类方法
2021/11/27 Python