0017

jQueryMobileを使う時によく使う基本コード

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”

テーマの切り替え

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=”キーワード入力”