DropLab · Gitlab 中文文檔

# DropLab > 原文：[https://docs.gitlab.com/ee/development/fe_guide/droplab/droplab.html](https://docs.gitlab.com/ee/development/fe_guide/droplab/droplab.html) * [Usage](#usage) * [Static data](#static-data) * [Explicit instantiation](#explicit-instantiation) * [Dynamic data](#dynamic-data) * [Internal selectors](#internal-selectors) * [Internal events](#internal-events) * [Plugins](#plugins) * [Usage](#usage-1) * [Documentation](#documentation) * [Development](#development) # DropLab[](#droplab "Permalink") 滿足您所有自定義下拉菜單需求的通用下拉菜單. ## Usage[](#usage "Permalink") 只需添加`data-dropdown-trigger` HTML 屬性即可使用 DropLab. 此屬性使我們能夠找到下拉菜單的"觸發" *（切換）* ，無論是按鈕，鏈接還是輸入. `data-dropdown-trigger`應該是 DropLab 可以用來查找觸發器的下拉列表的 CSS 選擇器. 您還應該添加`data-dropdown`屬性以聲明下拉列表. 該值無關緊要. DropLab 類沒有副作用，因此在 DOM 準備就緒時，必須始終調用`.init` . `DropLab.prototype.init`的參數與`DropLab.prototype.addHook`相同. 如果不提供任何參數，它將全局查詢并實例化所有與 droplab 兼容的下拉菜單. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown>  <ul> ``` ``` const droplab = new DropLab(); droplab.init(); ``` As you can see, we have a “Toggle” link, that is declared as a trigger. It provides a selector to find the dropdown list it should control. ### Static data[](#static-data "Permalink") 您可以添加靜態列表項. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown> <li>Static value 1</li> <li>Static value 2</li> <ul> ``` ``` const droplab = new DropLab(); droplab.init(); ``` ### Explicit instantiation[](#explicit-instantiation "Permalink") 您可以使用`DropLab.prototype.init`方法將 trigger 和 list 元素作為構造函數參數傳遞，以返回 DropLab 的非全局實例. ``` <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown>  <ul> ``` ``` const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); const droplab = new DropLab(); droplab.init(trigger, list); ``` 您還可以使用`DropLab.prototype.addHook`將掛鉤添加到現有的 DropLab 實例. ``` <a href="#" data-dropdown-trigger="#auto-dropdown">Toggle</a> <ul id="auto-dropdown" data-dropdown><ul> <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown><ul> ``` ``` const droplab = new DropLab(); droplab.init(); const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); droplab.addHook(trigger, list); ``` ### Dynamic data[](#dynamic-data "Permalink") 將`data-dynamic`添加到下拉元素將啟用動態列表呈現. 您可以使用提供的數據對象的鍵對列表項進行模板化. 使用車把語法`{{ value }}`使 HTML 轉義該值. 使用`<%= value %>`語法可以簡單地插值. 使用`<%= value %>`語法評估該值. 將對象數組傳遞給`DropLab.prototype.addData`將為該 DropLab 實例跟蹤的所有`data-dynamic`下拉列表呈現該數據. ``` <a href="#" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> ``` ``` const droplab = new DropLab(); droplab.init().addData([{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` 或者，您可以指定一個特定的下拉菜單，以將數據添加到該數據，但將數據作為第二個參數傳遞，并將 trigger 元素的`id`作為第一個參數傳遞. ``` <a href="#" data-dropdown-trigger="#list" id="trigger">Toggle</a> <ul id="list" data-dropdown data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> ``` ``` const droplab = new DropLab(); droplab.init().addData('trigger', [{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` 這使您可以輕松混合靜態和動態內容，即使使用一個觸發器也是如此. 請注意，在有關`data-dropdown`屬性的范圍內使用范圍來捕獲兩個下拉列表，其中之一是動態的. ``` <input id="trigger" data-dropdown-trigger="#list"> <div id="list" data-dropdown> <ul> <li><a href="#">Static item 1</a></li> <li><a href="#">Static item 2</a></li> </ul> <ul data-dynamic> <li><a href="#" data-id="{{id}}">{{text}}</a></li> </ul> </div> ``` ``` const droplab = new DropLab(); droplab.init().addData('trigger', [{ id: 0, text: 'Jacob', }, { id: 1, text: 'Jeff', }]); ``` ## Internal selectors[](#internal-selectors "Permalink") DropLab 添加了一些 CSS 類，以幫助降低集成的障礙. 例如： * 將`droplab-item-selected` CSS 類添加到通過單擊鼠標或 Enter 鍵選擇的項目中. * 將`droplab-item-active` CSS 類添加到使用箭頭鍵導航選擇的項目中. * 您可以將`droplab-item-ignore` CSS 類添加到您不想選擇的任何項目中. 例如，一個不應為交互式的`<li class="divider"></li>`列表分隔符元素. ## Internal events[](#internal-events "Permalink") DropLab 使用一些自定義事件來幫助降低集成障礙. 例如： * 單擊`li`列表項時會觸發`click.dl`事件. 當使用鍵盤選擇了列表項時，也會觸發該事件. 當它也燒`HookButton`按鍵（注冊`button`標簽或`a`標簽觸發）. * 所述`input.dl`當事件被觸發`HookInput` （注冊`input`標簽觸發）觸發`input`事件. * 該`mousedown.dl`當事件被觸發`HookInput`觸發`mousedown`事件. * 該`keyup.dl`當事件被觸發`HookInput`觸發`keyup`事件. * 該`keydown.dl`當事件被觸發`HookInput`觸發`keydown`事件. 這些自定義事件將`detail`對象添加到提供一些潛在有用數據的原始`Event`對象. ## Plugins[](#plugins "Permalink") 插件是添加鉤子后被注冊為要執行的對象（實例化 droplab 觸發器和下拉菜單時）. 如果未檢測到模塊 API，則該庫將像使用`window.DropLab`那樣回退，并添加`window.DropLab.plugins.PluginName` . ### Usage[](#usage-1 "Permalink") 要使用插件，您可以將它們作為`DropLab.prototype.init`或`DropLab.prototype.addHook`的第三個參數傳遞給數組. 一些插件需要配置值，可以將 config 對象作為第四個參數傳遞. ``` <a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a> <ul id="list" data-dropdown><ul> ``` ``` const droplab = new DropLab(); const trigger = document.getElementById('trigger'); const list = document.getElementById('list'); droplab.init(trigger, list, [droplabAjax], { droplabAjax: { endpoint: '/some-endpoint', method: 'setData', }, }); ``` ### Documentation[](#documentation "Permalink") * [Ajax plugin](plugins/ajax.html) * [Filter plugin](plugins/filter.html) * [InputSetter plugin](plugins/input_setter.html) ### Development[](#development "Permalink") 當為 droplab 觸發器+下拉菜單初始化插件時，DropLab 將調用插件的`init`函數，因此必須在插件中實現. ``` class MyPlugin { static init() { this.someProp = 'someProp'; this.someMethod(); } static someMethod() { this.otherProp = 'otherProp'; } } export default MyPlugin; ```