Bootstrap 按钮状态提示
按钮
Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。
Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。
状态提示
通过自定义属性和简单的JavaScript编程,就可以让按钮具有状态提示功能:没有点击按钮时,正常显示;点击按钮时,触发相应的状态,并显示该状态对应的文本信息。
1)加载状态
要让按钮显示加载状态,首先要给按钮添加 data-loading-text 属性,它的值为加载状态要显示的文本信息,如 "Loading...":
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
还要为按钮定义单击事件,并在点击时调用 button('loading') 方法,来触发加载状态。代码如下:
<script>
$('.btn').click(function() {
$(this).button('loading')
});
</script>
现在,按钮就被赋予了加载状态提示功能。没有点击时,按钮正常显示。效果如图 5‑11所示:
图5-11 Bootstrap按钮加载状态
当点击按钮时,会触发加载状态,按钮的文本会变成 data-loading-text 属性的值。Bootstrap还为加载状态的按钮定义了特定的样式,加载过程中,按钮被自动禁用,它会变灰,不再响应单击。效果如图 5‑12所示:
图5-12 Bootstrap按钮加载状态
2)自定义状态
除了加载状态外,还可以为按钮自定义任意状态,只需为按钮添加 data-xxx-text 属性,并在点击按钮时调用 button('xxx') 方法即可。
比如,为按钮自定义 complete 状态,首先为按钮添加 data-complete-text 属性,属性的值为 complete 状态要显示的文本信息:
<button type="button" class="btn" data-complete-text="finished!" >complete</button>
再为按钮定义单击事件,并在点击时调用 button('complete') 方法:
<script>
$('.btn').click(function() {
$(this).button('complete')
});
</script>
现在,按钮就被赋予了 complete 状态提示功能。没有点击时,按钮正常显示。当点击按钮时,会触发 complete 状态,按钮的文本会变成 data-complete-text 属性的值。效果如图 5‑13所示:
图5-13 Bootstrap按钮状态提示自定义状态
3)重置状态
如果想让按钮的文本回到最初的样子,可以调用 button('reset') 方法来重置按钮的状态,让它显示初始的文本。代码如下:
<script>
$('.btn').button('reset')
</script>
如果没有为按钮定义 data-complete-text 属性,重置状态下会显示初始的文本,如果定义了 data-complete-text 属性,则显示 data-complete-text 属性指定的文本。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 按钮状态提示相关推荐
- Bootstrap3 按钮状态提示
按钮 Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能.状态切换功能.或者按钮组的功能. 在页面多次加载之间,Firefox 仍然保持表单控件的 ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap 按钮
基本按钮 通过将button标签中的class设置为对应的类,可以将button设置为不同的css格式,首先设置类为btn,不设置情况下为默认的html按钮格式,设置后变为bootstrap的基本按钮 ...
- Bootstrap按钮元素使用方法
Bootstrap按钮元素样式 Bootstrap中,总共提供了六种按钮样式,分别是默认.主要.成功.信息.警告以及危险这几个样式,它们对应的类分别是btn-default.btn-primary.b ...
- (翻译)适用于色盲用户的按钮状态
界面中的颜色能传递很多信息,但不太适用于色盲用户,后者通常很难区分不同颜色的对象. 要是按钮中仅用颜色作为提示,色盲用户很难辨别其活动状态.除了颜色,设计人员还应将按钮形状作为提示. 导航栏 ...
- bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种 转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
- Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- IOS选中按钮状态的记录
IOS选择按钮状态的记录 @interface NJTabBar() {NJTabBarButton *_selectedButton; } @property(nonatomic,strong)UI ...
- layui select日期_layui给下拉框、按钮状态、时间赋初始值的方法,按钮的状态
layui给下拉框.按钮状态.时间赋初始值的方法,按钮的状态 如下所示: 编辑 layui.use('table', function() { var table = layui.table; //监 ...
最新文章
- TensorFlow Frontend前端
- 社交媒体如何破坏了你的生活? | 大咖来了
- [洛谷P1440]求m区间内的最小值
- getchar()和getch()的区别
- touch事件总结,监听屏幕点击事件
- 【ArcGIS风暴】缓冲区分析、叠置分析综合实验案例:购房区域的选择
- 用原生js封装get方法
- arp 命令详解(安装、arp欺骗防御)
- 怎么样用 Google Analytics 区分 Google Shopping 页的流量
- 抓包工具-charles安装过程
- 杭电oj 1002 c++版本
- Mac安装telnet
- 顺序表常见操作实现之一
- Eclipse用法和技巧十三:自动生成的TODO注释1
- Apache常见报错问题
- 中国书信礼仪 (一)
- is exists可以传数组查询吗_C++中数组类型的操作
- 联想台式主机拆机教程_联想台式电脑主机怎么拆 联想b5040一体机拆机
- 关于人性论视角下网络虚拟社会的伦理思考
- Java不停机上线_不停机发布策略
热门文章
- WEB中的java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
- Redis源码阅读-Adlist双向链表
- 电池和Adapter切换电路改进实验(转)
- 条款05:了解C++默默编写并调用哪些函数
- 程序买卖(一舟,改自网络)
- linux设备驱动开发专业论坛www.linuxdriver.cn诚征斑竹
- java打印日期序列,Java GSON-日期格式
- 常用crc查表法_CRC校验码简介及CRC16的计算方法
- 时序数据库连载系列:指标届的独角兽Prometheus
- java poi 操作ppt