一 . 加载状态按钮
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');
});
});