Bootstrap按钮和折叠插件

 

学习要点：

　　1.按钮

　　2.折叠

 

本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件。

 

一．按钮

可以通过按钮插件创建不同状态的按钮，也就是点击后为选中状态颜色加深，需要再次点击后后取消选中状态，颜色还原

单个切换

 

data-toggle="button"绑定按钮事件，写在按钮button元素里，点击后选中或取消选中按钮(Bootstrap)

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

单个切换

点击前未选中颜色

 

点击后选中颜色

 

再次点击后取消选中颜色

 

 

单选按钮，也就是按钮式单选框

btn-group样式class类，写在包含多个按钮<div>里，设置群组多个按钮为一组(Bootstrap)

data-toggle="buttons"按钮事件，写在群组div里，表示群组按钮事件，点击后选中当前按钮(Bootstrap)

label单选框或多选框按钮标签，设置群组单选框或多选框时用此标签代替button标签，转换成按钮(Bootstrap)

active样式class类，写在<label>里，设置群组里的当前按钮为首选(Bootstrap)

for="nan"为当前元素所绑定的元素id(Bootstrap)

     
    
               男        
               女    
     

 

 

按钮式复选框

复选框和单选框一样的只是type属性值不一样而已

     
    
              音乐        
               体育        
               美术        
               电脑    
     

 

 

 

加载状态按钮

加载状态按钮必须结合js

data-loading-text="上传中请稍后..."设置加载状态按钮点击后提示内容，按钮元素里，点击后提示的内容(Bootstrap)

 

    上传文件

 

js

