文档章节

Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

d
 doliangzhe
发布于 2013/05/19 20:46
字数 2589
阅读 3908
收藏 16

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂组件。

引入文件


<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>
bootstrap-collapse.js就是实现折叠的插件,当然你也可以只引入 bootstrap.js,里面包含了所有的 bootstrap  js插件。bootstrap-transition.js可有可无,它能使折叠过程中产生过度效果。


基本用法


1.使用标记

一般每个折叠组件都会有一个触发元素,如:按钮、超链接等,通过点击触发元素来控制折叠元素的展开和隐藏。这样,只要在触发元素上添加 data-toggle="collapse" 和 data-target 标记就能自动变成可折叠的。 data-target 属性接受一个css选择器,指向折叠元素。另外,在折叠元素上需要添加 .collapse 类样式。如果要默认某折叠元素是打开的,可在折叠元素上添加 .in 。做个demo:

引入js库

<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>
Html代码



<body>
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单折叠效果
</button>
 
<div id="demo" class="collapse in">
前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
</div>

</body>

2.使用js代码

除了上面的标记法创建折叠组件外,还可以用纯js语句来创建。如下:


$('#myCollapsible').collapse({
  toggle: true
})
上面代码的意思是,将id为 myCollapsible 元素变为一个折叠组件,同时需要传入一个对象,对象属性toggle为true时,将普通元素变为折叠组件,为false时,可将折叠组件还原为普通的元素。

一旦某个元素变为折叠组件,我们就可以通过下面的js语句来控制它的折叠和打开:

$('#myCollapsible').collapse('toggle')

在折叠和打开间互相切换

$('#myCollapsible').collapse('show')

打开

$('#myCollapsible').collapse('hide')

折叠

demo如下:

Html代码

<div id="demo">
前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
</div>
<br/>
<a href="javascript:void(0)"  onClick="open_collapse()">打开</a><br/>
<a href="javascript:void(0)"  onClick="hide_collapse()">折叠</a>
Js代码



<script type="text/javascript">
//将id为demo的元素变为折叠组件
$("#demo").collapse({
        toggle: true
    });
//打开
function open_collapse(){
	$("#demo").collapse("show");
}
//折叠
function hide_collapse(){
	$("#demo").collapse("hide");
}
</script>

使用事件监听


bootstrap还为折叠组件提供了一组事件,通过这些事件,我们可以监听用户的动作和折叠组件的状态。

Bootstrap的折叠类扩展了一组事件,可以介入折叠的某些功能实现。

事件 描述
show 该事件在用户触发打开动作时立刻触发。
shown 该事件在折叠组件完全打开后触发(过渡效果完成后)。
hide 该事件在用户触发折叠动作时立刻触发。
hidden 该事件在折叠组件完全折叠后触发(过渡效果完成后)。
show和hide是监听动作的,shown和hidden是监听状态的,这点要注意。


如何添加事件:

