今回は、ons-splitterでメニューを表示し、初期化画面に切り替え、買い物リストを初期化する処理を追加します。
※前回より少しずつコードが変わっていますので、ご注意ください。

ons-splitterons-splitter-sideにmenu.htmlを指定し、ons-splitter-contentons-navigatorを配置します。

ツールバー右上のメニューボタンをタップすると、メニューが表示されます。

初期化を選択すると、初期化画面が表示されます。

初期化ボタンをタップすると、初期化メッセージが表示されます。
「はい」をタップすると、買い物リストの配列を初期化してlocalStorageに保存します。

メニューにバックアップやリカバリーの機能を追加すれば、本格的なアプリらしくなります。

マーナ Shupatto(シュパット) コンパクトバッグ L ネイビー

新品価格
¥1,920から
(2019/11/5 10:30時点)

【Monaca】Onsen UI + JavaScriptで買い物リストを作る その3
Tagged on: