摺疊面板的改進【Amaze UI】
阿新 • • 發佈：2019-02-02
摺疊面板或者說摺疊列表在移動端的使用非常廣泛，不僅可以讓頁面渲染地更簡潔，而且使用起來也是很大方，很實用。在做專案的過程中，我應用到了這個功能，進行了改進並應用，接下來詳細講解。
結果展示：
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程式碼，我為了方便，對每個單獨的摺疊進行了修改，到後面可以進行整合，不用單獨分開寫。
其中涉及到的方法在Amaze UI的官網上也能夠看到。<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>
| 事件 | 描述 |
|---|---|
open.collapse.amui |
open 方法被呼叫時立即觸發 |
opened.collapse.amui |
元素完全展開後觸發 |
close.collapse.amui |
close 方法被呼叫後立即觸發 |
closed.collapse.amui |
元素摺疊完成後觸發 |