amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse

amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse

一、总结

注意点:

1、data-am-collapse:这个东西就是展开折叠事件

2、am-collapse(包括其下属):这个控制折叠样式

 

1、折叠面板:结合 Panel 组件实现手风琴效果。需结合以下辅助 class 使用:

  • 要隐藏的内容添加 .am-collapse
  • 默认显示的内容添加 .am-collapse.am-in

 添加以上 class 以后,通过 Data API 来调用:

<h4 data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"></h4>

其中:

  • parent 为容器 ID
  • target 为要伸缩的容器 ID

如果触发元素为 <a> 元素,可以把 target 设置在 href 属性里。

<a data-am-collapse="{parent: '#accordion'}" href="#do-not-say-1">
  ...
</a>

 

<div class="am-panel-group" id="accordion">
  <div class="am-panel am-panel-default">
    <div class="am-panel-hd">
      <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}">
        ...
      </h4>
    </div>
    <div id="do-not-say-1" class="am-panel-collapse am-collapse am-in">
      <div class="am-panel-bd">
        ...
      </div>
    </div>
  </div>

 

2、折叠菜单:使用时注意目标元素外面应该有一个容器,以便动画执行时计算高度。

<button class="am-btn am-btn-primary" data-am-collapse="{target: '#collapse-nav'}">Menu <i class="am-icon-bars"></i></button>
<nav>
  <ul id="collapse-nav" class="am-nav am-collapse">
    <li><a href="">开始使用</a></li>
    <li><a href="">CSS 介绍</a></li>
    <li class="am-active"><a href="">JS 介绍</a></li>
    <li><a href="">功能定制</a></li>
  </ul>
</nav>

 

3、折叠列表:注意 <li> 标签上需要添加 am-panel class。

4、通过data API设置折叠:在元素上添加 data-am-collapse 并设置 target 的值为折叠元素 ID:

<button data-am-collapse="{target: '#my-collapse'}"></button>

5、通过js调用折叠$('#myCollapse').collapse()

  • $().collapse(options) - 绑定元素展开/折叠操作
$('#myCollapse').collapse({
  toggle: false
})
  • $().collapse('toggle') - 切换面板状态
  • $().collapse('open') - 展开面板
  • $().collapse('close') - 关闭面板

6、自定义事件:

$('#collapse-nav').on('open.collapse.amui', function() { console.log('折叠菜单打开了!'); }).on('close.collapse.amui', function() { console.log('折叠菜单关闭鸟!'); });
事件描述
open.collapse.amuiopen 方法被调用时立即触发
opened.collapse.amui元素完全展开后触发
close.collapse.amuiclose 方法被调用后立即触发
closed.collapse.amui元素折叠完成后触发

 

 

 

 

 

二、折叠面板Collapse

Collapse


折叠效果组件,用于制作下滑菜单或手风琴效果。

使用演示

折叠面板

结合 Panel 组件实现手风琴效果。需结合以下辅助 class 使用:

  • 要隐藏的内容添加 .am-collapse
  • 默认显示的内容添加 .am-collapse.am-in

添加以上 class 以后,通过 Data API 来调用:

 Copy
<h4 data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"></h4>

其中:

  • parent 为容器 ID
  • target 为要伸缩的容器 ID

如果触发元素为 <a> 元素,可以把 target 设置在 href 属性里。

 Copy
<a data-am-collapse="{parent: '#accordion'}" href="#do-not-say-1"> ... </a>
 Copy
莫言 - 你不懂我,我不怪你 #1
每个人都有一个死角, 自己走不出来,别人也闯不进去。
我把最深沉的秘密放在那里。
你不懂我,我不怪你。

每个人都有一道伤口, 或深或浅,盖上布,以为不存在。
我把最殷红的鲜血涂在那里。
你不懂我,我不怪你。
莫言 - 你不懂我,我不怪你 #2
莫言 - 你不懂我,我不怪你 #3
<div class="am-panel-group" id="accordion"> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"> ... </h4> </div> <div id="do-not-say-1" class="am-panel-collapse am-collapse am-in"> <div class="am-panel-bd"> ... </div> </div> </div> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}"> ... </h4> </div> <div id="do-not-say-2" class="am-panel-collapse am-collapse"> <div class="am-panel-bd"> ... </div> </div> </div> <div class="am-panel am-panel-default"> <div class="am-panel-hd"> <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-3'}">...</h4> </div> <div id="do-not-say-3" class="am-panel-collapse am-collapse"> <div class="am-panel-bd"> ... </div> </div> </div> </div>

