index.html
js/memo.js
js/app.js
jQuery
jQuery Mobile
div
タグの data-role
属性に、page
を指定して、ページを定義します。jQuery Mobile では、このように、 data-role
属性を使用して、各タグの役割を設定します。 data-role
には、他にも、header
、content
、listview
などを設定できます。jQuery Mobile のタグとコンポーネントに関しては、 jQuery Mobile Demo ( 英語ページ ) をご確認ください。index.html
ファイル内のホーム画面の設定は、以下になります。index.html
ファイル内のメモの追加と保存画面の設定は、以下になります。index.html
ファイル内の各メモの詳細を閲覧する画面の設定は、以下になります。app.js
は、アプリ内のさまざまな処理を行う JavaScript ファイルです。initTopPage()
関数を直ちに呼び出します。この関数を使用して、トップページ ( ホーム画面のページ ) の初期化を行います。ここでの初期化処理とは、保存されているメモを取得して、一覧で表示することです ( 取得処理は、memo.js
ファイル内で定義されている getMemoList()
関数を経由して行われます )。アプリの初回起動時など、既存のメモがない場合には、「 No memo found
」 が表示されます 。+Add
ボタンをクリックすると、Add Memo ( メモ追加 ) ページを表示します。メモを入力して Save
ボタンをクリックすると onSaveBtn()
関数を呼び出します。この関数内に記述された addMemo()
関数 ( memo.js
ファイルで定義 ) を経由して、localStorage に入力テキストが保存されます。そして、更新されたメモの一覧をトップページ上に表示します。この関数のソースコードを次に記します。onShowLink()
関数 ( memo.js
ファイルで定義 ) を呼び出します。この関数を使用して、選択したアイテムの詳細閲覧ページとタイトル ( または、内容 ) を表示します。onDeleteLink()
関数を呼び出します。この関数を使用して、削除を続行するかユーザーに確認するメッセージを表示します。OK
をクリックすると、deleteMemo()
関数 ( memo.js
ファイルで定義 ) を経由して、localStorage から選択したアイテムを削除します。そして、更新したメモの一覧を、トップページ上に表示します。memo.js
ファイルは、localStorage に対する一連のデータ処理を行う JavaScript ファイルです。このファイル内で、次の 4 つの関数を定義しています。getMemoList()
: localStorage に保存されたメモの一覧を取得します。saveMemoList()
: メモの一覧を localStorage に保存します。AddMemo()
: 新規のメモを一覧に追加して、localStorageに新規の一覧を保存します。このとき、 saveMemoList()
関数を使用します。deleteMemo()
: メモの一覧から指定されたメモを削除して、localStorageに削除後の一覧を保存します。このとき、 saveMemoList()
関数を使用します。