码迷,mamicode.com
首页 > 编程语言 > 详细

Bootstrap_Javascript_按钮插件

时间:2015-12-03 22:44:46      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

一 . 加载状态按钮

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

技术分享

Bootstrap_Javascript_按钮插件

标签:

原文地址:http://www.cnblogs.com/Ryan344453696/p/5017604.html

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