$(function () {    $("a,input,button").focus(function () {         //获取到所有的a,input,button标签执行聚集光标事件        this.blur()                                 //当聚集光标时，去除虚线边框    });    $('#myButton').on('click', function () {        //获取到加载状态按钮，执行点击事件        var btn = $(this).button('loading');        //点击后执行loading方法，即html里的data-loading-text="上传中请稍后..."        setTimeout(function () {                    //计时器等待1秒            btn.button('reset');                    //执行reset方法，还原初始状态        }, 1000);    });});

 

 

按钮方法中有三个参数：

button()按钮方法，将按钮元素执行按钮方法

toggle将按钮元素绑定按钮事件(Bootstrap)

reset将按钮元素还原初始状态(Bootstrap)

string自定义字符串，设置加载状态按钮提示内容(Bootstrap)

    上传文件

js

 

$(function () {    $("a,input,button").focus(function () {         //获取到所有的a,input,button标签执行聚集光标事件        this.blur();                                 //当聚集光标时，去除虚线边框    });    $('#myButton').on('click', function () {        //获取到按钮指定点击事件        //$(this).button('toggle');                 //点击后执行按钮方法        $(this).button('zdyixx');                   //执行自定义提示信息，即html里data-zdyixx-text="上传中请稍后..."        setTimeout(function () {                    //计时器等待1秒            $('#myButton').button('reset');         //执行reset方法，还原初始状态        }, 1000);    })});

 

 

 

 

二．折叠

通过点击可以折叠内容。

基本实例

data-toggle="collapse"设置按钮折叠事件，写在按钮元素里，点击后执行折叠事件(Bootstrap)

data-target="#content"指向折叠区块id，写在按钮元素里，将按钮与折叠内容区块关联(Bootstrap)

collapse样式class类，写在折叠区块<div>里，设置折叠区块样式(Bootstrap)

well样式class类，写在折叠内容区块<div>里，设置折叠内容区块嵌入样式(Bootstrap)

    Bootstrap
     
    
      
               Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由        Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目        前,Bootstrap 最新版本为 3.0 。    
      
     

 

 

手风琴折叠

 

panel-group样式class类，面板容器<div>里，设置一个面板容器区块(Bootstrap)

panel样式class类，写在面板组件<div>元素里，声明面板组件div(Bootstrap)

panel-default样式class类，写在面板组件<div>元素里，设置面板组件默认样式(Bootstrap)

panel-heading样式class类，写在面板组件里头部<div>元素里，设置面板组件头部样式(Bootstrap)

panel-title样式class类，写在面板组件里头部<h1-h4>元素里，设置面板组件头部标题样式(Bootstrap)

panel-collapse样式class类，写在面板组件里的内容区块<div>元素里，设置折叠内容区域容器(Bootstrap)

collapse样式class类，写在面板组件里的内容区块<div>元素里，设置折叠内容区域样式(Bootstrap)

in样式class类，写在面板组件里的内容区块<div>元素里，设置当前折叠内容区域为默认展开效果(Bootstrap)

将标题里的a标签地址等于内容区域的id进行关联,(Bootstrap)

data-parent="#accordion"写在标题里的a标签里，值是折叠面板容器的id，将折叠面板容器与标题a标签关联(Bootstrap)

data-toggle="collapse"折叠事件，写在标题里的a标签，点击a标签后执行折叠事件(Bootstrap)

     
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第一部分            
        
       
        
       
            
        
                         这里是第一部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第二部分            
        
       
        
       
            
        
                         这里是第二部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第三部分            
        
       
        
       
            
        
                         这里是第三部分。            
        
        
       
    
      
     

 

 

折叠属性

data-parent 默认值为 false，设置需指定父元素选择器。也就是说，选定其中一个折叠区，其他折叠将隐藏，实现手风琴效果。

data-toggle 如果前面加 data-*，设置'collapse'表示实现折叠；如果是 JavaScript 中的属性，默认为 true，实现反转

     
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第一部分            
        
       
        
       
            
        
                         这里是第一部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第二部分            
        
       
        
       
            
        
                         这里是第二部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第三部分            
        
       
        
       
            
        
                         这里是第三部分。            
        
        
       
    
      
     

js

 

$(function () {    $("a,input,button").focus(function () {         //获取到所有的a,input,button标签执行聚集光标事件        this.blur();                                 //当聚集光标时，去除虚线边框    });    $('#collapseOne,#collapseTwo,#collapseThree').collapse({        //获取所有标题a标签id执行折叠方法        parent: '#accordion',       //将a标签与折叠容器id关联        toggle: false,              //false默认项展开，true默认项折叠    });});

 

 

 

 

折叠方法，方法还提供了三个参数：hide、show、toggle。

collapse()折叠方法，将折叠容器里的折叠内容区块执行折叠方法(Bootstrap)

hide折叠方法参数，将内容折叠(Bootstrap)

show折叠方法参数，将内容展开(Bootstrap)

toggle折叠方法参数，反转折叠和展开(Bootstrap)

$(function () {    $("a,input,button").focus(function () {         //获取到所有的a,input,button标签执行聚集光标事件        this.blur();                                 //当聚集光标时，去除虚线边框    });    $('#collapseOne').collapse('hide');    $('#collapseTwo').collapse('show');    $('button').on('click', function () {        $('#collapseOne').collapse('toggle');    });});

 

 

折叠事件，Collapse 插件中事件有四种。

show.bs.collapse 在 show 方法调用时立即触发(Bootstrap)

shown.bs.collapse 折叠区完全显示出来是触发(Bootstrap)

hide.bs.collapse 在 hide 方法调用时触发(Bootstrap)

hidden.bs.collapse 该事件在折叠区域完全隐藏之后触发(Bootstrap)

js

$(function () {    $("a,input,button").focus(function () {         //获取到所有的a,input,button标签执行聚集光标事件        this.blur();                                 //当聚集光标时，去除虚线边框    });    $('#collapseOne').on('show.bs.collapse', function () {      //获取到折叠内容区块执行事件        alert('在 show 方法调用时立即触发');    });    $('#collapseOne').on('shown.bs.collapse', function () {        alert('折叠区完全显示出来是触发');    });    $('#collapseOne').on('hide.bs.collapse', function () {        alert('在 hide 方法调用时触发');    });    $('#collapseOne').on('hidden.bs.collapse', function () {        alert('该事件在折叠区域完全隐藏之后触发');    });});

HTML

     
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第一部分            
        
       
        
       
            
        
                         这里是第一部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第二部分            
        
       
        
       
            
        
                         这里是第二部分。            
        
        
       
    
      
    
      
        
       
            
        
                点击我进行展示，再点击我进行折叠，第三部分            
        
       
        
       
            
        
                         这里是第三部分。