jQuery Mobile アイコン

❮ 前章へ 次章へ ❯

jQuery アイコン

jQuery Mobile の <a> と <button> 要素にアイコンを追加するには、アイコン・クラスを使用して、 次のように配置します(唯一の例外は、ナビゲーションバーのボタンで、もっと下に表示されます)

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a> Try it

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button> Try it

<input> ボタンにアイコンを追加するには、data-icon 属性を使用します:

<input type="button" value="Refresh page" data-icon="refresh"> Try it

ナビゲーションバーのボタンにアイコンを追加するには、data-icon 属性を使用します:

<a href="#anylink" data-icon="refresh">Refresh Page</a> Try it

リストボタンにアイコンを追加するには、<li> の data-icon 属性を使用します:

<li data-icon="refresh"><a href="#">Click me</a></li> Try it

下に、jQuery Mobile が提供するすべてのアイコンをリストします:

説明 アイコン
action アクション(矢印は時計回りにボックスの外を指す) Try it
アラート Alert Try it
audio オーディオ/サウンド/スピーカー Try it
arrow-d-l 左下を指す矢印 Try it
arrow-d-r 右下を指す矢印 Try it
arrow-u-l 左上を指す矢印 Try it
arrow-u-r 右上を指す矢印 Try it
arrow-l 左向き矢印 Try it
arrow-r 右向きの矢印 Try it
arrow-u 上向き矢印 Try it
arrow-d 下向き矢印 Try it
back 戻る(反時計回りの上向き曲線の矢印) Try it
bars バー(互いの上に3本の横バー) Try it
bullets 中点 (互いの上に3つの横バー付き中点) Try it
calendar カレンダ Try it
camera カメラ Try it
carat-d 下向きカラット Try it
carat-l 左向きカラット Try it
carat-r 右向きカラット Try it
carat-u 上向きカラット Try it
check チェックマーク Try it
clock 時計 Try it
cloud Try it
comment コメント Try it
delete 削除 (X) Try it
edit 編集 / 鉛筆 Try it
eye Try it
forbidden 禁止記号 Try it
forward 前に Try it
gear 歯車 Try it
grid グリッド Try it
heart 心 / 愛のシンボル Try it
home ホーム Try it
info 情報 Try it
location 場所 / GPS Try it
lock ロック / 南京錠 Try it
mail メール / 手紙 Try it
minus マイナス Try it
navigation ナビゲーション Try it
phone 電話 Try it
power 電源 (On/off) Try it
plus プラス Try it
recycle リサイクル Try it
refresh リフレッシュ Try it
search 検索 Try it
shop ショップ / Pag / 財布 Try it
star Try it
tag タグ Try it
user ユーザ / 人 Try it
video ビデオカメラ Try it

❮ 前章へ 次章へ ❯