碼上歡樂
相關內容    簡體    繁體

amazeui學習筆記--js插件（UI增強3）--折疊面板Collapse

本文轉載自   查看原文   2018-05-09 15:18   1212    1_amaze ui/ amaze學習課程

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.amui open 方法被調用時立即觸發
opened.collapse.amui 元素完全展開后觸發
close.collapse.amui close 方法被調用后立即觸發
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 
<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.amui open 方法被調用時立即觸發
opened.collapse.amui 元素完全展開后觸發
close.collapse.amui close 方法被調用后立即觸發
closed.collapse.amui 元素折疊完成后觸發

注意事項

不要在折疊內容的容器上設置垂直的 margin/padding/border 樣式。

jQuery 計算元素高度的方式有點奇葩，暫時只能通過上面的方式規避。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 element-ui Collapse 折疊面板源碼分析整理筆記（十） antd源碼分析之——折疊面板（collapse） js實現折疊面板 elementui的Collapse 折疊面板箭頭修改方向以及位置 vue+ivew使用Collapse 折疊面板把全部面板展開 el-collapse折疊面板組件中的面板內容是el-table，展開的時候高度異常 CSS實現折疊面板 amazeui-js插件-ui增強-日期組件如何使用（把實例做一下） Bootstrap 折疊（Collapse）插件 Bootstrap之折疊（Collapse）插件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM