Tabele Responsive
Design receptivă este util atunci când doriți conținutul paginii web mobil pentru a răspunde la dispozitivul utilizatorului, cum ar fi dimensiunea ecranului și orientarea.
Cu un simplu nume de clasă, jQuery Mobile este conștient de dimensiunea ecranului disponibile utilizatorului și în mod automat se redimensionează pentru a afișa conținutul care este relevant pentru acel anumit utilizator.
tabele Responsive ne permit să afișeze un set mare de date tabelare, care va arata atractiv pentru ambele telefoane mobile și desktop-uri.
Există două tipuri de tabele care răspund: reflow și coloana de comutare.
reflow Tabelul
Modul reflow poziționează datele din tabel orizontal până când atinge o dimensiune minimă, atunci toate rândurile sunt grupate împreună pe verticală.
Crearea unui tabel, adăugați-rolul de date = „ de masă“ și o clasă de "ui-responsive" pe <table> elementului:
Pentru tabelul receptiv să funcționeze corect, trebuie să includeți <thead> și <tbody> elemente.
Nu utilizați rowspan sau atributele colspan; acestea nu sunt acceptate în tabele care răspund.
Coloana Toggle Tabel
"column toggle" de "column toggle" modul va ascunde coloanele atunci când nu există suficientă lățime pentru a afișa datele.
Pentru a crea un tabel coloană de comutare, adăugați următoarele la <table> elementului:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >În mod implicit, jQuery Mobile va ascunde coloanele din partea dreaptă a tabelului. Cu toate acestea, vi se permite să specificați care coloana pe care ar trebui să fie ascunse sau afișate într-o anumită ordine. Adăugați data-priority de (<th>) (highest priority) (lowest priority) data-priority atribut pentru antetul tabelului (<th>) și specificați un număr cuprins între 1 (highest priority) la 6 (lowest priority) :
<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>Dacă nu specificați o prioritate pentru o coloană, coloana va fi persistente și nu sunt disponibile pentru a ascunde.
Pune totul împreună și ați creat un tabel coloană de comutare! Observați că cadrul adaugă automat un buton în colțul din dreapta sus al tabelului. Acest lucru permite utilizatorului să aleagă coloana care să fie afișate în tabel:
Exemplu
<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>
Încearcă - l singur » Pentru a modifica textul butonului tabel de comutare, utilizați data-column-btn-text atributul:
Exemplu
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Încearcă - l singur » Mese Styling
Utilizați "ui-shadow" clasa pentru a adăuga umbre la masa:
Adăugați umbră
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Încearcă - l singur » Pentru mai multe stil de masă, utilizați CSS:
Adăugați un chenar jos pentru toate rândurile de masă
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Încearcă - l singur » Adăugați un chenar jos la toate <th> elemente și o culoare de fundal pentru toate chiar rândurile de masă
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Încearcă - l singur »