Bootstrap_Javascript_按钮插件

时间:2021-06-28 10:53:50

一 . 加载状态按钮

HTML:

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

JS:

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

Bootstrap_Javascript_按钮插件

二 . 模拟单选择按钮

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

Bootstrap_Javascript_按钮插件

三 . 模拟复选按钮

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

Bootstrap_Javascript_按钮插件

四 . 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_按钮插件