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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
node.js中的console用法总结
Dec 15 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php后门URL的防范
2013/11/12 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Bootstrap基础学习
2015/06/16 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
详解vue路由
2020/08/05 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
讲解Python中的递归函数
2015/04/27 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
如何基于python实现不邻接植花
2020/05/01 Python
入党申请书自我鉴定
2013/10/12 职场文书
个人简历中自我评价
2014/02/11 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
实习单位指导教师评语
2014/12/30 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
Spring实现内置监听器
2021/07/09 Java/Android
Python基本的内置数据类型及使用方法
2022/04/13 Python