スポンサーリンク
スポンサーリンク

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

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

縦に並べてグループ化するには、ウィジェットを囲む<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”(ウィジェットの右端の設置)です。

コメント

タイトルとURLをコピーしました