bootstrap手风琴制作方法详解

日期:2019-12-17编辑作者:服务器

bootstrap弹出层有多种触发方式,以下是我用到的几种方式:

bootstrap手风琴制作方法详解,bootstrap手风琴

手风琴(Collapse)效果展示

Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏

<div class="panel-group" id="accordion">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-body">标题一对应的内容</div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body">标题二对应的内容</div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body">标题三对应的内容</div>
  </div>
 </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

手风琴–**手风琴结构
**

手风琴最关键的部分,就是每个标题对应有一个内容,在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构。

简单点就是一个触发器和一个折叠区:

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>

手风琴–**声明式触发手风琴(二)
**

第三步,为了把标题和内容区捆绑在一起,可以通过锚链接的方法,把标题区域和面板区连在一起:

第四步,控制面板内容区是否可视。在Bootstrap框架中,如果你想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse:

每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,
你只需要在collapse基础上再追加 in 样式:

手风琴–**声明式触发手风琴(三)
**

第五步,激活手风琴交互行为。要完成交互行为,需要在标题链接中自定义两个属性,一个是data-toggle,并且取值为collapse;另一个是data-target,取值为各个面板内容区的标识符,比如说ID,

注意:在这个案例中不加入data-target=”#panel1”也可以,因为前面已经有了href=”#panel1”,但如是button按钮作为触发器就必须使用data-target=”#澳门金莎娱乐网站 ,panel1”语句了。

第六步,定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。这个data-parent取值与手风琴面板容器的标识符相匹配,比如这个例子是指 #myAccordion

<div class="panel-group" id="myAccordion">
 <div class="panel panel-accordion panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
   </h4>
  </div>

☑ 使用 panel 的 panel-title 做为触元素,使用panel-body的父元素作为折叠区;
 ☑ 使用一个 panel-group 来包含多个 panel,从而实现手风琴效果;
 ☑ 每个 panel 里的触发元素都要指定data-parent属性;
 ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符;
 ☑ 触发元素需要指定 data-toggle,并且值为 collapse;
 ☑ 触发元素都要指定 data-target属性;
 ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

手风琴(Collapse) 效果展示 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。...

1.方法一:button中属性触发

注意:button中的data-target内容应该和要和弹出层中的id保持一致 data-target=”#mymodal-data”——– id=”mymodal-data”

  修改     × Close  弹出层标题      关闭 保存   

2.方法二:通过js绑定

注意:将button的id和弹出层的id分别赋给 $m_btn和$modal,当$m_btn被点击后$modal弹出。

 添加     × Close  弹出层标题   通过js绑定button和弹出层触发   关闭 保存    ${ // dom&#21152;&#36733;&#23436;&#27605; var $m_btn = $; //y-modalBtnAdd&#26159;button&#30340;id var $modal = $; //y-myModalAdd&#26159;&#24377;&#20986;&#30340;&#36974;&#32617;&#23618;&#30340;id&#65292;&#36890;&#36807;&#36825;&#20004;&#20010;id&#36827;&#34892;&#32465;&#23450; $m_btn.on{ $modal.modal; }); }); 

3.方法三:点击表格一行,弹出弹出层

动态给tr标签加弹出的触发属性

one two three
four five six

× Close

弹出层标题

点击表格一行内容,弹出弹出层

关闭

保存

bootstrap的弹出层在整个屏幕的上半部分,可以将它居中显示。

${ // dom加载完毕 var $m_btn = $; y-modalBtnAdd是button的id var $modal = $; y-myModalAdd是弹出的遮罩层的id,通过这两个id进行绑定 // 测试 bootstrap 居中 ,bootstrap的弹出层默认是左右居中,上下则是偏上,此代码将弹出层上下也居中了,但是会抖 动一下 $modal.on('shown.bs.modal', function(){ var $this = $; var $modal_dialog = $this.find; var m_top =  - $modal_dialog.height/2; $modal_dialog.css({'margin': m_top + 'px auto'}); }); });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文由澳门金莎娱乐网站发布于服务器,转载请注明出处:bootstrap手风琴制作方法详解

关键词:

js_脚本之家,cli搭建项目

对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个`` vue-cli 是一个官方发布 vue.js 项目脚手架,使...

详细>>

canvas基础学习【澳门金莎娱乐网站】

率先呢,先给特效。本人找手提式有线话机录的,有一点不明了,请见谅! canvas底子学习(二),canvas基本功学习...

详细>>

js的IIS扩展iisnode安装配置笔记_node,js的IIS扩展

然后把程序入口改为launch.js: 相关文章 相关搜索: 今天看啥 搜索技术库 返回首页 iOS9隐藏技能:第三方应用消息快...

详细>>

魔兽世界样式的tooltip,Handlebars的简单使用

{{title}} {{body}} 示例很简单,具体详情可参考ThinkVitamin的文章 Getting Started withHandlebars.js,希望大家能够喜欢。 *******...

详细>>