Onsen UI 介紹

Created: November-22, 2018

Onsen UI 是一個開源框架，可幫助你構建具有原生效能的混合應用程式。它可以與幾個眾所周知的 JavaScript 框架一起使用，例如 AngularJS（1 和 2），ReactJS 和 jQuery。

在專案中載入 OnsenUI 就像在 index.html 檔案中編寫 HTML 的一些標準標記一樣簡單：

<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <!-- load Onsen structure CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
        <!-- load Onsen theme CSS file -->
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
        <!-- load Onsen main Javascript file -->
        <script src="lib/onsen/js/onsenui.js"></script>
        <script>
          ons.ready(function() {
            // Init code here
          });
        </script>
      </head>
      <body>
        <ons-navigator>
          <ons-page>
            Hello World!
          </ons-page>
        </ons-navigator>
      </body>
    </html>

ons.ready 函式是主要功能，可以在 Onsen UI 初始化完成時安全地告訴我們。然後，你可以使用任何 OnsenUI 元件。