*

折りたたみを設定する

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

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、その下に詳細を示すコンテンツが表示されるウィジェットです。同じ領域をクリックすると詳細が閉じられて、元の形に戻ります。複数のウィジェットをグループ化して表示したり、ウィジェットを入れ子構造にできたりします。

概要と詳細とでコンテンツを分割して表示したいときや、コンテンツ表示する面積を小さく留めておきたいときに使います。

項目の構成

ウィジェットやウィジェットに表示する内容は以下の属性などを囲みます。

1.ウィジェットの部分は、data-role=”collapsible”を持つタグ(<div>、<fieldset>)
2.概要部分。予め表示されている箇所は、<h1>~<h6>、<legend>
3.詳細部分。クリック・タップされた後に表示される箇所は、<p>~</p>、<div>~</div>

詳細を予め開いておく

詳細部分をユーザーに知らせるために、ウィジェットを表示したときに予め詳細部分が開いている状態にするには、「data-collapsed=”false”」を設定します。

ページ幅いっぱいに表示

collapsibleウィジェットは、デフォルトでは、概要と詳細には角丸が表示され、グループ化されたような表示になりますが、data-inset=”false”を設定すると、ページの幅いっいに表示されて角丸がなくなります。

アイコンのカスタマイズ

collapsibleウィジェットのデフォルト状態では、アイコンの位置は左端で、形状は詳細を閉じているときが「+」で、開いているときが「-」ですが、下記の属性値を変更することでこれを変更できます。

1.data-iconpos
2.data-collapsed-icon
3.data-expanded-icon

data-iconpos属性はアイコンを表示する位置をleft(デフォルト),right,top,bottomのいずれかで設定し、これらはボタンのときと同様でleft,rightを設定したときは高さ1行分、top,bottomを指定したときの高さは2行分。

data-collapsed-iconは詳細が閉じられているときに表示するアイコン、data-expanded-iconは詳細が開かれているときに表示するアイコンを設定する属性です。値はボタンと同じアイコン名称を設定します。

複数のウィジェットをグループ化して表示してみる

複数のウィジェットをグループ化して表示したいときは、全体を<div data-role=”collapsible-set”>で囲みます。こうすることで、上端ウィジェットの上側と下端ウィジェットの下側の角が丸みのついたデザインに変更されます。

入れ子構造を設定

ウィジェットの中に別のウィジェットを組み込めます。だた組み込むウィジェットの階層が深くなると画面の操作性や表示スピードが損なわれるので注意が必要です。

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

HTMLタグに追加できる属性一覧
設定対象 名称=”設定値”(太字はデフォルト) 説明
ウィジェット data-role=”collapsible” 折り畳みのウィジェットとして表示
data-role=”collapsible-set” 複数のウィジェットをグループ化して表示
data-inset=”true|false” ページ幅いっぱいに表示するか否か
data-theme=”テーマ名称” ウィジェットのテーマ
アイコン data-collapsed-icon=”アイコン名称” 詳細を閉じたときにアイコン
data-expanded-icon=”アイコン名称” 詳細を開いたときのアイコン
data-iconpos=”left|right|top|bottom” アイコンの位置
項目 data-collapsed=”true|false” 項目を閉じておくか否か
data-content-theme=”テーマの名称” 詳細表示のテーマ

スポンサードリンク

関連記事

no image

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

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

記事を読む

no image

アイコンとサムネイルを表示する

各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ

記事を読む

no image

ページ(page)とは

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

記事を読む

no image

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

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

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

ボタンを配置する

リンクを表すaタグに「data-role="button"」を追加すると、画面にはボタンが表示されま

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

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

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

記事を読む

no image

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