Bootstrap_Javascript_按钮插件

一 . 加载状态按钮

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');
         });        
      });