jQuery Mobile」タグアーカイブ

列車時刻表(10) – 乗車予定リストをアコーディオン表示する

列車時刻表の作成を継続する。これまで、保存した乗車予定は listview を使って一覧を表示してきたが、項目が多くなりそうなので、accordion で表示するように変更する。 各折り畳みブロックのヘッダ(‘ … 続きを読む

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

jQuery Mobileのアコーディオン(collapsible set)に動的に項目を追加する

jQuery Mobileのアコーディオンを使う際の注意点。リストビューと同様、項目追加が完了したタイミングで、表示を更新する必要がある。アコーディオンでは、以下の2つの要素に対して更新を行う。collapsible は … 続きを読む

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

jQuery Mobileのアコーディオンを使う

jQuery Mobileのアコーディオン(開閉可能なブロック)を使ってみる。 基本的な使い方 各ブロックを’collapsible’で指定し、閉じたときのタイトルをヘッダ要素(h1..h6)で記 … 続きを読む

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

列車時刻表(9) – データストアに保存した乗車予定を表示する

前記事に引き続いて列車時刻表を作成する。これまで、検索した結果(乗車予定)をメモリ上に保持してきたが、GAE(Google App Engine)のデータストアに保存するようにし、あとで確認する画面を用意する。 乗車予定 … 続きを読む

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

jQuery Mobileでセレクトメニューを使う

jQuery Mobileでセレクトメニューを使う方法。HTML標準のselect要素は 自動的に jQuery Mobileのインターフェースに変換される。 基本的な使用法 標準HTMLのselect要素を記述すると以 … 続きを読む

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

列車時刻表(7) – 乗車予定画面への遷移(共通フッタの利用)

前記事に引き続いて、乗車予定一覧画面への遷移を追加する。これまでのコーディングで、「列車時刻表画面」「駅時刻表画面」から乗車・下車アクションを実行したタイミングで乗車予定一覧画面に遷移していたが、それ以外の画面からも一覧 … 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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