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 相关文章推荐
js倒计时抢购实例
Dec 20 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
何时使用Map来代替普通的JS对象
Apr 29 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python threading的使用方法解析
2019/08/28 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
报社实习生自荐信
2014/01/24 职场文书
商场周年庆活动方案
2014/08/19 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
物业公司管理制度
2015/08/05 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python