Bootstrap的js插件之按钮(button)

1)属性:

data-loading-text="加载中..."——使按钮呈现加载状态;

data-toggle="button"——使按钮能够切换状态;

data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能;

autocomplete="off"——解决FireFox的兼容性问题:即FireFox会在多个页面加载之间保持按钮的禁用状态;

2)方法:

$().button("toggle")——切换按钮状态;

$().button("loading")——设置按钮状态为loading - 即将按钮置为禁用状态并将文字内容切换为loading;

$().button("reset")——重置按钮状态 - 并将按钮上的文本还原为原始值;

$().button(string)——重置按钮状态
- 并将按钮上的文本重置为传入的值。

更多细节请参考示例:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>饭盒儿——发现身边不一样的世界</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<div class="container">
    <h3>button.js示例</h3>
    <button type="button" class="btn btn-primary js-loading-btn" data-loading-text="加载中...">提交评论</button>
    <button type="button" class="btn btn-default" data-toggle="button" autocomplete="off" aria-pressed="false">发表意见</button>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" autocomplete="off" checked>销量优先
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off">价格优先
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off">距离优先
        </label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="food" autocomplete="off" checked>川菜
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="food" autocomplete="off">湘菜
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="food" autocomplete="off">粤菜
        </label>
    </div>
    <button type="button" class="btn btn-warning mybtn" data-complete-text="我是成年人">请确认您已满18岁!</button>
</div>
<script>
    //点击按钮,文本改为"加载中...",3秒后复原
    $(".js-loading-btn").on("click",function(){
        var btn=$(this).button("loading");
        setTimeout(function(e){
            btn.button("reset")
        },3000);
    });
    $(".mybtn").on("click",function(e){
        $(this).button('complete');
        $(this).removeClass('btn-warning');
        $(this).addClass('btn-primary');
    });
</script>

</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 13:04:02

Bootstrap的js插件之按钮(button)的相关文章

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

玩转Bootstrap(JS插件篇)

模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下(或见右侧代码编辑器28-29行): <!-导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js&qu

Bootstrap的js插件之轮播(carousel)

轮播请查看以下示例,基本已经涵盖最常用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</titl

bootstrap之js插件踩坑系列

<html> <head>     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">     <!-- 可选的Bootstrap主题文件(一般不用引入) -->     <link rel="stylesheet" href="http://cdn.b

Bootstrap的js插件之弹出框(popover)

data-toggle="popover"--使弹出框能够切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placement--设置弹出框的方位(top.left.right.bottom,默认为right): data-trigger="focus"--设置焦点事件使用户点击空白处即能切换状态: 更多细节参考示例: <!DOCTYPE html> <html lang="zh_

关于Bootstrap之JS插件模态框的重要注意事项

用modal.js插件的模态框时,根据参考文档写下了如下代码: $('#myModal').modal('toggle').on('shown.bs.modal', function (e) { //TODO something }); 运行结果: chrome正常! IE8+(低版本没试)不响应事件,竟然不响应事件! >>排查步骤: 翻看文档,看有没有介绍此处存在兼容问题,结果没有: 既然不存在兼容问题,就是代码的编写问题了,问题变得好办了,顺序翻转: $('#myModal').on('s

Bootstrap的js插件之标签页

data-toggle="tab"--指明标签项具有切换响应功能: .tab-content--包裹标签页的所有内容部分: .tab-pane--包裹对应标签项的内容部分: .fade--设置标签项切换时有淡入淡出的效果: .in--设置标签页第一项淡入的初始化效果: .active--设置标签页以及对应标签项的内容处于激活状态: 更多细节参考示例: <!DOCTYPE html> <html lang="zh_CN"> <head&g

bootstrap框架--js插件

javascript的js文件可以单个引入,也可以一次性全部引入,不过无论是哪种引入方式,都是依赖于jquery(1.9.1以上),所以要先插入jquery再引入js插件 data属性指向的是js单个插件名,例如data-toggle="dropdown",指向的是下拉菜单这个js插件 transition: 模态框 轮播图 选项卡 折叠 动画过度

Bootstrap的js插件之折叠(collapse)

data-toggle="collapse"--指明该元素具有折叠功能: data-target--设置元素打开折叠后指向的元素链接. .collapse--用来设置元素为折叠内容. .in--设置折叠内容初始化为显示状态: .panel-collapse--指明该元素内容为折叠面板样式. 很多其它细节请參考演示样例: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta char