コース: WebアプリのためのHTML5 API 講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

データの追加と削除を実装する

データの追加と削除を実装する

このレッスンでは jQuery Mobile を使って モバイルWebアプリケーションにおける このレッスンでは jQuery Mobileを使って モバイル Web アプリケーションにおける データの追加と削除を 実装する方法について学びます 現在開いているサンプルは index.html という html です ここはメインページで コースの一覧が表示されています 各項目をクリックすると 先程とは別の div 要素を取得し表示されます 現在表示されている div の ID は itemPanel として index.html の ハッシュとして表示されています この div は itemPanel という名前で 選択したコースの詳細を表示します このページではコース ID が 1 である コースの詳細を表示しています 詳細とは コース名 ID 期間 そして 認定を受けられるかどうかのフラグです ここでは表示しているコースを 削除する事も出来ます メインページに戻り左上の 「新しいコースを作成」 ボタン をクリックする事で 新しいコースを作成してみましょう ここでは COBOL の コースを作ってみます 期間は1日で 認定は No のまま 保存します 新しく COBOL が追加されました HTML をエディターで開いてみると その中で JavaScript が 二つリンクされています 一つ目は data.js で これはローカルストレージに コースのデータを読み書きする為のものです このレッスンで解説するのは二つ目の uibehavior.js です これは全てのイベント処理 ユーザーインターフェース上の イベントを管理するものです それでは実際のコードを見ていきましょう uibehavior.js を開きます コースを作成したり削除したりする為の 二つの関数を見ていきましょう 「新しいコースを作成」 ボタンを クリックすると 少し下にある createNewCourse 関数 この関数が呼び出されます この関数が呼び出されるイベントは 更にその下 110 行目に定義されています ここでは newCourseForm という フォームが送信されると createNewCourse 関数が 呼び出される という定義になっています この newCourseForm…

目次