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

阅读量：5912 次

发布时间：2019-06-19

本文共 3234 字，大约阅读时间需要 10 分钟。

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

一、总结

注意点：

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

2、am-collapse（包括其下属）：这个控制折叠样式

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

要隐藏的内容添加 .am-collapse；

默认显示的内容添加 .am-collapse.am-in；

添加以上 class 以后，通过 Data API 来调用：

其中：

parent 为容器 ID

target 为要伸缩的容器 ID

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

...

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


       
          
       开始使用
    
       CSS 介绍
    
       JS 介绍
    
       功能定制

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

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

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.amui`	`open` 方法被调用时立即触发
`opened.collapse.amui`	元素完全展开后触发
`close.collapse.amui`	`close` 方法被调用后立即触发
`closed.collapse.amui`	元素折叠完成后触发

二、折叠面板Collapse

Collapse

使用演示

折叠面板

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

要隐藏的内容添加 .am-collapse；

默认显示的内容添加 .am-collapse.am-in；

添加以上 class 以后，通过 Data API 来调用：

Copy

其中：

parent 为容器 ID

target 为要伸缩的容器 ID

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

Copy

...

Copy

莫言 - 你不懂我，我不怪你 #1

每个人都有一个死角，自己走不出来，别人也闯不进去。

我把最深沉的秘密放在那里。

你不懂我，我不怪你。

每个人都有一道伤口，或深或浅，盖上布，以为不存在。

我把最殷红的鲜血涂在那里。

你不懂我，我不怪你。

莫言 - 你不懂我，我不怪你 #2

莫言 - 你不懂我，我不怪你 #3

折叠菜单

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

Copy

 
      
       
       开始使用
 
       CSS 介绍
 
       JS 介绍
 
       功能定制

折叠列表

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

Copy


      
        首页 
 
         人员管理   
        
         添加人员 
 
         人员列表 
 
       
 
 
         单位（部门）管理   
        
         添加单位（部门） 
 
         单位（部门）列表 
 
       
 
 
         角色管理   
        
         添加角色 
 
         角色列表

调用方式

通过 Data API

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

Copy

通过 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.amui`	`open` 方法被调用时立即触发
`opened.collapse.amui`	元素完全展开后触发
`close.collapse.amui`	`close` 方法被调用后立即触发
`closed.collapse.amui`	元素折叠完成后触发