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 相关文章推荐
详解js图片轮播效果实现原理
Dec 17 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
javascript实现拼图游戏
Jan 29 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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
python实现猜数字游戏
2020/03/25 Python
详解pandas赋值失败问题解决
2020/11/29 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
机械个人求职信范文
2014/01/24 职场文书
淘宝活动策划方案
2014/02/06 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
新年团拜会主持词
2014/04/02 职场文书
医院搬迁方案
2014/06/14 职场文书
银行稽核岗位职责
2015/04/13 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers