# JavaScript 使用 data 屬性，將JavaScript應用于 UIkit 的組件。 你只需要在HTML元素中添加 `data-uk-*` 屬性就能使用所有的UIKIT組件，而無需無需編寫一行 JavaScript。這是在 UIkit 中使用任意組件時應當首先考慮的最佳做法。 ### Markup ``` <button data-uk-button>My Button</button> ``` 當然你仍然可以通過使用 JQuery 的 API 來使用這些組件。 ### Markup ``` $(".button").uk("button"); ``` * * * ## AMD 支持 AMD (異步模塊定義) 是一種定義 JavaScript 模塊以及模塊之間的依賴性的方式，因此他們可以通過異步加載的方式來使用。 ### 用法 ``` /* UIkit 核心的簡單請求 */ require("path/to/uikit.js", function(UI){ // UI 是UIkit的全局對象，又名 $.UIkit }); ``` ### 自動加載 UIkit 及附加組件 ``` /* 首先建立 require.js */ requirejs.config({ paths: { "uikit": 'path/to/uikit.js' }, config: { "uikit": { "base": "path/to/uikit_dist_folder" } } }); /* 現在，你可以自動加載UIkit和附加組件了，用逗號隔開。 */ require("uikit!notify,sortable", function(UI){ // 訪問已加載的附加組件: UI.notify, UI.sortable }); ``` * * * ## 覆寫默認的組件設置 調整默認的組件設置是可行的，你可以看一下下面的例子： ### 用法 ``` // 覆寫默認的工具提示設置 UIkit.on('beforeready.uk.dom', function(){ $.extend(UIkit.components.tooltip.prototype.defaults, { pos: 'top', delay: 500, animation: true }); }); ``` * * * ## 監視DOM，通過諸如AJAX的方式自動初始化新添加的組件。 如果你希望通過JavaScript動態地將HTML標簽注入到DOM中，只需要添加 `data-uk-observe` 屬性到一個父元素中，就能自動地初始化UIkit的JavaScript組件。 ### 用法 ``` <div data-uk-observe> <!-- 在此注入你的動態HTML --> </div> ``` ### 通過JavaScript監視元素 ``` UIkit.domObserve('#element', function(element) { /* 適用于元素內部的DOM改變 */ }) ``` * * * ## 基于可見性變化，檢測顯示事件/Check Display event on visibility change. 有時，一些組件，比如 [網格](grid.html) 或 [選項卡](tab.html) 被隱藏在標簽中。這或許是與 [切換器](switcher.html), [模態對話框](modal.html) 或者 [下拉菜單](dropdown.html) 組合使用是發生的。一旦它們變得可見，他們需要被重新計算修改高度或者其他外形尺寸。 為此，添加 `data-uk-check-display` 屬性到需要重新處理的元素中。現在，它們監聽由容器組件觸發的 `display.uk.check` 事件，比如切換器。帶有 `data-uk-margin`, `data-uk-grid-margin` 和 `data-uk-grid-match` 屬性的元素不需要添加這個屬性，因為它此時是默認觸發的。 ### Usage ``` <!-- 一個位于模態對話框、切換器或者下拉菜單中的元素 --> <div id="myelement" data-uk-check-display>...</div> <script> $("#myelement").on('display.uk.check', function(){ // 自定義的代碼，用于調整顯示的高度等 }); </script> ```