tabelle responsive
responsive design è utile quando si desidera che il contenuto della pagina web mobile per rispondere alle dispositivo dell'utente, come ad esempio le dimensioni dello schermo e l'orientamento.
Con un semplice nome di classe, jQuery Mobile è consapevole della dimensione dello schermo disponibile dell'utente e si ridimensiona per visualizzare il contenuto che è rilevante per quel particolare utente automaticamente.
tavoli Responsive ci permettono di visualizzare un grande insieme di dati tabulari che avrà un aspetto invitante sia per i cellulari e desktop.
Ci sono due tipi di tabelle reattivo: riflusso e la colonna ginocchiera.
Tabella di riflusso
La modalità ridisposizione posiziona i dati della tabella orizzontalmente fino a raggiungere una dimensione minima, quindi tutte le righe sono raggruppate in verticale.
Creare una tabella, aggiungere i dati-role = "tavola" e una classe di "ui-responsive" sul <table> elemento:
Per la tabella di risposta per il corretto funzionamento, è necessario includere le <thead> e <tbody> elementi.
Non utilizzare rowspan o attributi colspan; essi non sono supportati nelle tabelle reattivi.
Colonna Toggle Table
La modalità "Toggle colonna" nasconderà colonne quando non c'è abbastanza larghezza per visualizzare i dati.
Per creare una tabella di colonna ginocchiera, aggiungere il seguente alla <table> elemento:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Per impostazione predefinita, jQuery Mobile nascondere le colonne dal lato destro della tabella. Tuttavia, vi è permesso di specificare quale colonna che deve essere nascosta o visualizzata in un ordine specifico. Aggiungere l'attributo data-priorità alla intestazione della tabella (<th>) e specificare un numero compreso tra 1 (massima priorità) a 6 (priorità più bassa):
<th>I
will never be hidden</th>
<th data-priority="1" >I
am very important - I will probably not be hidden</th>
<th data-priority="3" >I
am less important - I could be hidden</th>
<th
data-priority="5" >I am not that important - there is a good
chance that I will be hidden</th>Se non si specifica una priorità per una colonna, la colonna sarà persistente e non è disponibile per nascondersi.
Mettere tutto insieme e aver creato una colonna della tabella di commutazione! Si noti che il quadro aggiunge automaticamente un pulsante nell'angolo in alto a destra della tabella. Ciò consente all'utente di scegliere quale colonna visualizzare in tabella:
Esempio
<table data-role="table"
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" >Address</th>
<th
data-priority="3" >City</th>
<th
data-priority="4" >PostalCode</th>
<th
data-priority="5" >Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds
Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
Prova tu stesso " Per modificare il testo del pulsante tabella di commutazione, utilizzare l'attributo data-colonna-btn-text:
Esempio
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Prova tu stesso " tabelle styling
Utilizzare la classe "ui-ombra" per aggiungere ombre alla tabella:
Aggiungi ombra
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Prova tu stesso " Per ulteriore tavolo stile, usare i CSS:
Aggiungere un bordo inferiore di tutte le righe della tabella
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Prova tu stesso " Aggiungere un bordo inferiore a tutti <th> elementi e un colore di sfondo a tutti anche le righe della tabella
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Prova tu stesso "