*

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

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化されたウィジェットは縦、横に密着して設置されて、全体の四隅が丸く表示されます。

縦に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-role=”controlgroup”を追加し、このとき、ウィジェットの表示はグループ化された全てのウィジェットの横幅がほぼ画面いっぱいに広がります。また、選択された値に対応する文字列がこの幅より長いときは、表示しきれないところが”…”となります。

横に並べてグループ化するには、ウィジェットを囲む<fieldset>にdata-type=”horizontal”を追加し、このとき同じグループのウィジェットを一列に並べた長さが画面の横幅より短いときは、ウィジェットが改行されて表示されます。

  • テーマの設定
  • ウィジェットのテーマは2種類あって、それぞれを設定するための属性があります。

    ・ウィジェット本体には「data-theme」属性
    ・オーバーレイ(ダイアログの背景)には「data-overlay-theme」属性

    ウィジェット本体のデフォルトの設定は、ウィジェットが配置されている領域んものに従います。オーバーレイとはダイアログの背景の事で、デフォルトのテーマは”a”です。サンプルコードでは、「ご希望の弁当は?」の箇所で設定しています。

  • ラベルの左側に表示する
  • <label>~</label>は、デフォルトではウィジェットの上に表示されますが、<fieldset>などに「data-role=”fieldcontain”」をの設定を追加すると文字列がウィジェットの左側に追加sれます、ただ、画面の幅が狭いと、この設定があったとしてもラベルがウィジェットの上に表示されます。さらに、<select>に「data-inline=”true”」を合わせて追加すると、ウィジェットの幅が短くなって画面に配置しやすくなります。

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

  • アイコンの種類と位置を変更
  • アイコンの種類はdata-icon、位置はdata-iconposの各属性で変更できます。デフォルトの値は、data-icon=”arrow-d”(下向きのアイコン)、data-iconpos=”right”(ウィジェットの右端の設置)です。

スポンサードリンク

関連記事

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

折りたたみを設定する

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

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