$('#myCollapsible').on('hidden', function () { 
 // 做点hidden之后的事情 
}

demo如下:

Html代码

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单折叠效果
</button>
 
<div id="demo" class="collapse in">
前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
</div>
Js代码



<script type="text/javascript">
$('#demo').on('hidden', function () {
    alert("事件:hidden");
})
$('#demo').on('shown', function () {
    alert("事件:shown");
})
$('#demo').on('show', function () {
    alert("事件:show");
})
$('#demo').on('hide', function () {
    alert("事件:hide");
})
</script>

实现手风琴效果


一般,单个组件的折叠用处并不大,我们需要的是利用单个组件的特性实现复杂的功能单元。下面就来介绍下手风琴效果。利用手风琴效果我们可以解决某一类的问题,如:可以创建个导航栏,或是新闻列表中控制文章摘要的显示等等。

手风琴效果的特点是:作为某一容器下的所有折叠组件,当某个折叠组件打开时,所有其他的折叠组件必须关闭。

如何创建:

只需要在上面使用标记法的基础上在加上 data-target 即可。属性值也是个css选择器,指向所有折叠组件所在的父容器。

Bootstrat为手风琴效果也提供了一组样式,利用这些样式可以很快创建出来。下面给个demo:

Html代码

<div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"  data-target="#collapseOne" data-parent="#accordion2">
                  国土问题
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                  门票问题
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  目前,中国半数5A级景区门票达到100元,黄山门票10年来由80元涨至230元。山东曲阜称,与同类景区相比收费较低,仅收150元,不涨票价就丢身价。曲阜的孔庙、孔府和孔林,年收入1.5亿元左右,全部上缴了地方财政,但景区维护成本从未公开。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                  超生罚款
                </a>
              </div>
              <div id="collapseThree" class="accordion-body in" style="height: auto;">
                <div class="accordion-inner">
		  学者杨支柱因生二胎被取消公职,并罚款24万余元。他称,计生罚款以前直接叫超生罚款,入世后改成“社会抚养费”。根据9省市超生罚款的平均数,全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政,而地方则分配混乱,部分罚款去向成谜。
                </div>
              </div>
            </div>
</div>
最外层有个id="accordion2"的容器,没有这个容器就无法控制所有折叠组件的关闭。而每个折叠组件的data-parent="#accordion2"  属性必须指向这个容器。 另外,有个小技巧,当触发元素是个超链接时,也可使用href="#collapseTwo"的形式替换掉 data-target="#collapseTwo "。



使用js创建

上面讲述了如何使用标记创建手风琴效果,这是推荐的做法,确实很方便简单。用js也可以,只是稍微复杂点,下面我写了个demo,可以参考下:

Html代码

<div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  国土问题
                </a>
              </div>
              <div class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  前一段时间一个段子说,某国的网民在因国土问题与中国网民争吵时说,我要打到北京,中国的网民非常淡然地回应,就你那经济水平,交得起过路费吗?这两天新的段子说,李白要是活在今天的话,估计一大半以上他的诗根本写不出来,因为名山大川的门票他根本买不起。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  门票问题
                </a>
              </div>
              <div class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  目前,中国半数5A级景区门票达到100元,黄山门票10年来由80元涨至230元。山东曲阜称,与同类景区相比收费较低,仅收150元,不涨票价就丢身价。曲阜的孔庙、孔府和孔林,年收入1.5亿元左右,全部上缴了地方财政,但景区维护成本从未公开。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  超生罚款
                </a>
              </div>
              <div class="accordion-body in" style="height: auto;">
                <div class="accordion-inner">
		  学者杨支柱因生二胎被取消公职,并罚款24万余元。他称,计生罚款以前直接叫超生罚款,入世后改成“社会抚养费”。根据9省市超生罚款的平均数,全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政,而地方则分配混乱,部分罚款去向成谜。
                </div>
              </div>
            </div>
</div>
Js代码



<script type="text/javascript">
//创建折叠组件
$(".accordion-body").collapse({
        toggle: true,parent:'#accordion2'
    });
//为触发元素添加单击事件,在回调函数里打开折叠元素,此时由于上面已经指定了parent属性,所以Bootstrap会为我们自动将其他折叠组件关闭
$('.accordion-heading').on('click', function () {
    var self = this;
    $(self).nextAll().eq(0).collapse("show");
})
</script>
其中在创建折叠组件时需要添加parent属性,属性值是个css选择器,指向父容器,作用和 data-parent标记同。






© 著作权归作者所有

共有 人打赏支持
d
粉丝 2
博文 14
码字总数 11064
作品 0
海淀
私信 提问
加载中

评论(2)

da54ng
da54ng
如果有演示就好了
chape
chape
mark
Bootstrap系列教程目录

Bootstrap javascript插件使用博文目录汇总 1、Bootstrap JS插件使用实例(1)-轮播 2、Bootstrap JS插件使用实例(2)-模态对话框 3、Bootstrap JS插件使用实例(3)-下拉菜单 4、Bootstrap JS插件...

zuolz1985
2013/05/20
0
0
Bootstrap js插件使用大全

Bootstrap JS扩展插件使用实例(9)-datepicker Bootstrap JS插件使用实例(8)-按钮 Bootstrap JS插件使用实例(7)-通知消息 Bootstrap JS插件使用实例(6)-折叠(手风琴效果) Bootstrap JS插件使用...

zuolz1985
2013/05/26
0
0
bootstrap.js学习笔记

模态弹出框 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹...

_好久不见
2015/11/05
0
0
盘点6个时尚有用的 jQuery 和 CSS3 实例

很久以来,jQuery作为JS框架已经被大部分开发者所认同了,从而也诞生了不少让前端开发者兴奋的插件。然后随着CSS3的兴起,很多jQuery插件也都演变得符合CSS3标准,插件内容也更充实了,页面也...

yykj
2012/12/10
3.8K
6
分享10个jQuery的标签页tabs和手风琴效果Accordion实现

日期:2012/02/06 来源:GBin1.com 手风琴效果和标签页效果很类似。主要的区别在于显示和隐藏的方式不同。这里我们精心收集了10个标签页和手风琴效果的实现,希望大家喜欢! 1. Yetii – Ye...

gbin1
2012/02/07
3.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

VI 编辑器快捷键

vi编辑器工作模式 命令模式 输入模式 末行模式 命令模式 光标移动键:h:左 j:下 k:上 l:右 7h:光标向左7个字符,同理5j:光标向下移动5个字符 w :移动到下一个单词的词首 2w : 向后跳转2个单...

ZeroneLove
24分钟前
0
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
今天
4
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
今天
1
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
今天
2
0
java基础的几个算法

一般对于排序算法我们通常考虑: 是否稳定(相同值的两个数位置是否会变) 和 时间复杂度(算法执行次数的规模量级)。至于说空间复杂度(算法在运行过程中临时占用存储空间大小的量度)其实...

noob_fly
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部