*

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

公開日: : 最終更新日: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

コンテンツを表示する

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

ダイアログ

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

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

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

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

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

スポンサードリンク

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 ↑