【Bootstrap学习笔记】11.按钮和折叠插件

最新推荐文章于 2024-03-04 22:16:29 发布

sunraito

最新推荐文章于 2024-03-04 22:16:29 发布

阅读量461

点赞数

分类专栏： Bootstrap学习笔记(李炎恢版) 文章标签： bootstrap

本文链接：https://blog.csdn.net/sunraito/article/details/82563319

版权

Bootstrap学习笔记(李炎恢版) 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

十七、按钮和折叠插件

学习内容

按钮插件-单个切换
按钮插件-单选按钮
按钮插件-加载状态
按钮插件-方法
折叠插件

●按钮插件-单个切换

1.单个切换类似于选中的状态，点击按钮后不弹起，再次单击才弹起
2.data-toggle="button"
3.firefox多次页面加载时，按钮可能保持表单的禁用或选中状态，解决方案：autocomplete="off"

<button class="btn btn-default btn-lg" data-toggle="button" autocomplete="off">
    button
</button>

这里写图片描述

●按钮插件-单选按钮（radio）

1.外围用div.btn-group包围，并定义成按钮组
2.正常添加单选按钮组
3.将label定义成按钮.btn.btn-info
4.给div.btn-group添加属性data-toggle="buttons"
5.默认选中状态除了要给input增加checked属性，还需给父级label增加.active样式

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

这里写图片描述

●按钮插件-复选按钮（checkbox）

步骤同单选按钮，将type换成checkbox即可

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-info">
        <input type="checkbox" name="aa" value="路飞" checked>
        路飞
    </label>
    <label for="" class="btn btn-info">
        <input type="checkbox" name="aa" value="索隆">
        索隆
    </label>
    <label for="" class="btn btn-info">
        <input type="checkbox" name="aa" value="桑吉">
        桑吉
    </label>
    <label for="" class="btn btn-info">
        <input type="checkbox" name="aa" value="娜美">
        娜美
    </label>
</div>

这里写图片描述

●按钮插件-加载状态

data-XXX-text="string"
其中XXX为自定义内容，与js中的方法名一致即可
string也是自定义内容，用于按钮加载时显示的字符

<button class="btn btn-info" data-OYe-text="正在加载">
    BUTTON
</button>
<script>
    $("button").on('click',function(){
        //可无视大小写
        $(this).button('oye');
    });
</script>

●按钮插件-方法

1.$('button').button('toggle') 同data-toggle="button"
2.$('button').button(string) 参考“按钮插件-加载状态”中的演示
3.$('button').button('reset') 重置按钮状态，文本内容恢复为最初的内容

<button class="btn btn-info" data-OYe-text="正在加载">
    BUTTON
</button>

<script>
    $("button").on('click',function(){
        $(this).button('oye');
        setTimeout(function(){
            //重置
            $("button").button('reset');
        }, 1000 );
    });
</script>

●折叠插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论用来创建折叠导航还是内容面板，它都允许很多内容选项。

●折叠插件-基本用法

1.一个按钮用来触发折叠/展开，data-toggle="collapse"属性用于定义JS，data-target="#id"属性用于找到折叠目标
2.一个内容显示区域。div.collapse默认隐藏，如想默认显示可用div.in或div.collapse.in，但如果不加任何样式，首次点击时会错。
3.内容显示区域增加id，如id="c1"

<button class="btn btn-default" data-toggle="collapse" data-target="#c1">COLLAPSE</button>

<div id="c1">
    //.well样式呈现一个内嵌式效果
    <div class="well">我爱北京天安门</div>
</div>

这里写图片描述

●折叠插件-手风琴式折叠

1.演示的手风琴折叠示例使用panel面板组件相关知识，可参考“6.列表组面板和嵌入组件 ”。这里加入了之前没有的样式.panel-group
2.区别：

看看结构上的区别，这里还不能实现折叠：

<!--这是panel面板组件-->
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">这是panel面板标题</div>
    </div>
    <div class="panel-body">
        内容：我爱北京天安门
    </div>
</div>

