Bootstarp创建可折叠的组件
本文将学习如何通过 Bootstarp 创建可折叠的组件,具体内容如下
什么是必需的
您必须引用 jquery.js 和 bootstrap-collapse.js - 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内。
您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件。
实例
第一个实例演示如何不调用 JavaScript 创建可折叠的组件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible example</title> <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container-fluid"> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Click me to exapand. Click me again to collapse. Part I. </a> </div> <div id="collapseOne" class="accordion-body collapse" style="height: 0px; "> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Click me to exapand. Click me again to collapse. Part II. </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Click me to exapand. Click me again to collapse. Part III. </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> </div> </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
解释
这里有三点需要注意。第一,添加 data-toggle="collapse" 到您要点击的链接上,用来展开或折叠组件。
第二,添加一个 href 或一个 data-target 属性到父组件,它的值为子组件的 id。
第三,添加一个 data-parent 属性用来创建手风琴式的效果。data-parent 属性的值与主容器 div (保存整个手风琴组件)的 id 属性的值相同。如果您想要创建一个简单的折叠组件,不需要像手风琴那么复杂,就不需要添加这个属性。
实例
第二个实例演示如何创建简单的可折叠组件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
通过 JavaScript 调用
您可以使用下面的代码来通过 JavaScript 触发折叠。
$(".collapse").collapse()
选项、方法和事件
这里有一些通过 Bootstrap Collapsible JavaScript 插件使用的选项、方法、事件。具体如下所示:
选项
parent:值的类型为 Selector。默认值为 false。当父元素显示时,父元素下所有的可折叠元素是关闭的。
toggle:值的类型为 Boolean。默认值为 true。当被调用时,切换所有的可折叠元素。
toggle:值的类型为 Boolean。默认值为 true。当被调用时,切换所有的可折叠元素。
方法
.collapse(options):触发可折叠内容。接受一个可选的 option 对象。
.collapse('toggle'):展示或隐藏一个可折叠的页面元素。
.collapse('show'):展示一个可折叠的页面元素。
.collapse(hide):隐藏一个可折叠的页面元素。
事件
show:当 show 实例方法被调用之后,此事件被立即触发。
shown:当可折叠页面元素显示出来之后(同时 CSS 过渡效果也已执行完毕),此事件被触发。
hide:当 hide 实例方法被调用之后,此事件被立即触发。
hidden:当可折叠页面元素向用户隐藏之后(同时 CSS 过渡效果也已执行完毕),此事件被触发。
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
学习使用bootstarp基本控件(table、form、button)
这篇文章主要教会大家学习使用bootstarp基本控件,如table、form、button控件,感兴趣的小伙伴们可以参考一下...2016-04-16- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧...2016-05-05
- 这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下...2016-06-24
- 这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码,图文并茂介绍的非常详细,需要的朋友参考下吧...2017-01-23- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
- 本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-16
在laravel中使用Symfony的Crawler组件分析HTML
这篇文章主要介绍了在laravel中使用Symfony的Crawler组件分析HTML,需要的朋友可以参考下...2017-06-20- 这篇文章主要介绍了浅析Bootstrap组件之面板组件 的相关资料,需要的朋友可以参考下...2016-05-05
- 这篇文章主要介绍了Vue.js实战之组件之间的数据传递的相关资料,文中通过示例代码和图文介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 这篇文章主要为大家详细介绍了vue弹窗组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程,感兴趣的朋友一起学习吧...2016-04-27
- 这篇文章主要介绍了Bootstarp 基础教程之表单部分实例代码,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-02-08