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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
原生js实现each方法实例代码详解
May 27 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
浅谈python之新式类
2018/08/12 Python
python障碍式期权定价公式
2019/07/19 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python 解析简单的XML数据
2020/07/24 Python
python 实现逻辑回归
2020/12/30 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
物流业务员岗位职责
2014/02/08 职场文书
2014全年工作总结
2014/11/27 职场文书
获奖感言一句话
2015/07/31 职场文书
医院感染管理制度
2015/08/05 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
优质服务标语口号
2015/12/26 职场文书