Responsive Tabellen
Responsive Design ist nützlich, wenn Sie den Inhalt Ihrer mobilen Webseite wollen dem Gerät des Benutzers, wie seine Bildschirmgröße und Orientierung zu reagieren.
Mit einem einfachen Klassennamen, ist jQuery Mobile bekannt, die verfügbare Bildschirmgröße des Benutzers und automatisch die Größe selbst Inhalte zu zeigen, dass für diesen bestimmten Benutzer relevant ist.
Responsive Tabellen ermöglichen es uns, eine große Menge von tabellarischen Daten anzuzeigen, die beiden Handys und Desktops für attraktiv aussehen wird.
Es gibt zwei Arten von ansprechenden Tabellen: Reflow und Spalte Knebel.
Reflow Tabelle
Der Reflow-Modus positioniert die Tabellendaten horizontal, bis es eine minimale Größe erreicht, werden alle Zeilen vertikal miteinander gruppiert sind.
Erstellen Sie eine Tabelle, fügen Sie die Daten-role = "Tabelle" und eine Klasse von "ui-responsive" auf dem <table> Element:
Für die ansprechende Tabelle korrekt zu funktionieren, müssen Sie die umfassen <thead> und <tbody> Elemente.
Nicht rowspan oder colspan Attribute verwenden; sie sind nicht in reaktions Tabellen unterstützt.
Spalte Toggle Tabelle
Die "Säule Toggle" -Modus wird Spalten ausblenden, wenn nicht genügend Breite, um die Daten anzuzeigen.
Um eine Spalte Toggle - Tabelle zu erstellen, fügen Sie Folgendes in die <table> Element:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Standardmäßig wird jQuery Mobile Spalten von der rechten Seite der Tabelle auszublenden. Sie sind jedoch die Spalte angeben, erlaubt, die in einer bestimmten Reihenfolge ein- oder ausgeblendet werden soll. Fügen Sie die Daten-Priorität - Attribut auf der Kopfzeile der Tabelle (<th>) und geben Sie eine Zahl zwischen 1 (höchste Priorität) bis 6 (niedrigste Priorität):
<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>Wenn Sie nicht eine Priorität für eine Spalte angeben, wird die Spalte hartnäckig sein und nicht für das Verstecken zur Verfügung.
Setzen Sie alles zusammen, und Sie haben eine Spalte Toggle-Tabelle erstellt! Beachten Sie, dass der Rahmen automatisch eine Schaltfläche in der rechten oberen Ecke der Tabelle hinzufügt. Auf diese Weise können die Benutzer wählen , welche Spalte in der Tabelle anzuzeigen:
Beispiel
<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>
Versuch es selber " Um die Toggle-Tabelle Schaltfläche Text zu ändern, verwenden Sie die Daten-Spalte-btn-Textattribut:
Beispiel
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Versuch es selber " Styling Tables
Verwenden Sie die "ui-Schatten" Klasse Schatten hinzufügen, um den Tisch:
Schatten hinzufügen
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Versuch es selber " Für weitere Tabelle Styling verwenden CSS:
Fügen Sie eine untere Grenze für alle Tabellenzeilen
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Versuch es selber " Fügen Sie eine untere Grenze für alle <th> Elemente und eine Hintergrundfarbe für alle sogar Tabellenzeilen
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Versuch es selber "