onsen-uionsen-uiを使い始める


備考

このセクションでは、onsen-uiの概要、および開発者がそれを使用する理由について概要を説明します。

また、温泉内の広いテーマについても触れ、関連するトピックにリンクしてください。 onsen-uiのドキュメンテーションは新しいので、これらの関連トピックの初期バージョンを作成する必要があります。

前書き

Onsen UIは、オープンソースのフレームワークで、ネイティブのようなパフォーマンスでハイブリッドアプリケーションを構築するのに役立ちます。 AngularJS(1&2)、ReactJS、jQueryなどのよく知られているJavaScriptフレームワークと一緒に使用できます。

プロジェクトでの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 コンポーネントのいずれかを使用できます