*

ボタン内にアイコンを表示したり、デザインを変更する

公開日: : 最終更新日:2016/05/03 jQueryMobile , , ,

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpos属性の2つを設定します。アイコンのみのボタンもこれにより設定します。

アイコンと文字列を同じボタンに表示するとき、アイコンが左右にある時は、アイコンが文字列と同じ行に表示されるため、ボタンの高さは1行分ですが、アイコンを上下どちらかに表示させるときは、ボタンの高さが2行分です。

ちなみに、ボタンにアイコンのみを表示したいときは、「data-iconpos=”notext”」と設定します。このときaタグから閉じタグの文字列はツールチップ(title属性)に設定されています。

って読んだ本にはそう書いてあるのですが、私の環境だと表示されません。なぜ・・・・

アイコンのみのボタンは形状は丸形です。その直径は、文字列を表示する時のボタンの高さの半分程度になるので、文字列を表示する場合よりも形状が小さいです。ボタンを小さくすると指での操作がしづらいので、スマホで実際にテストしたほうがいいです。

デザインをカスタマイズしてみる

ボタンは、属性の追加によりデザインを変更できます。なのですが、範囲は以下だけです。
・角を丸くする
・テーマを変更する
・影をつける

3つです。

  • 角を丸く
  • 単独のボタンは、デフォルトでは四隅の角が丸いデザインですが、data-corner属性の値がデフォルトではtrueが設定されているからです。この値をfalseにすると、ボタンは四角形になります。

  • 影をつける
  • デフォルトではボタンの周囲には影が付けられています。影をなくすには「data-shadow=”false”」と設定します。

  • テーマを変える
  • ボタンを色付けするときに便利なのがテーマの設定です。ボタンのdata-theme属性を設定すると、ページのテーマに関係なく、ボタンだけのテーマを設定でき、ボタンに表示されるアイコンもテーマに沿ったデザインが設定できます。

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

スポンサードリンク

関連記事

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

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

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

記事を読む

no image

ボタンを配置する

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

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

コンテンツを表示する

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