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中 关于prototype属性实现继承的原理图
Apr 16 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php smarty函数扩展
2010/03/15 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php中session退出登陆问题
2014/02/27 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python命令行click参数用法解析
2019/12/19 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
环保倡议书300字
2014/05/15 职场文书
片区教研活动总结
2014/07/02 职场文书
中国梦读书活动总结
2014/07/10 职场文书
西游记读书笔记
2015/06/25 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers