zoukankan      html  css  js  c++  java
  • Bootstrap的js插件之按钮(button)

    1)属性:

    data-loading-text="载入中..."——使button呈现载入状态;

    data-toggle="button"——使按钮可以切换状态;

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

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

    2)方法:

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

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

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

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

    很多其它细节请參考演示样例:

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


  • 相关阅读:
    Ansible快速实战指南----多机自动化执行命令、部署神器
    linux 挂载共享盘
    蓄水池抽样算法
    PCA MATLAB代码
    网口转串口
    通过Python收集MySQL MHA 部署及运行状态信息的功能实现
    Linux常用命令总结(二)
    python 学习笔记 (四)
    MySQL 学习笔记(四)
    学习ProxySQL参考到几个网址
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/7028505.html
Copyright © 2011-2022 走看看