月別アーカイブ: 2013年5月

JavaScriptでオブジェクトの配列をフィルタリングする

投稿日: 2013/05/12 作成者: admin

JavaScriptでオブジェクトの配列(普通の配列でもOK)に対し、あるプロパティの値をキーとして、条件を満たす要素のみを抽出したいときは、array.filter() メソッドを使う。(ソートしたい場合は、ここを参照 … 続きを読む →

カテゴリー: Tips | タグ: | コメントする

jQuery Mobileのボタンのテキストをコードで変更する

投稿日: 2013/05/11 作成者: admin

jQuery Mobileでは、以下のHTML要素は自動的に「ボタン」になる。 button要素・input要素 a要素(data-role=”button” を指定) これらはいずれもテキストが … 続きを読む →

カテゴリー: Tips | タグ: | コメントする

jQuery Mobileでページ切替時にアニメーション効果を加える

投稿日: 2013/05/10 作成者: admin

jQuery Mobileでは、ページ切替時にアニメーション効果を加えることができる。具体的には、”fade”,”pop”といった効果が用意されている。サンプルはここで確認 … 続きを読む →

カテゴリー: Tips | タグ: , , | コメントする

列車時刻表の試作(4) – 上り/下り列車の表示 -

投稿日: 2013/05/09 作成者: admin

時刻表の表示の際、上り・下り列車を選択的に表示する。選択にはjQuery Mobileの「チェックボックス」を利用する。似たウィジェットである「ラジオボタン」では、複数の選択肢から1つのオプションしか選べないが、チェック … 続きを読む →

カテゴリー: Development | タグ: , | コメントする

列車時刻表の試作(3) – 曜日の切り替え -

投稿日: 2013/05/08 作成者: admin

時刻表データは｢平日」｢土曜｣「休日」の3種類からなり、現在は路線ごとに1つのJSONファイルに格納している。どの曜日のデータを表示するかはナビゲーションバーにより選択する。 時刻の部分のデータ形式は以下のイメージになっ … 続きを読む →

カテゴリー: Development | タグ: , | コメントする

jQuery Mobileのナビゲーションバーを使う(2) – 変数との関連付け -

投稿日: 2013/05/07 作成者: admin

前記事に引き続いて、ナビゲーションバーを使う。今回は、これを ・クリック(タップ)アクションを変数と結びつける ・各ページで状態(値)を保持する(選択している曜日のボタンをアクティブにする) 方法を考える。 作成したナビ … 続きを読む →

カテゴリー: Development, Tips | タグ: , , | コメントする

jQuery Mobileのナビゲーションバーを使う(1)

投稿日: 2013/05/06 作成者: admin

jQuery Mobileのナビゲーションバーを使ってみる。その名のとおり、本来はヘッダーやフッター内に配置されるページ遷移用のバーだが、 ・位置を固定できる(スクロールしても常に表示される) ・値を保持できる(複数のペ … 続きを読む →

カテゴリー: Development, Tips | タグ: , | 1件のコメント

jQuery Mobileのリストビューで複数のリンク先を指定する

投稿日: 2013/05/05 作成者: admin

jQuery Mobileのリストビューで、1つのアイテム(行)の中に複数のリンク先を指定したいときの実現法。jQuery Mobileでは「分割ボタン」という方法を使う。 例えば、作成中の時刻表で、「路線一覧」からある … 続きを読む →

カテゴリー: Tips | タグ: , | コメントする

jQuery Mobileでコードでページ遷移する

投稿日: 2013/05/04 作成者: admin

jQuery Mobileで作成したページで、コードでページ遷移したいときの方法。 ただし、jQuery Mobileは独自のページ機構を持っているので、ページ遷移といっても本当に新しいページをロードしてくるとは限らない … 続きを読む →

カテゴリー: Tips | タグ: | コメントする

jQuery Mobileのリストビューで動的に次画面を生成する

投稿日: 2013/05/03 作成者: admin

時刻表アプリを作成する際には、一覧から1つの要素を選択して、その要素の詳細を表示する、というパターンを多用している。例えば、最初の画面で「路線一覧｣から1つの路線を選択し、次の画面で選択した路線の「駅」を表示する、という … 続きを読む →

カテゴリー: Tips | タグ: , | コメントする