最新のWeb開発のチュートリアル
 

jQuery Mobile折り畳み式の


折りたたみコンテンツブロック

Collapsiblesは、あなたが非表示にしたり、情報の一部を収納するのに便利であるコンテンツを表示することができます。

コンテンツの折りたたみ可能なブロックを作成するには、割り当てるdata-role="collapsible"コンテナに属性を。 コンテナ内(div)ヘッダを追加(H1-H6)あなたが拡大することにしたい任意のHTMLマークアップが続くか、legend要素を、:

<div data-role="collapsible" >
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>
»それを自分で試してみてください

デフォルトでは、コンテンツが閉じられています。 ページのロード時にコンテンツを展開し、使用するには、 data-collapsed="false"

<div data-role="collapsible" data-collapsed="false" >
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm now expanded by default.</p>
</div>
»それを自分で試してみてください

ネストされた折りたたみブロック

折りたたみコンテンツブロックは、(折りたたみ式内部折り畳み可能)入れ子にすることができます。

<div data-role="collapsible" >
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
  <div data-role="collapsible" >
    <h1>Click me - I'm a nested collapsible block!</h1>
    <p>I'm the expanded content in the nested collapsible block.</p>
  </div>
</div>
»それを自分で試してみてください

あなたが好きな折りたたみコンテンツブロックは何度でも入れ子にすることができます。


折りたたみセット

折り畳み可能なセットが一緒にグループ化されている折り畳み可能なブロック(多くの場合、アコーディオンと呼ばれる)です。 新しいブロックが開かれると、他のすべてのブロックがあります。

いくつかの折りたたみ可能なコンテンツブロックを作成し、折りたたみ可能なブロックの周り= "collapsibleset"データ役割を持つ新しいコンテナをラップ:

<div data-role="collapsibleset" >
  <div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
  </div>
  <div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
  </div>
</div>
»それを自分で試してみてください

その他の例

折りたたみポップアップ
折り畳み可能なポップアップを作成する方法。

丸みを帯びたコーナーを削除するdata-inset属性
丸みを帯びた角を削除し、collapsibles上の全幅を追加する方法。

縮小するには、とcollapsibles data-mini属性
collapsiblesを小さくする方法。

データ・崩壊・アイコンとデータ展開アイコンとアイコンを変更します
collapsiblesのアイコンを変更する方法(デフォルトは+とされています - )。

アイコンの位置を変更します
どのようcollapsiblesのアイコン位置を(デフォルトはleft)に変更します。