PhoneGap Buildで作るスマートフォン用メモ帳アプリ

個別メモへのClickイベント登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メモ一覧画面にリスト表示した、それぞれの項目に対してClickイベントを登録する方法について解説致します。
講師:
03:48

字幕

このレッスンでは メモを一覧画面に リスト表示したそれぞれの項目に対して Clickイベントを登録する 方法について解説いたします まずは ダウンロードしてきたこちらのー list_click_event という フォルダの中に入っているー こちらの jsフォルダの中の app.js ファイルをエディタで開いてください そして これが そのファイルを エディタで開いた状態です このファイルを使いながら 今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう それではまず 前回のレッスンのおさらいです 前回のレッスンでは こちらで 作成した 初期のメモデータ こちらを実際に こちらの一覧画面に 表示させる方法について 解説いたしました 今回は こちらで リスト形式で表示された それぞれのメモの項目に対して Clickイベントを登録してー それぞれの メモの個別詳細画面を表示 するための準備を 行っていきたいと思います それでは こちらの画面で該当する プログラムの部分を見ていきたいと思います こちらの画面の中で この部分ですね この部分が今回リストにClickイベントを 登録する処理となっています それでは 具体的にどのように Clickイベントを登録しているかー 確認していきたいと思います まずは $(document) と書いて . on と書きます そして 括弧 そして ここで括弧閉じる その中の引数に 'click' と書いて , その後 'ulクラスのmemoList その中の li タグさらに その中の a タグという風に Clickイベントを登録したい 要素を指定しています そして その後に function ( ) と書いて そして こちらの波括弧 波括弧閉じるの間に 具体的な処理を書いていきます 通常こちらのように on clickとして イベントを登録する際には こちらの頭の $ 括弧 括弧閉じるの中には こちらの記述を行う場合が多いのですが 今回の場合は 動的に 生成されてくる li 要素の中のー a タグに対してイベントを 登録する必要があるため このように $ (document) と書いて そして こちらの on の第二引数の所に 実際登録したい要素を書いておきます それではこちらの function ()の 波括弧の中の処理を見ていきます まず こちらの 一文ですね $ (this) . そして blur 括弧 括弧閉じる と ; こうすることによって こちらの要素をー クリックした時のフォーカスを 意図的に外すようにしています その後この return false; は こちらをクリックした時にー 本来 実行されるはずの a タグの 効果を打ち消すために このように 記述しています この記述がないと 正常に 動作しなくなるので注意してください このように書くことで ここに 表示されているリンク要素に対して Clickイベントを 登録することができました 以上で レッスンは終了です 今回は メモ一覧画面にリスト表示した それぞれの項目に対してー Clickイベントを登録する 方法について解説いたしました 以降のレッスンでは Clickイベントを 登録したメモ一覧画面のそれぞれの項目を クリックした際に 実際に メモ詳細画面にー 画面を遷移させる方法について 解説 いたしますので そちらも併せてご覧ください

PhoneGap Buildで作るスマートフォン用メモ帳アプリ

PhoneGap Buildを使えば、HTMLやCSS、JavaScriptを使って作成したコンテンツを簡単にモバイル用アプリに変換することができます。このコースではPhoneGap Buildを使ってiOSやAndroid端末に対応したメモ帳アプリを作る方法を学びます。アプリのビルドや実機端末へのインストール、各種機能の実装などについても説明します。

1時間38分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。