今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ページ遷移とデータ表示を実装する
このレッスンでは、jQuery Mobileを使って、 モバイルウェブアプリケーションのページ遷移と それに伴うデータ表示を実装する方法について学びます。 現在開いているサンプルはIndex.htmlというhtmlです。 ここはメインページで、コースの一覧が表示されています。 各項目をクリックすると、 先ほどとは別のdiv要素を取得し、表示されます。 現在表示されているdivのidは、 index.htmlのハッシュとして表示されています。 このdivはitemPanelと言う名前で、 選択したコースの詳細を示しています。 このページでは「コースid」が「1」であるコースの詳細を示しています。 詳細とは、コース名、id、そしてコースの期間、 認定を受け入れられるかどうかのフラグです。 ここでは、表示しているコースを削除することもできます。 右上の削除ボタンを使います。 メインページに戻り、左上の「新しいコースを作成」ボタンをクリックすることで、 新しいコースを作成できます。 例えば、COBOLのコースを作ってみましょう。 期間は1日で認定は無し。保���します。 一覧にCOBOLのコースが追加されました。 このレッスンでは、 この一連の動きの背後で動いているコードについて解説して行きます。 htmlをエディタで開いてみると、 2つのJavaScriptファイルがリンクされていることが分かります。 1つ目はdata.jsです。 これは、ローカルストレージにデータを読み書きするためのスクリプトです。 このレッスンで解説するのは、2つ目のuibehavior.jsです。 これはすべてのイベント処理、 ユーザーインターフェイス上のイベントを管理するためのものです。 実際のコードを見ていきましょう。 uibehavior.jsを開きます。 まず第一に、 現在表示しているコースのidを格納するためのグローバル変数を作成します。 次に、少し下にスクロールし、 初期化時に実行されるコードを見てみましょう。 $(document).readyで始まるこのコードは、 jQueryにおいて、ウェブページの読み込みが完了した後に この中身にあるコードが実行されるためのイベントです。 ここではloadCourseFromDataという関数を実行しています。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。