折叠菜单

使用时注意目标元素外面应该有一个容器,以便动画执行时计算高度。

 Copy
Menu 
<button class="am-btn am-btn-primary" data-am-collapse="{target: '#collapse-nav'}">Menu <i class="am-icon-bars"></i></button> <nav> <ul id="collapse-nav" class="am-nav am-collapse"> <li><a href="">开始使用</a></li> <li><a href="">CSS 介绍</a></li> <li class="am-active"><a href="">JS 介绍</a></li> <li><a href="">功能定制</a></li> </ul> </nav>

折叠列表

感谢 @looly 提供的例子。注意 <li> 标签上需要添加 am-panel class。

 Copy
  •  首页
  •  人员管理
  •  单位(部门)管理
  •  角色管理
<ul class="am-list admin-sidebar-list" id="collapase-nav-1"> <li class="am-panel"> <a data-am-collapse="{parent: '#collapase-nav-1'}" href="#/"><i class="am-icon-home am-margin-left-sm"></i> 首页</a> </li> <li class="am-panel"> <a data-am-collapse="{parent: '#collapase-nav-1', target: '#user-nav'}"> <i class="am-icon-users am-margin-left-sm"></i> 人员管理 <i class="am-icon-angle-right am-fr am-margin-right"></i> </a> <ul class="am-list am-collapse admin-sidebar-sub" id="user-nav"> <li><a href="#/userAdd"><i class="am-icon-user am-margin-left-sm"></i> 添加人员 </a></li> <li><a href="#/userList/0"><i class="am-icon-user am-margin-left-sm"></i> 人员列表 </a></li> </ul> </li> <li class="am-panel"> <a data-am-collapse="{parent: '#collapase-nav-1', target: '#company-nav'}"> <i class="am-icon-table am-margin-left-sm"></i> 单位(部门)管理 <i class="am-icon-angle-right am-fr am-margin-right"></i> </a> <ul class="am-list am-collapse admin-sidebar-sub" id="company-nav"> <li><a href="#/companyAdd"><span class="am-icon-table am-margin-left-sm"></span> 添加单位(部门) </a></li> <li><a href="#/companyList/0"><span class="am-icon-table am-margin-left-sm"></span> 单位(部门)列表 </a></li> </ul> </li> <li class="am-panel"> <a data-am-collapse="{parent: '#collapase-nav-1', target: '#role-nav'}"> <i class="am-icon-table am-margin-left-sm"></i> 角色管理 <i class="am-icon-angle-right am-fr am-margin-right"></i> </a> <ul class="am-list am-collapse admin-sidebar-sub" id="role-nav"> <li><a href="#/roleAdd"><span class="am-icon-table am-margin-left-sm"></span> 添加角色 </a></li> <li><a href="#/roleList/0"><span class="am-icon-table am-margin-left-sm"></span> 角色列表 </a></li> </ul> </li> </ul>

调用方式

通过 Data API

在元素上添加 data-am-collapse 并设置 target 的值为折叠元素 ID:

 Copy
<button data-am-collapse="{target: '#my-collapse'}"></button>

通过 JS

使用方法:

 Copy
$('#myCollapse').collapse()
方法
  • $().collapse(options) - 绑定元素展开/折叠操作
 Copy
$('#myCollapse').collapse({
  toggle: false
})
  • $().collapse('toggle') - 切换面板状态
  • $().collapse('open') - 展开面板
  • $().collapse('close') - 关闭面板
选项
参数类型默认描述
parent选择符false如果设置了 parent 参数,且该容器下有多个可折叠的面板时,展开一个面板会关闭其它展开的面板。换言之,如果想让多个面板可以都处于展开状态,那不设置这个参数即可。
toggle布尔值true交替执行展开/关闭操作
自定义事件

自定义事件在折叠的元素上触发,以上面的折叠菜单为例,#collapse-nav 触发自定义事件:

 Copy
$('#collapse-nav').on('open.collapse.amui', function() { console.log('折叠菜单打开了!'); }).on('close.collapse.amui', function() { console.log('折叠菜单关闭鸟!'); });
事件描述
open.collapse.amuiopen 方法被调用时立即触发
opened.collapse.amui元素完全展开后触发
close.collapse.amuiclose 方法被调用后立即触发
closed.collapse.amui元素折叠完成后触发

注意事项

不要在折叠内容的容器上设置垂直的 margin/padding/border 样式。

jQuery 计算元素高度的方式有点奇葩,暂时只能通过上面的方式规避。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值