Latest web development tutorials

jQuery Mobile blocco pieghevole

blocco dei contenuti pieghevole

blocco pieghevole consente di nascondere o visualizzare il contenuto - per la memorizzazione di parte delle informazioni utili.

Per creare un blocco di contenuti pieghevole, è necessario aggiungere i dati-ruolo di contenitore = attributo "pieghevole". Nel contenitore (div) all'interno, aggiungere un elemento di intestazione (H1-H6), seguiti dall'estensione si vuole fare i tag HTML:

Esempi

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>

Prova »

Per impostazione predefinita, il contenuto viene ripiegato. Per espandere il contenuto al caricamento della pagina, usa il data-crollato = "false":

Esempi

<div data-role="collapsible" data-collapsed="false" >
<h1>点击我 - 我可以折叠!</h1>
<p>I'm 现在我默认是展开的。</p>
</div>

Prova »


blocco pieghevole nidificato

i blocchi di contenuto pieghevoli possono essere annidati l'uno all'altro:

Esempi

<div data-role="collapsible" >
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
<div data-role="collapsible" >
<h1>点击我 - 我是嵌套的可折叠块!</h1>
<p>我是嵌套的可折叠块中被展开的内容。</p>
</div>
</div>

Prova »

lampada i blocchi di contenuto pieghevoli possono essere annidati più volte in base alle proprie esigenze.


raccolta pieghevole

Pieghevole del blocco pieghevole è raggruppata insieme (come una fisarmonica). Quando un nuovo blocco viene distribuito, tutti gli altri blocchi saranno piegati.

Creare vari blocchi contenuti pieghevole, quindi il contenuto del blocco circondato dal contenitore pieghevole con un nuovo data-role = "pieghevole-set" di:

Esempi

<div data-role="collapsible-set" >
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>

Prova »


Esempi

Altri esempi

Annulla filetto con margini attraverso l'attributo data-inserto
Come annullare l'angolo esterno con una distanza di blocco pieghevole.

Attraverso mini attributo data-mini di blocchi comprimibili
Come rendere blocco pieghevole più piccolo.

Cambiare l'icona da dati-crollato-icona e-icona dei dati espanso
Come cambiare l'icona a compressione del blocco (il valore predefinito è + e -).

La piega-pop
Creare un cassetto nel pop.

Icona Modifica posizione
Nel cassetto di come modificare la posizione dell'icona (il default è sulla sinistra).