1)属性:
data-loading-text="加载中..."——使按钮呈现加载状态;
data-toggle="button"——使按钮能够切换状态;
data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能;
autocomplete="off"——解决FireFox的兼容性问题:即FireFox会在多个页面加载之间保持按钮的禁用状态;
2)方法:
$().button("toggle")——切换按钮状态;
$().button("loading")——设置按钮状态为loading - 即将按钮置为禁用状态并将文字内容切换为loading;
$().button("reset")——重置按钮状态 - 并将按钮上的文本还原为原始值;
$().button(string)——重置按钮状态
- 并将按钮上的文本重置为传入的值。
更多细节请参考示例:
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-11-05 13:04:02