码迷,mamicode.com
首页 > Web开发 > 详细

Bootstrap的js插件之按钮(button)

时间:2015-08-07 20:03:59      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   html5   前端   响应式   插件   

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>
技术分享

技术分享

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

Bootstrap的js插件之按钮(button)

标签:bootstrap   html5   前端   响应式   插件   

原文地址:http://blog.csdn.net/bboyjoe/article/details/47341649

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!