reagujących Stoły
Responsive projekt jest przydatna, gdy chcesz zawartość swojej stronie internetowej odpowiedzi na mobilnym urządzeniu użytkownika, takich jak jego rozmiar ekranu i orientacji.
Dzięki prostej nazwie klasy, jQuery Mobile jest świadomy użytkownika dostępnej wielkości ekranu i automatycznie zmienia rozmiar, aby pokazać się treści, które są istotne dla danego użytkownika.
Tabele reagujących pozwalają nam na wyświetlanie dużego zestawu danych tabelarycznych, które będą wyglądać atrakcyjnie zarówno dla telefonów komórkowych i stacjonarnych.
Istnieją dwa rodzaje tabel reagujących: reflow i kolumny przegubowego.
Tabela reflow
Tryb reflow ustawia dane w tabeli poziomo, dopóki nie osiągnie minimalnej wielkości, wszystkie rzędy są zgrupowane razem w pionie.
Tworzenie tabeli, dodać data-role = "stół" i klasy "ui-responsive" na <table> element:
Dla reaguje tabeli działało poprawnie, trzeba zawierać <thead> i <tbody> elementy.
Nie używaj rowspan lub colspan atrybuty; nie są one obsługiwane w tabelach elastyczne.
Kolumna Przełącznik Tabela
Tryb "kolumny przełączać" się ukryć kolumny, gdy nie ma wystarczającej szerokości do wyświetlania danych.
Aby utworzyć tabelę kolumny przełączania, należy dodać następujące do <table> element:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Domyślnie jQuery Mobile ukryć kolumny z prawej strony stołu. Jednakże, mogą określić, która kolumna, które powinny być ukryte lub pokazane w określonej kolejności. Dodaj atrybut danych priorytetowych w celu nagłówku tabeli (<th>) i podać numer pomiędzy 1 (najwyższy priorytet) do 6 (najniższy priorytet):
<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>Jeśli nie zostanie określony priorytet dla kolumny, kolumna będzie trwałe i nie jest dostępny dla ukrycia.
Umieścić to wszystko razem i stworzyli tabeli kolumna przełączania! Zauważ, że ramy automatycznie dodaje przycisk w prawym górnym rogu tabeli. To pozwala użytkownikowi wybrać, które kolumny mają być wyświetlane w tabeli:
Przykład
<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>
Spróbuj sam " Aby zmienić tekst przycisku przełączania tabeli, należy użyć atrybutu danych kolumny btn-tekst:
Przykład
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Spróbuj sam " Stylizacja Stoły
Użyj klasy "ui-cień", aby dodać cienie do tabeli:
Dodaj cień
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Spróbuj sam " W celu uzyskania dalszych tabeli stylizacji, użyć CSS:
Dodaj dolną granicę dla wszystkich wierszy tabeli
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Spróbuj sam " Dodaj dolną granicę dla wszystkich <th> elementy oraz kolor tła do wszystkich nawet wierszy tabeli
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Spróbuj sam "