jQuery Mobileの基礎/ボタン1
今回はjQueryMobileのユーザインタフェースの中の一つであるボタンについて説明します。
HTMLのbuttonタグやinputタグでもボタンを作成することが可能ですが、表示されるボタンはブラウザによって異なります。ブラウザによっては平面的なデザインのボタンで決してリッチなデザインと言えないものもあります。
jQueryMobileを用いることで簡単にリッチな（ネイティブアプリケーションのような）を使うことができます。
それでは続きへどうぞ。
buttonタグ、inputタグ
jQueryMobileでもbuttonタグとinputタグでtype要素にbutton、submit、reset、imageが指定された場合にボタンを表示します。
■jQueryMobileSampleButton1-1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div data-role="content"> <button>buttonタグ</button> <input type="button" value="inputタグ"> <input type="submit" value="inputタグ"> <input type="reset" value="inputタグ"> <input type="image" value="inputタグ"> </div></body></html> |
通常のリンクをボタンにする
aタグでのリンクを簡単にボタンにすることができます。そのために必要なことはdata-role属性にbuttonを指定するだけです。
■jQueryMobileSampleButton1-2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div data-role="content"> </div></body></html> |
ボタンにアイコンを表示させる
ボタンの文字だけでなくアイコンを表示させることができます。アイコンを表示させる場合はdata-icon属性を追加して表示させるアイコンを指定します。
例えばdata-icon=”arrow-r”と指定するとボタン上に右矢印のアイコンが表示されます。指定できるアイコンは以下の通りです。
指定することができるアイコン
左から
- arrow-l
- arrow-r
- arrow-u
- arrow-d
- delete
- plus
- minus
- check
- gear
- refresh
- forward
- back
- grid
- star
- alert
- info
- home
- search
サンプルでは5つのボタンにそれぞれ違うアイコンを表示させています。
■jQueryMobileSampleButton1-3.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div data-role="content"> </div></body></html> |
アイコンを表示させる位置を変える
何も指定しないとボタンの左側にアイコンが表示されますが、data-iconpos属性を使うことで右側、上部、下部に表示させることが可能です。
また、data-iconposにnotextを指定することでアイコンのみが表示されるボタンを作成することができます。この場合、記述したテキストはリンクのtitle属性に自動的に設定されます。
data-iconpos属性に指定する値
| 値 | 内容 |
|---|---|
| left | 左側に表示（省略した場合はleftを指定したことになる） |
| right | 右側に表示 |
| top | 上側に表示 |
| bottom | 下側に表示 |
| notext | アイコンのみ表示。記述したテキストはリンクのtitle属性に自動的に設定される |
■jQueryMobileSampleButton1-4.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <div data-role="content"> <a href="https://techbooster.org/" data-role="button" data-icon="check" data-iconpos="right">ボタン</a> <a href="https://techbooster.org/" data-role="button" data-icon="check" data-iconpos="bottom">ボタン</a> <a href="https://techbooster.org/" data-role="button" data-icon="check" data-iconpos="notext">ボタン</a> </div></body></html> |
以上、jQueryMobileでのボタンの扱い方の説明でした。お疲れさまです。
About The Author
