jQueryMobileを使う時によく使う基本コード
2011.11.19
いろいろな所から毎回調べるのが面倒なので、自分用にコードをメモします。（調べながら記述しています。随時追記予定。）
大枠のひな形
ページの作成
- 複数ページを繰り返したい場合は、以下のひな形をコピペして使うと楽。
ヘッダー
ページは以下のようにいろいろオプションをつけることができます。
- テーマファイルを指定する
- data-theme=”b”
- 他のページから来た時に自動的に「戻るボタン」を表示
- data-add-back-btn=”true”
- backボタンのテキスト表記をカスタマイズする（デフォルトはBack）
- data-back-btn-text=”戻る”
- ボタンを右につける
- class=”ui-btn-right”
- 2つ目のa要素は自動的に右側に表示されます。
- 戻るボタンを非表示にする
- data-backbtn=”false”
フッター
- フッター要素およびフッター要素の内側に新たな要素（ここではdiv）に対して以下の指定をする
- class=”ui-bar”
テーマの切り替え
- a〜eはjQueryMobileの予約テーマ。
- f〜zを指定すれば、独自のテーマを作ることができる。
data-theme="a"
エフェクト
サイト全体で同じエフェクトを設定したい時は、head要素内に以下のように記述
テキストの…を省略したくない場合
CSSを設定し、htmlに記述する。
.wordbreak{
overflow: visible;
white-space: normal;
}
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
フォーム大枠
フォーム各部品
リストビュー関連
- 以下のコードを参考に不要な部分を削除する
- リストを入れ子にすると、親だけ表示→クリック→子リストを表示になる
- 角丸立体リストにする
- ul要素に対して、data-inset=”true”
- 小見出し表現にする
- ul>li要素に対して、data-role=”list-divider”
- list-dividerにテーマを当てる
- list-dividerと同じ箇所に、data-dividertheme=”a”
- li要素の右上に表示
- ul>li>a要素内に、
2012年12月31日
- カウント数表示
- ul>li>a要素内に、カウント数字
- カウント表示のテーマを変更
- ul要素に、data-count-theme=”a”
- 左側に画像をつける
- ul>li>a要素内にimgタグで画像を配置
- 画像を40*40pxにして左に表示（ただし表示を調整する必要がある）
- ul>li>a>img要素に、class=”ui-li-icon”
- 絞り込み用入力枠を追加出来る
- ul要素に、data-filter=”true”
- 絞り込み用入力枠にプレースホルダーを設定
- data-filterと同じ箇所に、data-filter-placeholder=”キーワード入力”
