jQuery Mobileの基礎/ボタン1

| 2012年2月4日 | HTML5 | 2 Comments
Bookmark this on Hatena Bookmark

今回はjQueryMobileのユーザインタフェースの中の一つであるボタンについて説明します。

HTMLのbuttonタグやinputタグでもボタンを作成することが可能ですが、表示されるボタンはブラウザによって異なります。ブラウザによっては平面的なデザインのボタンで決してリッチなデザインと言えないものもあります。

jQueryMobileを用いることで簡単にリッチな（ネイティブアプリケーションのような）を使うことができます。


それでは続きへどうぞ。

buttonタグ、inputタグ

jQueryMobileでもbuttonタグとinputタグでtype要素にbutton、submit、reset、imageが指定された場合にボタンを表示します。

■jQueryMobileSampleButton1-1.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
    <div data-role="content">
        <a href="https://techbooster.org/">リンク</a>
        <a href="https://techbooster.org/" data-role="button">data-role="button"</a>
    </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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
    <div data-role="content">
        <a href="https://techbooster.org/" data-role="button" data-icon="delete">ボタン</a>
        <a href="https://techbooster.org/" data-role="button" data-icon="arrow-r">ボタン</a>
        <a href="https://techbooster.org/" data-role="button" data-icon="check">ボタン</a>
        <a href="https://techbooster.org/" data-role="button" data-icon="gear">ボタン</a>
        <a href="https://techbooster.org/" data-role="button" data-icon="refresh">ボタン</a>
    </div>
</body>
</html>

アイコンを表示させる位置を変える

何も指定しないとボタンの左側にアイコンが表示されますが、data-iconpos属性を使うことで右側、上部、下部に表示させることが可能です。

また、data-iconposにnotextを指定することでアイコンのみが表示されるボタンを作成することができます。この場合、記述したテキストはリンクのtitle属性に自動的に設定されます。

data-iconpos属性に指定する値

値内容
left左側に表示（省略した場合はleftを指定したことになる）
right右側に表示
top上側に表示
bottom下側に表示
notextアイコンのみ表示。記述したテキストはリンクのtitle属性に自動的に設定される

■jQueryMobileSampleButton1-4.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
    <div data-role="content">
        <a href="https://techbooster.org/" data-role="button" data-icon="check" data-iconpos="left">ボタン</a>
        <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="top">ボタン</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

kkato

2 Comments