jQuery Mobile Modulo

tavolo responsive

Design Responsive è generalmente utilizzato per adattare all'utente una varietà di dispositivi mobili.

Abbiamo solo bisogno di utilizzare un semplice nome di classe, jQuery Mobile regolerà automaticamente il contenuto della pagina in base alle dimensioni dello schermo.

modulo Responsive al contenuto della pagina su dispositivi mobili e desktop per terminare un buon adattamento.

tavolo Responsive ci sono due tipi: reflow (reflusso) e la commutazione della colonna.

reflusso Form

modulo tipo di reflusso sufficientemente grandi dimensioni dello schermo viene visualizzato in senso orizzontale, mentre la dimensione dello schermo è abbastanza piccolo, tutti i dati saranno in verticale.

Creare una tabella nell'elemento <table> per aggiungere dati-role = "tavola" e la categoria "ui-reattivo":

Esempi

Prova »

	Per il modulo di risposta, è necessario includere il <thead> e <tbody> elemento. Non utilizzare l'attributo rowspan o colspan; tabella reattivo non è supportato da queste due proprietà.

commutazione della colonna

modello di commutazione della colonna sarà nascosto quando la larghezza dei dati non è sufficiente.

Creazione di un selettore di modalità colonna della tabella è il seguente:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

Per impostazione predefinita, jQuery Mobile prima nascondere la colonna a destra della tabella. Tuttavia, è possibile specificare l'ordine delle colonne nascoste con l'aggiunta di attributo data priorità nella testa tabella (<th>), il valore dei dati di priorità può essere da 1 (massima priorità) a 6 (priorità più bassa):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>

	Se non si specifica la priorità non è presente nell'elenco, quindi la colonna esisterà sempre e non verrà nascosta.

La combinazione di questi due pezzi di codice insieme per creare una tabella di commutazione della colonna, in modo che gli utenti possono personalizzare le colonne che si desidera nascondere la tabella:

Esempi

<Table data-role = "tavolo " data-mode = "columntoggle" class = "ui-responsive" id = "myTable">
<Thead>
<Tr>
<Th data-priority = "6 "> CustomerID </ th>
<Th> CustomerName </ th>
<Th data-priority = "1 "> ContactName </ th>
<Th data-priority = "2 "> Indirizzo </ th>
<Th data-priority = "3 "> Città </ th>
<Th data-priority = "4 "> PostalCode </ th>
<Th data-priority = "5 "> Paese </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> 1 </ td>
<Td> Alfreds Futterkiste </ td>
<Td> Maria Anders </ td>
<Td> Obere Str. 57 </ td>
<Td> Berlino </ td>
<Td> 12209 </ td>
<Td> Germania </ td>
</ Tr>
</ Tbody>
</ Table>

Prova »

Siamo in grado di utilizzare l'attributo di testo dei dati-column-btn di modificare il testo tabella di interruttore: