アプリケーションのパターン
ons-navigatorで画面遷移
ページ１とページ２を用意して、ons-navigatorでページ１とページ２の画面遷移の実装例を示します。
1. エディタ画面を開きます。
2. 1つ目のページを追加します。ページの説明を「ページ1」にします。
3. ページがわかりやすいように、ツールバーを追加します。追加する位置はバックグラウンドとコンテンツの間にします。
4. ツールバーに表示されている文字を「1ページ目」に変更します。
5. コンテンツにボタンを追加します。
6. 2つ目のページを追加します。ページの説明を「ページ2」にします。
7. ページ1と同様にツールバーを追加して、表示されている文字を「2ページ目」に変更します
8. ページ1と同様にコンテンツにボタンを追加します。
9. アプリケーションに移動してナビゲーターを追加します。
10. ナビゲーターのpage属性で、初期表示するページのtemplate-idを選択します。
今回の場合はページ１のtemplate-idである「page1.html」です。
11. これで画面のレイアウトは終わりました。
プラットフォームスイッチャーで動作モードに切り替えます。 
12. 動作モードに切り替えると、ページ1がプレビューされます。
13. ページ１に移動し、ボタンを選択状態にします。
スクリプトウィンドウのイベントタブで、clickイベントの＋ボタンをクリックします。 
14. ここでは「page2Move」というスクリプト名にします。 
15. スクリプトエディタ画面を開きます。 
15. アプリケーションに移動して、ナビゲーターを選択します。
ナビゲーターのid属性の横のボタンを2回押します。 
16. 続けて「.」を入力するとコード補完機能が働くので、pushPageを探して選択します。
17. 遷移先であるページ2のtemplate-idを入力します。
今回の場合は「page2.html」です。 
最終的なスクリプトは以下のようになります。
function page2Move(event) {
/** @type{ons.OnsNavigatorElement} */
const onsNavigator1 = document.getElementById('ons-navigator1');
onsNavigator1.pushPage('page2.html');
}18. スクリプトの保存ボタンをします。 
19. プレビュー画面でページ1のボタンを押すことで、ページ2に移動することを確認します。 
20. ページ2からページ1に戻る処理を実装します。
ページ2のボタンを選択状態にして、clickイベントにスクリプトを追加します。
スクリプト名は「page1Move」にします。 
21. スクリプトエディタ画面でpage1Moveを開き、以下のようにスクリプトを作成します。
先程はpushPageメソッドでしたが、戻る場合はpopPageメソッドを使います。
function page1Move(event) {
/** @type{ons.OnsNavigatorElement} */
const onsNavigator1 = document.getElementById('ons-navigator1');
onsNavigator1.popPage();
}22. スクリプトの保存ボタンを押したあと、プレビュー画面でページ1とページ2が行き来できることを確認します。
ナビゲーターの詳細を知りたい場合はOnsenUIの公式ページを参照してください。
ons-tabbarで画面遷移
ページ１とページ２を用意して、ons-tabbarでページ１とページ２の画面遷移の実装例を示します。
1. エディタ画面を開きます。
2. 1つ目のページを追加します。ページの説明属性を「ページ1」にします。
3. 2つ目のページを追加します。ページの説明属性を「ページ2」にします。
4. ページ1と同様にツールバーを追加して、表示されている文字を「2ページ目」に変更します
5. アプリケーションに移動して、ons-tabbarを追加します。 
6. ons-tabbarにons-tabを２つ追加します。 
7. 1つ目のons-tabを選択して、label属性に「PAGE1」を入力します。
page属性で「page1.html」を選択します。
8. 2つ目のons-tabを選択して、label属性に「PAGE2」を入力します。
page属性で「page2.html」を選択します。
9. プラットフォームスイッチャーでモードを動作モードに変更します。 
10. プレビュー画面でタブをクリックすると、画面が切り替わることが確認できます。 
タブバーの詳細を知りたい場合はOnsenUIの公式ページを参照してください。
ons-splitterでサイドメニューを表示
ページ1、ページ2、メニューページを用意して、ons-splitterでサイドメニューを開き画面遷移する実装例を示します。
1. エディタ画面を開きます。
2. 1つ目のページを追加します。ページの説明属性を「ページ1」にします。
3. 2つ目のページを追加します。ページの説明属性を「ページ2」にします。
4. ページ1と同様にツールバーを追加して、表示されている文字を「2ページ目」に変更します
5. メニューページを追加します。ページの説明属性を「メニュー」にします。
template-idを「menu.html」にします。 
6. コンテンツにons-listを追加します。 
7. ons-listにons-list-itemを追加します。 
8. 今回の場合はサムネイル、タイトル、サブタイトルは不要なので削除します・ 
9. centerにdiv要素を追加します。 
10. 追加したdiv要素の説明属性を「メニューアイテム1」にします。
text属性を「ページ１」にします。 
11. ページ2のためにリストアイテムを複製します。リストアイテムの複製ボタンを２回クリックします。
12. 複製したリストアイテムの配下のメニューアイテム1の説明属性を「メニューアイテム2」にします。
text属性を「ページ2」にします。 
13. アプリケーションに移動して、ons-splitterを追加します。 
14. スプリッターサイドを選択し、page属性に「menu.html」を指定します。 
15. スプリッターコンテンツを選択し、page属性に「page1.html」を指定します。 
16. プラットフォームスイッチャーで動作モードに切り替えます。 
17. プレビュー画面にページ１が表示されます。
プレビュー画面を左から右にスワイプすると、サイドメニューが開くことを確認できます。 
18. まだ画面遷移はできないので、メニューのリストアイテムをクリックしたらページを遷移するスクリプトを作っていきます。
メニューページに移動して、ページ１のリストアイテムを選択状態にします。
clickイベントに「page1Move」スクリプトを設定します。 
page1Moveのスクリプトは以下のようになります。
function page1Move(event) {
/** @type{ons.OnsSplitterContentElement} */
const onsSplitterContent1 = document.getElementById('ons-splitter-content1');
/** @type{ons.OnsSplitterSideElement} */
const onsSplitterSide1 = document.getElementById('ons-splitter-side1');
// スプリッターコンテンツにpage1.htmlを表示
onsSplitterContent1.load('page1.html');
// スプリッターサイドを閉じる
onsSplitterSide1.close();
}19. ページ2のリストアイテムを選択状態にします。
clickイベントに「page2Move」スクリプトを設定します。 
page2Moveのスクリプトは以下のようになります。
function page2Move(event) {
/** @type{ons.OnsSplitterContentElement} */
const onsSplitterContent1 = document.getElementById('ons-splitter-content1');
/** @type{ons.OnsSplitterSideElement} */
const onsSplitterSide1 = document.getElementById('ons-splitter-side1');
// スプリッターコンテンツにpage2.htmlを表示
onsSplitterContent1.load('page2.html');
// スプリッターサイドを閉じる
onsSplitterSide1.close();
}20. プレビュー画面でスワイプしたメニューページのメニューをクリックすることで、画面遷移できることを確認してください。
スプリッターの詳細を知りたい場合はOnsenUIの公式ページを参照してください。