Bootstrap每天必学之按钮（Button）插件

按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示：

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>



二、单个切换


如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可，如下面实例所示：

复制代码 代码如下:
<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>

注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加 autocomplete="off"。


三、单选按钮
类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                                                                


四、复选按钮
您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>





Button 插件中的 button 方法中有三个参数： toggle、 reset、 string(比如 loading、complete)。



//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 




下面是一些按钮（Button）插件中有用的方法：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多关于Bootstrap内容如可以参考专题：Bootstrap学习教程
			  
              
本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。
              
本文地址：http://www.xlkjgs.com/notes/js/3308.html
             
		

					
		                    W
		                    导出为.doc文档
		                 
				
             
             

                  标签通过属性实例状态创建引用插件             
             
            

                
上一篇第一章之初识Bootstrap
                
下一篇基于JS实现EOS隐藏错误提示层代码
            
             
             

                  

                    

          以上内容由本站整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！
                  
                  

                      

                        
给这篇文章的作者打赏
                        
 
                           微信扫一扫打赏 
                         
 
                         
 
                           支付宝扫一扫打赏 
                         
 
                        ×
                      
                  
                  
 
            打赏  
            点赞
                
         
 
        
 
                  

                    
相关内容
                    

                            
                            
DedeCMS 无法下载远程图片和资源的解决方法

                            
                            
超级丑数--用查找的api解决

                            
                            
织梦友情链接Logo路径和编辑器里行内样式出现<x>

                            
                            
dedecms调用当前位置标签方法集合


XAML中Button重绘为圆形的方法技巧
JS使用eval()动态创建变量的方法
自动采集伪原创发布更新一体化插件安装方法
JS获取IMG图片高宽的简单实例
php 魔术函数使用说明
帝国cms7.5提取插件插件PSCWS2版
DedeCMS织梦增加TAG属性分类及调用
JS获取屏幕高度的简单实现代码
修改DedeCMS织梦会员登录状态（样式）调用代码的教程
Yii2实现UploadedFile上传文件示例
js弹出窗口返回值的简单实例
css3 media 响应式布局的简单实例
PHP获取文本框、密码域、按钮的值实例代码
Bootstrap组件学习之导航、标签、面包屑导航(精品
第三节 定义一个类 [3]
html多媒体应用之网页中插入flash动画、插入音乐