jQueryMobile

ボタンを配置する

リンクを表すaタグに「data-role="button"」を追加すると、画面にはボタンが表示されます。

<button>、<input type="button">のボタンはdata-role属性が設定されていなくても自動的に同様の表示となります。今回の記事では<a data-role="button">によるボタンについて触れます。
ボタンに関連する属性は以下の表があります。これらを駆使すると、ボタンそのものやボタン内のアイコンの配置、ボタンの形状を設定できます。

設定対象 名称="設定値"(太字はデフォルト) 説明
ウィジェット data-role="button" リンク(aタグ)をボタンをして表示
data-inline="true|false" 複数のボタンを横一列に並べて配置
data-mini="true|false" ミニサイズで表示する
アイコン data-icon="アイコンの名称" アイコンを表示
data-iconpos="left|right|top|bottom|notext アイコンの表示位置
data-iconshadow="true|false" アイコンに影を付けるか
デザイン data-shadow="true|false" ウィジェットに影を付けるか
data-corners="true|false" 角丸にするか
data-theme="a"とか"b" ウィジェットのテーマ

ボタンを配置

ボタンには単独で表示されるものと、複数のボタンがグループ化されて表示されるものがあり、グループ化には、横長ボタンが縦に連なるものと、横一列に連なるものがあります。

  • 単独のボタン

    • 単独のボタンは、デフォルトでは１つがほぼ１行分の幅で表示されます。２つのaタグにdata-role="button"が追加されることでリンクとしてではなくボタンとして扱われて表示されます。それぞれが１行分の幅で表示されるので、ボタンは縦に２行で表示されます。

  • 横一列に並んだボタン

    • 複数のボタンを横一列に並べて配置するときは、リンクやボタンのタグに「data-inline="true"」を追加します。
    その後、並べるボタンを全体をdivタグで囲み、ボタンに続くウィジェットが同じ行に並ばないようにします。

  • 縦に並べてグループ化されたボタン

    • 複数のボタンを縦に並べてグループかあして配置するには、並べるボタンの全体をdivタグで囲み、そのタグに、
    「data-role="controlgroup"」を追加します。グループ化されたボタンの幅はすべて同じになって、ボタンの幅は単独の物と同じになります。さらに、上端ボタンの上側とボタンの下端ボタンの下側の角は丸みを帯びたデザインです。ボタンにはdata-inline属性は追加しません。

  • 横に並べてグループ化されたボタン

    • 縦にグループ化したときは、「data-role="controlgroup"」を使いましたが、さらに「data-type="horizontal"」を追加することで、横に並べてボタンを配置することができます。data-inline属性は不要です。グループ化されたボタンの幅は、ボタンに表示する文字列の長さにより変わります。全てのボタンが１行分で収まらない時は、途中で改行されます。表示させる画面の幅に対応したボタンの大きさをデザインする必要があります。

サンプルコードの実行結果はこちら

-jQueryMobile
-, , ,