フリーランス 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を利用してボタンを設置する方法

16.11.15 17:24 | コメント(0)

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

jQuery mobileではボタン、リスト、フォーム、ポップアップなど、簡単な指定で設置することができます。 html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

 1. ボタンを設置する指定要素
 2. ボタンにスタイルを追加する指定要素
 3. ボタンを小さく/短くするスタイルを追加する指定要素
 4. ボタンをグループ化(ナビゲーション)して縦や横にする指定要素
 5. ボタン用クラス一覧
 6. ボタン用データ要素一覧

ボタンを設置する指定要素

jQuery mobileでボタンを指定する要素として3つの要素があります。
 ・「button」で指定する要素
 ・「a」で指定する要素
 ・「input」で指定する要素(type属性が「submit」「reset」「button」)

【button 要素で配置】

ボタンサンプルはこちら

【a 要素で配置】
a 要素
ボタンサンプルはこちら

【submit 要素で配置】



ボタンサンプルはこちら

ボタンにスタイルを追加する指定要素

jQuery mobileでボタンを指定する方法に加え、角丸やドロップシャドウなどのスタイルも付け加えることができます。

【角丸ボタン】
※フォームボタンはデフォルトで角丸になっていますので、解除するには、データ属性「data-corners="false"」を加えます。
※フォームボタンはデフォルトで影がついていますので、解除するには、データ属性「data-shadow="false"」を加えます。

角丸ボタン(a要素)

ボタンサンプルはこちら

【角丸に8emとしたボタン】

角丸に8emとした角丸ボタン(a要素)
ボタンサンプルはこちら

【ドロップシャドウボタン】

ドロップシャドウボタン(a要素)

ボタンサンプルはこちら

【値を設定したドロップシャドウボタン】

値を設定したドロップシャドウボタン(a要素)
ボタンサンプルはこちら

ボタンを小さく/短くするスタイルを追加する指定要素

jQuery mobileでボタンを小さくしたり、短くする場合はスタイル要素を指定することで設定ができます。 ボタンを小さくする場合は「ui-mini」クラスを加え、ボタンを短くする場合は「ui-btn-inline」クラスを加えると指定することができます。 また、文字の白抜きボタンを指定する時は「data-theme」クラスを加え、機能を無効するボタンを指定する時は「ui-state-disabled」クラスを加え、スタイルを無効にするボタンを指定する時は「data-role="none"」クラスを加えると指定することができます。

【小さめのボタン】
※フォームボタンには、データ属性「data-mini="true"」を加えると小さなサイズにすることができます。

小さめのボタン(a要素)

ボタンサンプルはこちら

【短いボタン】
※フォームボタンには、データ属性「data-inline="true"」を加えると短いボタンになります。

短いボタン(a要素)

ボタンサンプルはこちら

【文字の白抜きボタン】
※フォームボタンは「data-theme」属性で指定します。
文字の白抜きボタン(button要素)


ボタンサンプルはこちら

【機能を無効するボタン】

機能を無効するボタン(a要素)
ボタンサンプルはこちら

【スタイルを無効にするボタン】

機能を無効するボタン(a要素)

ボタンサンプルはこちら

ボタンをグループ化(ナビゲーション)して縦や横にする指定要素

jQuery mobileでナビゲーションの用にひとつの枠にしたい場合は、「data-role="controlgroup"」を指定するとグループ化することができます。
jQuery mobileでナビゲーションの用にボタンを横並びに指定する時は「data-type="horizontal"」クラスを加え、縦並びに指定する時は「data-type="vertical"」クラスを加えると指定することができます。

【横に並べるボタン】

ボタンサンプルはこちら

【縦に並べるボタン】

ボタンサンプルはこちら

ボタン用クラス一覧

ボタンを設置する際に利用するクラス要素の一覧をご紹介します。
クラス 説明
ui-btn ボタンを指定する要素
ui-btn-inline ボタンをテキストの長さに応じた幅で横に並べるインライン要素
ui-corner-all 角丸に指定する要素
ui-mini 小さいサイズに指定する要素
ui-shadow 影を指定する要素
ui-btn-[a-z] 色を指定する要素
ui-state-disabled ボタンを利用不可に指定する要素
ui-btn-icon-top アイコンをテキストの上に指定する要素
ui-btn-icon-right アイコンをテキストの右に指定する要素
ui-btn-icon-bottom アイコンをテキストの下に指定する要素
ui-btn-icon-left アイコンをテキストの左に指定する要素
ui-btn-icon-notext テキストは表示されずアイコンだけのボタンに指定する要素
ui-shadow-icon アイコンに影を指定する要素

ボタン用データ要素一覧

ボタンを設置する際にデータ要素一覧をご紹介します。
データ属性 説明
data-corners true | false ボタンに角丸を指定(指定する、指定しない)
data-icon アイコン指定 ボタンにアイコンを指定
data-iconpos left | right | top | bottom | notext アイコンの表示位置を指定
data-iconshadow true | false アイコンに影を指定(指定する、指定しない)
data-inline true | false ボタンにインライン要素を指定(指定する、指定しない)
data-mini true | false 小さいサイズを指定(指定する、指定しない)
data-shadow true | false ボタンに影を指定(指定する、指定しない)
data-theme swatch letter (a-z) ボタンの色を指定(色)

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

    コメントする

    おすすめの記事

    PAGE TOP