# 動態網格 創建可排序、可過濾的多列動態網格布局。 動態網格組件允許你利用[網格組件](grid.html)創建一個動態的響應式網格布局。在任何尺寸的設備中，網格單元都將自動地、流動地、無縫地調整自身構建無縫的多列布局。 * * * ## 用法 使用這個組件，添加 `data-uk-grid` 屬性到容器元素。用 [網格組件](grid.html) 中的 `uk-width-*` 或 `.uk-grid-width-*` 類來設置網格單元的寬度。注意 使用此組件需要額外添加 `grid.js` 文件，在`js/components`文件夾中。 ### Example  ### Markup ``` <!-- 這是使用在每個網格單元上使用 uk-width-* 的網格 --> <div data-uk-grid> <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div> <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div> </div> <!-- 這是使用在網格自身使用 uk-grid-width-* 的網格 --> <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid> <div>...</div> <div>...</div> </div> ``` * * * ### 網格排水溝/Grid Gutter 用排水溝將網格單元分開，在data屬性中使用 `{gutter: 20}` 選項即可。此時，排水溝會是20px寬。 ### Example  ### Markup ``` <div data-uk-grid="{gutter: 20}">...</div> ``` * * * ## 過濾 你還可以過濾網格，使其只在頁面中顯示特定的網格單元。You can also filter your grid so that only particular items will be displayed. 為此，添加 `{controls: '#my-id'}` 選項到data屬性指向過濾器的id。每個過濾控制器都必須有 `data-uk-filter` 屬性來定義你想要的過濾分類。你還必須為每個網格單元添加 `data-uk-filter` 屬性以明確其歸屬于哪個分類。使用逗號分隔多段分類。 ### Example  ### Markup 這個例子使用了 [二級導航](subnav.html) 來過濾網格單元。 ``` <!-- Filter Controls --> <ul id="my-id" class="uk-subnav"> <li data-uk-filter=""><a href=""></a></li> <li data-uk-filter="filter-a"><a href=""></a></li> <li data-uk-filter="filter-b"><a href=""></a></li> </ul> <!-- Dynamic Grid --> <div data-uk-grid="{controls: '#my-id'}"> <div data-uk-filter="filter-a">...</div> <div data-uk-filter="filter-b">...</div> <div data-uk-filter="filter-a,filter-b">...</div> </div> ``` * * * ## 排序 升序排列網格單元，添加 `{controls: '#my-id'}` 選項到data屬性指向排序控件的id。 每個控件需要帶有 `data-uk-sort` 屬性以及一個自定義值以指明你想要進行排序的種類，比如 `data-uk-sort="my-category"`。同樣，你需要添加帶有指定分類名稱的data屬性到每個網格單元中。 自定義的值包含應該被排序的數據，比如 `data-my-category="my-data"`。 網格單元默認按升序排序。要實現降序，只需添加 `:desc` 到排序控件的data屬性值中，比如 `data-uk-sort="my-category:desc"`。 ### Example  ### Markup ``` <ul id="my-id" class="uk-subnav"> <li data-uk-sort="my-category"><a href=""></a></li> <li data-uk-sort="my-category:desc"><a href=""></a></li> </ul> <div data-uk-grid="{controls: '#my-id'}"> <div data-my-category="a">...</div> <div data-my-category="b">...</div> </div> ``` * * * ### 多個類別 要使用多個類別來進行網格單元的排序，為每個類別使用不同的名字就行了。  ### Markup ``` <ul id="my-id" class="uk-subnav"> <li data-uk-sort="my-category"><a href=""></a></li> <li data-uk-sort="my-category:desc"><a href=""></a></li> <li data-uk-sort="my-category2"><a href=""></a></li> <li data-uk-sort="my-category2:desc"><a href=""></a></li> </ul> <div data-uk-grid="{controls: '#my-id'}"> <div data-my-category="a" data-my-category2="8">...</div> <div data-my-category="b" data-my-category2="7">...</div> </div> ``` * * * ## JavaScript 選項 | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `colwidth` | integer | auto | 列寬 | | `animation` | boolean | true | 是否開啟列刷新的動畫 | | `duration` | integer | 200 | 動畫持續時間 | | `gutter` | integer | 0 | 列與列之間的排水溝 | | `controls` | string | false | 聯結過濾器或排序控件的 CSS 選擇器 | | `filter` | string | '' | 單元過濾器 | ### 手動初始化 ``` var grid = UIkit.grid(element, { /* options */ }); ``` ### Events | 名稱 | 參數 | 描述 | | --- | --- | --- | | `beforeupdate.uk.grid` | event, children | 網格刷新前觸發 | | `afterupdate.uk.grid` | event, children | 網格刷新后觸發 | ### Example 用jQuery監聽beforeupdate事件: ``` $(function() { $('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, children) { // your event-handling goes here }); }); ```