<!--panel-group折叠插件-->
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="">ONEPIECE</a>
            </div>
        </div>
        <div class="panel-collapse">
            <div class="panel-body">
                海贼王
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="">NARUTO</a>
            </div>
        </div>
        <div class="panel-collapse">
            <div class="panel-body">
                火影忍者
            </div>
        </div>
    </div>
</div>

这里写图片描述

手风琴实现：
1.div.panel-title>a a标签用于触发折叠/展开，href对应折叠容器的id，增加data-toggle="collapse"
2.div.panel-collapse 即折叠内容区域，增加id，如”c1”。并且这个容器要增加.collapse.in样式，至少要包含其中一个样式。
这里已经可以实现各自项的折叠/展开

<div class="panel-group">
<!--第1个手风琴项-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="#c1" data-toggle="collapse">ONEPIECE</a>
            </div>
        </div>
        <div id="c1" class="panel-collapse collapse in">
            <div class="panel-body">
                海贼王
            </div>
        </div>
    </div>
    <!--第2个手风琴项-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="#c2" data-toggle="collapse">NARUTO</a>
            </div>
        </div>
        <div id="c2" class="panel-collapse collapse">
            <div class="panel-body">
                火影忍者
            </div>
        </div>
    </div>
</div>

这里写图片描述

最后要实现展开其中一项，其它项折叠的最终效果
1.给div.panel-group增加id，如”id=’ccc’”
2.给每个折叠项的div.panel-title>a增加data-parent="#ccc"属性

<!--panel-group折叠插件-->
<div class="panel-group" id="ccc">
   <!--第1个手风琴项-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="#c1" data-toggle="collapse" data-parent="#ccc">ONEPIECE</a>
            </div>
        </div>
        <div id="c1" class="panel-collapse collapse in">
            <div class="panel-body">
                海贼王
            </div>
        </div>
    </div>
    <!--第2个手风琴项-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="#c2" data-toggle="collapse" data-parent="#ccc">NARUTO</a>
            </div>
        </div>
        <div id="c2" class="panel-collapse collapse">
            <div class="panel-body">
                火影忍者
            </div>
        </div>
    </div>
    <!--第3个手风琴项-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里用a标签触发折叠-->
                <a href="#c3" data-toggle="collapse" data-parent="#ccc">HUNTER</a>
            </div>
        </div>
        <div id="c3" class="panel-collapse collapse">
            <div class="panel-body">
                猎人
            </div>
        </div>
    </div>
</div>

这里写图片描述

●折叠插件-JS实现手风琴特效

替换data-parent="#id"

<div class="panel-group" id="ccc">
 <!--1-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <a href="#c1" data-toggle="collapse">ONEPIECE</a>
            </div>
        </div>
        <div id="c1" class="panel-collapse collapse in">
            <div class="panel-body">
                海贼王
            </div>
        </div>
    </div>
    <!--2-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <a href="#c2" data-toggle="collapse">HUNTER</a>
            </div>
        </div>
        <div id="c2" class="panel-collapse collapse ">
            <div class="panel-body">
                猎人
            </div>
        </div>
    </div>
    <!--3-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <!--这里a标签没有加data-toggle="collapse"属性，下面用js方式实现-->
                <a href="#c3">NARUTO</a>
            </div>
        </div>
        <div id="c3" class="panel-collapse collapse ">
            <div class="panel-body">
                火影
            </div>
        </div>
    </div>

</div>

<script>
    //parent和toggle要同时使用，否则会出错
    $("#c1,#c2,#c3").collapse({
        parent:'#ccc',
        toggle:false,
    });

    //除了toggle，还有show，hide了解以下
    $("a[href='#c3']").on('click',function(){
        $("#c3").collapse('toggle');
    });
</script>

●折叠插件-4个事件

show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

<script> 
    //整个插件
    $("#ccc").on('show.bs.collapse',function(){
        alert('show');
    })

    //插件某项
    $("#c3").on('show.bs.collapse',function(){
        alert('show');
    })
</script>