*

ボタンを配置する

公開日: : 最終更新日:2016/05/02 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” ウィジェットのテーマ

ボタンを配置

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

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

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

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

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

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

スポンサードリンク

関連記事

no image

値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