jQuery Mobile 可折疊塊

2018-02-02 18:25 更新

jQuery Mobile 可折疊塊

通過(guò)使用jQuery Mobile可折疊塊,你可以控制是否將內(nèi)容顯示或者隱藏。

可折疊內(nèi)容塊

可折疊塊允許您隱藏或顯示內(nèi)容 - 對(duì)于存儲(chǔ)部分信息很有用。

如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊,需要為容器添加 data-role="collapsible" 屬性。在容器(div)內(nèi),添加一個(gè)標(biāo)題元素(H1-H6),后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記:

實(shí)例

<div data-role="collapsible">
<h1>點(diǎn)擊我 - 我可以折疊!</h1>
<p>我是可折疊的內(nèi)容。</p>
</div>

嘗試一下 ?

默認(rèn)情況下,內(nèi)容是被折疊起來(lái)的。如需在頁(yè)面加載時(shí)展開(kāi)內(nèi)容,請(qǐng)使用 data-collapsed="false":

實(shí)例

<div data-role="collapsible" data-collapsed="false">
<h1>點(diǎn)擊我 - 我可以折疊!</h1>
<p>I'm 現(xiàn)在我默認(rèn)是展開(kāi)的。</p>
</div>

嘗試一下 ?


嵌套可折疊塊

可折疊的內(nèi)容塊是可以彼此嵌套的:

實(shí)例

<div data-role="collapsible">
<h1>點(diǎn)擊我 - 我可以折疊!</h1>
<p>我是被展開(kāi)的內(nèi)容。</p>
<div data-role="collapsible">
<h1>點(diǎn)擊我 - 我是嵌套的可折疊塊!</h1>
<p>我是嵌套的可折疊塊中被展開(kāi)的內(nèi)容。</p>
</div>
</div>

嘗試一下 ?

lamp 可折疊的內(nèi)容塊可以根據(jù)您的需要進(jìn)行多次嵌套。


可折疊集合

可折疊集合是將可折疊塊組合在一起(就像手風(fēng)琴一樣)。當(dāng)一個(gè)新的塊被展開(kāi)時(shí),所有其他的塊都會(huì)被折疊起來(lái)。

創(chuàng)建若干個(gè)可折疊的內(nèi)容塊,然后把可折疊內(nèi)容塊用帶有 data-role="collapsible-set" 的新容器包圍起來(lái):

實(shí)例

<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>點(diǎn)擊我 - 我可以折疊!</h1>
<p>我是被展開(kāi)的內(nèi)容。</p>
</div>
<div data-role="collapsible">
<h1>點(diǎn)擊我 - 我可以折疊!</h1>
<p>我是被展開(kāi)的內(nèi)容。</p>
</div>
</div>

嘗試一下 ?


實(shí)例

更多實(shí)例

通過(guò) data-inset 屬性取消圓角
如何取消可折疊塊上的圓角。

通過(guò) data-mini 屬性迷你化可折疊塊
如何讓可折疊塊更小。

通過(guò) data-collapsed-icon 和 data-expanded-icon 改變圖標(biāo)
如何改變可折疊塊的圖標(biāo)(默認(rèn)是 + 和 -)。

你可以通過(guò)練習(xí)上述的實(shí)例來(lái)進(jìn)一步認(rèn)識(shí)jQuery Mobile可折疊塊!

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)