一 . 加载状态按钮

HTML:

<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载
</button>

JS:

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

二 . 模拟单选择按钮

<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" 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>

四 . JavaScript按钮用法

HTML:

<button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button>

JS:

 $(function() {
$("#mybutton").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});

Bootstrap_Javascript_按钮插件的更多相关文章

  1. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  2. 分享一个漂亮按钮插件FancyButtons

    一转眼,2018年的第10天就这样过去了.回看17年,曾经做了些啥都忘记了,就像每一天写日志时的样子(双手放在键盘上,怒着嘴,抬着头,望着天花板), 然后突然记得好像好久没有写随笔了(@_@).自从配 ...

  3. jQuery超炫酷按钮插件及源码

    现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...

  4. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  5. Bootstrap 按钮和折叠插件

    ---恢复内容开始--- 一.按钮 可以通过按钮插件创建不同状态的按钮. //单个切换. <button class="btn btn-primary" data-toggl ...

  6. JavaScript插件——按钮

    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  7. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  8. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  9. jqueryUI 插件

    1,拖拽插件  draggable 拖拽插件draggable的功能是拖动被绑定的元素, 当这个jqueryUI插件与元素绑定后,可以通过调用draggable()方法,实现何种拖拽元素的效果 $(s ...

随机推荐

  1. UNION、EXCEPT和INTERSECT操作查询结果

    对查询结果进行合并.剔除.取重操作可以通过UNION.EXCEPT和INTERSECT实现 任意一种操作都要满足以下两个条件: 1.字段的数量和顺序一致 2.对应字段的数据类型相兼容 一.UNION ...

  2. 从Java视角理解CPU缓存(CPU Cache)

    从Java视角理解系统结构连载, 关注我的微博(链接)了解最新动态众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责存数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多 ...

  3. hdu2817 A sequence of numbers

    这题就是判断是等差数列还是等比数列,然后计算结果mod200907 因为数字比较大10的九次方 所以等比用到了快速幂求模 不懂可以看看算法导论,在大数那里有讲 #include <iostrea ...

  4. 用网页server实现钢琴弹奏(使用Wizwiki-W7500)

      我将为大家介绍一个能够弹钢琴的网页server. 你仅仅须要打开网页,跟着以下步骤,用这个WIZwiki-W7500项目,就能轻松实现用网页server弹钢琴. 很easy. 我们開始吧! 第 ...

  5. Android自定义drawable(Shape)详解

    在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大. 那 ...

  6. Scrum 学习笔记

    Scrum 学习笔记 敏捷火了非常长一段时间了,可是一直没有机会实践,如今開始组队实践了,哈哈,先好好研习下规则~~ 什么是 scrum Scrum是一个敏捷开发框架,是一个增量的.迭代的开发过程.在 ...

  7. android 06 LinearLayout

    xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

  8. cmake 手册系列

    http://www.cnblogs.com/coderfenghc/archive/2012/06/16/CMake_ch_01.html

  9. Volley的简单二次封装

    新建一个application package com.honghe.myvolley.app; import com.android.volley.RequestQueue; import com. ...

  10. Java多线程之释放对象的锁

          由于等待一个锁定线程只有在获得这把锁之后,才能恢复运行,所以让持有锁的线程在不需要锁的时候及时释放锁是很重要的.在以下情况下,持有锁的线程会释放锁: 1. 执行完同步代码块. 2. 在执行 ...