jQuery Mobileの基礎/ボタン 2

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

「jQuery Mobileの基礎/ボタン1」でjQueryMobileのユーザインタフェースの中の一つであるボタンについて説明しました。

jQueryMobileを用いることで簡単にネイティブアプリのようなリッチなボタンが利用できることが分かったと思います。

今回はボタンについてさらに以下の2つの内容を説明したいと思います。

  • インラインボタン
  • グループボタン

それでは続きへどうぞ

インラインボタン

「jQuery Mobileの基礎/ボタン1」のサンプルをブラウザで表示してもらうと分かりますが、デフォルトではボタンが画面の横幅いっぱいになっています。

スマートフォンではユーザーがボタンをタッチし易くするためにボタンの横幅を長くすることもありますが、場合によってはボタンを小さくしたい時もあると思います。

その場合はdata-inline属性を追加し、“true”と指定することでボタンの横幅がテキストとアイコンの幅になります。このボタンのことをインラインボタンと呼びます。

以下にサンプルソースを記載します。14、15行目のdata-inline=”true”がポイントです。

■jQueryMobileSampleButton2-1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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="index.html" data-role="button" data-inline="true">Inline Button</a>
        <a href="index.html" data-role="button" data-inline="true">Inline Button</a>
    </div>
</body>
</html>

グループボタン

ボタンをグループ化することで、下のスクリーンショットのような複数のボタンが繋がったボタンを作ることが出来ます。

その場合はDIVタグでグループしたい複数のボタンを囲みます。そしてDIVタグにはdata-role属性を“controlgroup”として指定します。

複数のボタンを繋げる方向は縦と横のどちらにも可能です。デフォルト（他に何も指定しなければ）では縦方向に繋げることになり、data-type属性を“forizontal” として指定することで横方向に繋げることが可能になります。

もちろん、繋げるボタンは、アイコン付きのボタンでも良いですし、アイコンのみボタンも可能です。アイコンだけの場合は、ボタンサイズが小さくなりグループにしているため隙間もないため、押しにくくなる可能性があります。

以下にグループ化して、縦と横に繋げたサンプルソースを記載します。

■jQueryMobileSampleButton2-2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
        <div data-role="controlgroup">
            <a href="index.html" data-role="button">Button 1</a>
            <a href="index.html" data-role="button">Button 2</a>
            <a href="index.html" data-role="button">Button 3</a>
        </div>
 
        <div data-role="controlgroup" data-type="horizontal">
            <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext"></a>
            <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext"></a>
            <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext"></a>
            <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
    </div>
</body>
</html>

以上、インラインボタンとグループボタンについて説明しました。

グループボタンはボタンとボタンの間の隙間が無くなるので、ユーザーの操作性には気を配りましょう。アイコンだけのボタンの場合などは端末のサイズによっては押し間違える可能性も出てきます。

About The Author

kkato