jQuery Mobile逆引きリファレンス
jQuery Mobileページでアイコン付きのボタンを配置するには？
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
別稿「jQuery Mobileページにボタンを配置するには？」に続いて、ボタンに関する話題です。本稿では、アイコン付きのボタンをレイアウトする方法について紹介します。
アイコンを指定する基本
ボタンにアイコンを付与するには、ui-icon-xxxxx／ui-btn-icon-*****スタイルクラスを利用します。「xxxxx」はアイコンの種類を、「*****」はアイコンの表示位置を、それぞれ意味します。具体的な設定値は、以下の通りです*1。
- *1 アイコンに影を付与するui-icon-shadowスタイルクラスもありますが、jQuery Mobile 1.4では非推奨となっており、1.5で削除の予定です。
| 値 | アイコン | 値 | アイコン | 値 | アイコン |
|---|---|---|---|---|---|
| alert |  |
arrow-l |  |
arrow-r |  |
| arrow-u |  |
arrow-d |  |
back |  |
| bars |  |
carat-l |  |
carat-r |  |
| carat-u |  |
carat-d |  |
check |  |
| delete |  |
edit |  |
forward |  |
| gear |  |
grid |  |
home |  |
| minus |  |
plus |  |
refresh |  |
| search |  |
star |  |
- | - |
| 値 | アイコンの位置 |
|---|---|
| top | キャプションの上 |
| bottom | キャプションの下 |
| left | キャプションの左 |
| right | キャプションの右 |
| notext | アイコンのみ（キャプション無し） |
以下が、具体的な例です。
|
<button class="ui-btn ui-btn-icon-top ui-icon-home">button要素</button>
<a href="index.html" class="ui-btn ui-btn-icon-right ui-icon-delete">a要素</a>
|
アイコンだけのボタンを作成する
ui-btn-icon-notextスタイルクラスを指定した場合には、キャプションのない、アイコンだけのボタンを作成します。デフォルトでは角ばったボタンが背後に表示されますので、アイコンらしくするには、ui-corner-allスタイルクラスも併せて付与しておくとよいでしょう。
|
<button class="ui-btn ui-btn-icon-notext ui-icon-home">button要素</button>
<a href="index.html"
class="ui-btn ui-btn-icon-notext ui-icon-delete ui-corner-all">a要素</a>
|
独自のアイコン画像を貼り付ける
アイコン画像には、（標準で用意されているものだけでなく）独自の画像を利用することもできます。
|
<style>
.ui-icon-wings:after {
background-image: url("wings.png");
background-color: transparent;
background-size: contain;
}
</style>
……中略……
<button class="ui-btn ui-btn-icon-top ui-icon-wings">button要素</button>
|
独自のアイコン画像を利用するには、.ui-icon-xxxxx:afterのようなスタイルクラスを用意します。「xxxxx」の部分はアイコンの名前を表しますので、一意となるような任意の名前を指定してください*2。
- *2 :after接尾辞は、jQuery Mobile 1.3以前では不要です。
「background-size: contain;」は、背景画像を、縦横比を維持しつつ、領域に収まるように調整しなさい、という意味です。
指定されたwingsアイコンを適用するには、標準のアイコンと同じく、class属性に「ui-icon-wings」のように指定するだけです。
※以下では、本稿の前後を合わせて5回分（第6回～第10回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. jQuery Mobileページでローディング表示をカスタマイズするには？
jQuery Mobileで、ページ読み込みに際してローディングアイコンを表示する方法と、ローディング表示を制御する基本的なテクニックを解説。
7. jQuery Mobileページにボタンを配置するには？
jQuery Mobileページでボタンを設置するには、＜button＞／＜a＞／＜input＞要素などを利用するのが一般的。これらを使ってさまざまなレイアウトを実現する方法を説明。
8. 【現在、表示中】≫ jQuery Mobileページでアイコン付きのボタンを配置するには？
jQuery Mobileページでボタンを設置する方法について説明。今回は、アイコン付きのボタンをレイアウトする方法を解説する。
9. Navbarウィジェットでナビゲーションバーを作成するには？
アプリ共通のリンクやコマンドボタンなどを配置するために使われるナビゲーションバーを、jQuery MobileのNavbarウィジェットで手軽に作成する方法を解説する。
10. Tabsウィジェットでタブパネルを作成するには？
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
