可擴(kuò)展面板

2018-05-25 00:45 更新

toggle(item)調(diào)用方式

  • 通過(guò)自定義屬性調(diào)用
  • 通過(guò) JavaScript 調(diào)用


相關(guān)閱讀

Material Design 可擴(kuò)展面板設(shè)計(jì)規(guī)范


樣式

完整 HTML 結(jié)構(gòu)

這個(gè)示例包含了所有可以包含的 HTML 元素。

www.mdui.org - 可擴(kuò)展面板 - 完整 HTML 結(jié)構(gòu)

在線運(yùn)行


最簡(jiǎn) HTML 結(jié)構(gòu)

上例中的部分元素并不是必須的,下面的示例只包含必須的 HTML 元素。

www.mdui.org - 可擴(kuò)展面板 - 最簡(jiǎn) HTML 結(jié)構(gòu)

在線運(yùn)行


默認(rèn)打開(kāi)的面板項(xiàng)

在 <div class="mdui-panel-item"></div> 元素上添加類 .mdui-panel-item-open 即可使該面板項(xiàng)處于默認(rèn)打開(kāi)狀態(tài)。

www.mdui.org - 可擴(kuò)展面板 - 默認(rèn)打開(kāi)的面板項(xiàng)

在線運(yùn)行


移除面板間距

在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-gapless 即可移除打開(kāi)的面板和其他面板之間的間距。

www.mdui.org - 可擴(kuò)展面板 - 移除面板間距

在線運(yùn)行


彈出面板

在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-popout 即可使打開(kāi)的面板有彈出效果。

www.mdui.org - 可擴(kuò)展面板 - 彈出面板

在線運(yùn)行


面板嵌套

可擴(kuò)展面板可以互相嵌套。

www.mdui.org - 可擴(kuò)展面板 - 面板嵌套

在線運(yùn)行


調(diào)用方式

通過(guò)自定義屬性調(diào)用

使用該方式無(wú)需編寫 JavaScript 代碼。只需在 <div class="mdui-panel"></div> 元素上添加 mdui-panel="options" 屬性即可激活該插件。

在線運(yùn)行


通過(guò) JavaScript 調(diào)用

實(shí)例化組件:

// selector 為 .mdui-panel 元素的 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù),見(jiàn)下面的參數(shù)列表
var inst = new mdui.Panel(selector, options);

在線運(yùn)行


參數(shù)

 參數(shù)名 類型 默認(rèn)值 描述
 accordion boolean false 是否啟用手風(fēng)琴效果。
  • 為 true 時(shí),最多只能有一個(gè)面板項(xiàng)處于打開(kāi)狀態(tài),打開(kāi)一個(gè)面板項(xiàng)時(shí)會(huì)關(guān)閉其他面板項(xiàng)。
  • 為 false 時(shí),可同時(shí)打開(kāi)多個(gè)面板項(xiàng)。


方法

 方法名 描述
 open(item) 打開(kāi)面板項(xiàng)。
  • item:面板項(xiàng)的索引號(hào)、或者 DOM 元素、或者 CSS 選擇器。
 close(item) 關(guān)閉面板項(xiàng)。
  • item:面板項(xiàng)的索引號(hào)、或者 DOM 元素、或者 CSS 選擇器。
 toggle(item) 切換面板項(xiàng)狀態(tài)。
  • item:面板項(xiàng)的索引號(hào)、或者 DOM 元素、或者 CSS 選擇器。
 openAll() 打開(kāi)所有面板項(xiàng)。該方法僅在 accordion 為 false 時(shí)有效。
 closeAll() 關(guān)閉所有面板項(xiàng)。


事件

 事件 描述 目標(biāo) 參數(shù)
 open.mdui.panel 面板項(xiàng)開(kāi)始打開(kāi)動(dòng)畫時(shí),事件將被觸發(fā)。 <div class="mdui-panel-item"></div> event.detail.inst:實(shí)例
 opened.mdui.panel 面板項(xiàng)結(jié)束打開(kāi)動(dòng)畫時(shí),事件將被觸發(fā)。 <div class="mdui-panel-item"></div> event.detail.inst:實(shí)例
 close.mdui.panel 面板項(xiàng)開(kāi)始關(guān)閉動(dòng)畫時(shí),事件將被觸發(fā)。 <div class="mdui-panel-item"></div> event.detail.inst:實(shí)例
 closed.mdui.panel 面板項(xiàng)結(jié)束關(guān)閉動(dòng)畫時(shí),事件將被觸發(fā)。 <div class="mdui-panel-item"></div> event.detail.inst:實(shí)例


CSS 類名列表

 類名 效果
 .mdui-panel 定義一個(gè)可擴(kuò)展面板。
 .mdui-panel-gapless 移除打開(kāi)的面板和其他面板之間的間距。
 .mdui-panel-popout 使打開(kāi)的面板具有彈出效果。
 .mdui-panel-item 定義一個(gè)可擴(kuò)展面板的面板項(xiàng)。
 .mdui-panel-item-open 使面板項(xiàng)默認(rèn)打開(kāi)。
 .mdui-panel-item-header 定義一個(gè)面板項(xiàng)的頭部。
 .mdui-panel-item-title 定義面板項(xiàng)頭部的標(biāo)題。
 .mdui-panel-item-summary 定義面板項(xiàng)頭部的概要。
 .mdui-panel-item-arrow 定義面板項(xiàng)的展開(kāi)收起圖標(biāo)。
 .mdui-panel-item-body 定義面板項(xiàng)內(nèi)容。
 .mdui-panel-item-actions 定義面板項(xiàng)的操作欄。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)