bootstrap按钮插件(Button)使用方法解析


Posted in Javascript onJanuary 13, 2017

按钮插件(Button)学习笔记:

按钮插件

样式文件:
☑ LESS版本:源文件buttons.less

☑ 点击按钮时,按钮文字变为“正在加载…”,一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态,比如禁用状态、正在加载状态、正常状态等;
☑ 按钮切换状态
☑ 按钮模仿单选按钮
☑ 按钮模仿复选按钮

按钮插件?按钮加载状态
通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态

加载

通过data-loading-text属性定义加载的文本信息,然后通过JavaScript给按钮绑定一个事件,并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示:

$(function(){
 $("#loaddingBtn").click(function () {
  $(this).button("loading");
  });
});

按钮插件?模拟单选择按钮

在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle=”buttons”

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1">男
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2">女
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3">未知
 </label>
</div>
----------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options1">男
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options2">女
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="options3">未知
 </label>
</div>

按钮插件?模拟复选按钮

<div class="btn-group">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1">电影
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2">音乐
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3">游戏
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4">摄影
 </label>
</div>
-------------------------------------------------------------------
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options1">电影
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options2">音乐
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options3">游戏
 </label>
 <label class="btn btn-primary">
  <input type="checkbox" name="options" id="options4">摄影
 </label>
</div>

按钮插件?按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

按钮插件?JavaScript用法

1、切换按钮状态(得到焦点)

$("#mybutton").button("toggle")

2、重新恢复按钮:

$("#mybutton").button("reset")

3、任意参数:

$(“#mybutton”).button(“任意字符参数名”)

替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 #Javascript
bootstrap警告框使用方法解析
Jan 13 #Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 #Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
You might like
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python 文件与目录操作
2008/12/24 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
校长岗位职责
2013/11/26 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
玲玲的画教学反思
2014/02/04 职场文书
出生公证委托书
2014/04/03 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
小学安全教育主题班会
2015/08/12 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
导游词之青岛崂山
2019/12/27 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
win10下go mod配置方式
2021/04/25 Golang
Java SSM配置文件案例详解
2021/08/30 Java/Android