onsen-ui開始使用onsen-ui


備註

本節概述了onsen-ui是什麼,以及開發人員為什麼要使用它。

它還應該提到onsen-ui中的任何大型主題,並鏈接到相關主題。由於onsen-ui的文檔是新的,您可能需要創建這些相關主題的初始版本。

介紹

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 組件