折叠面板的改进【Amaze UI】

来源：互联网发布：网络招聘注意事项编辑：程序博客网时间：2024/05/01 22:06

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

结果展示：

html页面代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!--自动适应移动屏幕-->    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <!--优先使用webkit内核渲染-->    <meta name="renderer" content="webkit">    <!--不要被百度转码-->    <meta http-equiv="Cache-Control" content="no-siteapp"/>    <title>Title</title>    <!--以下才是引入amazeui资源-->    <link href="css/amazeui.css" rel="stylesheet">    <link href="css/折叠面板.css" rel="stylesheet">    <!--引入js的时候要注意，必须先引入jQuery，再引入amazeui，因为这个框架是基于jQuery开发的-->    <script src="js/jquery-3.1.0.min.js" language="JavaScript" charset="utf-8"></script>    <!--以下才是引入amazeui资源-->    <script src="js/amazeui.js" language="JavaScript" charset="utf-8"></script></head><body><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-margin-left-sm"></i>            首页        </a>    </li>    <li class="am-panel">        <a id="web" data-am-collapse="{parent: '#collapase-nav-1', target: '#web-nav'}">            <i class="am-margin-left-sm"></i> 前端开发            <i id="web-icon" class="am-icon-angle-right am-fr am-margin-right"></i>        </a>        <ul class="am-list am-collapse admin-sidebar-sub" id="web-nav">            <li><a href="#"><i class="am-margin-left-sm"></i> JavaScript </a></li>            <li><a href="#"><i class="am-margin-left-sm"></i> jQuery </a></li>            <li><a href="#"><i class="am-margin-left-sm"></i> HTML5 </a></li>        </ul>    </li>    <li class="am-panel">        <a id="bg" data-am-collapse="{parent: '#collapase-nav-1', target: '#bg-nav'}">//这个target指向的是折叠面板中的id            <i class="am-margin-left-sm"></i> 后台开发            <i id="bg-icon" class="am-icon-angle-right am-fr am-margin-right"></i>        </a>        <ul class="am-list am-collapse admin-sidebar-sub" id="bg-nav">//id的名字与前面的target是一样的            <li><a href="#"><span class="am-margin-left-sm"></span> Python </a></li>            <li><a href="#"><span class="am-margin-left-sm"></span> PHP </a></li>            <li><a href="#"><span class="am-margin-left-sm"></span> J2EE </a></li>        </ul>    </li>    <li class="am-panel">        <a id="database"data-am-collapse="{parent: '#collapase-nav-1', target: '#database-nav'}">            <i class="am-margin-left-sm"></i> 数据库            <i id="database-icon" class="am-icon-angle-right am-fr am-margin-right"></i>        </a>        <ul class="am-list am-collapse admin-sidebar-sub" id="database-nav">            <li><a href="#"><span class="am-margin-left-sm"></span> MySQL </a></li>            <li><a href="#"><span class="am-margin-left-sm"></span> NoSQL</a></li>        </ul>    </li></ul></body></html>

改进：

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

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

<script>        window.onload=function(){            $('#web-nav').on('open.collapse.amui', function() {//open方法被调用时立即触发                $("#web #web-icon").attr("class","am-icon-angle-down am-fr am-margin-right");            }).on('close.collapse.amui', function() {//close方法调用时立即触发                $("#web #web-icon").attr("class","am-icon-angle-right am-fr am-margin-right");            });            $('#bg-nav').on('open.collapse.amui', function() {                $("#bg #bg-icon").attr("class","am-icon-angle-down am-fr am-margin-right");            }).on('close.collapse.amui', function() {                $("#bg #bg-icon").attr("class","am-icon-angle-right am-fr am-margin-right");            });            $('#database-nav').on('open.collapse.amui', function() {                $("#database #database-icon").attr("class","am-icon-angle-down am-fr am-margin-right");            }).on('close.collapse.amui', function() {                $("#database #database-icon").attr("class","am-icon-angle-right am-fr am-margin-right");            });        }    </script>

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

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

1 0