折叠面板的改进【Amaze UI】

折叠面板或者说折叠列表在移动端的使用非常广泛,不仅可以让页面渲染地更简洁,而且使用起来也是很大方,很实用。在做项目的过程中,我应用到了这个功能,进行了改进并应用,接下来详细讲解。

结果展示:

折叠面板的改进【Amaze UI】_第1张图片

html页面代码:




    
    
    
    
    
    
    
    
    
    Title
    
    
    
    
    
    
    




改进:

我把右边“<”的图标进行了修改,希望能够在点击的时候变成“^”,然后再点击收回的时候又变回原来的图标。

所以我自己写了一段js代码,我为了方便,对每个单独的折叠进行了修改,到后面可以进行整合,不用单独分开写。

其中涉及到的方法在Amaze UI的官网上也能够看到。

事件 描述
open.collapse.amui open 方法被调用时立即触发
opened.collapse.amui 元素完全展开后触发
close.collapse.amui close 方法被调用后立即触发
closed.collapse.amui 元素折叠完成后触发

你可能感兴趣的:(Amaze,UI)