*

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

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

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

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

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

コンテンツを表示する

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

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

コンテンツをフルスクリーンで表示する

ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

スポンサードリンク

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 ↑