フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
ソーシャルネットサービス【SNS】情報・活用方法
WordPress(ワードプレス)で記事のアップと同時にFacebookやTwitterに共有させることが出来る「Jetpack」プラグインの設定方法
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
Webデザイナーになる為の第一歩(初級)
WEB屋になる為の知識と技術
Webデザイナーになる為の第一歩(初級)
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

jQuery Mobileで利用できるアイコンリストとアイコン付きのボタンを設置する方法

17.11.15 11:45 | コメント(0)

jQuery Mobileでボタンを設置する方法

jQuery mobileでは数多くのアイコンが提供されており、簡単な指定で使えるようになっています。 jQuery mobileでは、簡単にボタンの指定が出来ますが、アイコンの指定やアイコン付きボタン等も指定が簡単です。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. アイコン付きボタンの指定要素
 2. アイコンのみのボタン指定要素
 3. アイコンの色や背景を変更する指定要素
 4. アイコン一覧
 5. アイコンボタンに使用するクラス一覧

アイコン付きボタンの指定要素

ボタンにアイコンを付与するには、「ui-icon-*****」スタイルクラスを利用しアイコンの種類を指定します。 また、「ui-btn-icon-*****」スタイルクラスを利用してアイコンの位置の指定を行います。
【アイコンボタン】
※フォームボタンの場合は「data-iconpos="top|right|bottom|left"」と指定します。

アイコンボタン(a要素)

ボタンサンプルはこちら

【アイコンの配置を変更したボタン】
アイコンの配置を変更したボタン(左)
アイコンの配置を変更したボタン(上)
アイコンの配置を変更したボタン(右)
アイコンの配置を変更したボタン(下)
ボタンサンプルはこちら

【アイコンの配置を変更して横並びにしたボタン】
横並びにしたボタン(左)
横並びにしたボタン(上)
横並びにしたボタン(右)
横並びにしたボタン(下)
ボタンサンプルはこちら

アイコンのみのボタン指定要素

ボタンにアイコンを付与し、テキストを削除してアイコンのみのボタンにしたい場合は「ui-btn-icon-notext」スタイルクラスを指定すればアイコンのみのボタンの表示になります。
デフォルトの指定では、アイコンの枠が正方形になりますが、円にしたい場合は「ui-corner-all」クラスを指定すれば円型に表示されます。

【アイコンのみのボタン】

アイコンのみのボタン(a要素)

ボタンサンプルはこちら

【アイコンのみのを丸にしたボタン】

アイコンのみのを丸にしたボタン(a要素)

ボタンサンプルはこちら

アイコンの色や背景を変更する指定要素

アイコンボタンをしていするとデフォルトではアイコンの色が白抜きになっています。アイコンの色を黒にしたい場合は「ui-alt-icon」スタイルクラスを指定します。
また、背景を消したい場合は「ui-nodisc-icon」スタイルクラスを指定します。

【アイコンの色を黒にするボタン】
背景あり/白(デフォルト)
背景なし/白
背景あり/黒
背景なし/黒
ボタンサンプルはこちら

アイコン一覧

jQuery mobileで利用できるアイコン一覧をご紹介します。

アイコン一覧はこちら

アイコンボタンに使用するクラス一覧

アイコンボタンの位置の変更や色の変更を行う際に利用するクラス要素一覧をご紹介します。
クラス 説明
ui-icon-[アイコン名] アイコンの種類を指定
ui-btn-icon-top アイコンをテキストの上に表示する指定
ui-btn-icon-right アイコンをテキストの右に表示する指定
ui-btn-icon-bottom アイコンをテキストの下に表示する指定
ui-btn-icon-left アイコンをテキストの左に表示する指定
ui-btn-icon-notext テキストは表示せずアイコンだけのボタンを指定
ui-nodisc-icon アイコンの背景の影を消す指定
ui-alt-icon アイコン色を黒にする指定
【フォームボタン用の属性】
データ属性 説明
data-icon アイコンリスト参照 アイコンの種類を指定する
data-iconpos left | right | top | bottom | notext アイコンの表示位置を指定する
notextはアイコンだけのボタン

以上がjQuery Mobileで利用できるアイコンリストとアイコン付きのボタンを設置する方法になります。
カテゴリ:WEB屋になる為の知識と技術, jQuery Mobileの基礎, スマートフォン制作と作成方法, 使えるjQueryとJavaScript
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP