jQuery Mobile-Formular

Responsive Tisch

Responsive Design wird der Benutzer anzupassen eine Vielzahl von mobilen Geräten verwendet.

Wir brauchen nur einen einfachen Klassennamen zu verwenden, jQuery Mobile automatisch den Inhalt der Seite entsprechend der Größe des Bildschirms anpassen.

Responsive Form auf die Seite Inhalte auf mobilen und Desktop-Geräten eine gute Anpassung zu beenden.

Responsive Tabelle gibt es zwei Arten: Reflow (Reflux) und Säulenschaltung.

Reflux-Formular

Reflux Modellform ausreichend großen Bildschirm wird horizontal angezeigt, während die Bildschirmgröße klein genug ist, werden alle Daten werden vertikal.

Erstellen Sie eine Tabelle in der <table> Elementdaten-Rolle hinzufügen = "Tabelle" und "ui-responsive" Kategorie:

Beispiele

Versuchen »

	Für die ansprechende Form, müssen Sie die <thead> und <tbody> -Element enthalten. Nicht rowspan oder colspan-Attribut verwenden; ansprechende Tabelle wird nicht durch diese beiden Eigenschaften unterstützt.

Säulenschaltung

Säulenschaltung Modell wird ausgeblendet, wenn die Datenbreite nicht ausreicht.

Erstellen Sie eine Tabelle, Spalte Modus-Schalter ist wie folgt:

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

Standardmäßig wird jQuery Mobile zunächst die Spalte auf der rechten Seite der Tabelle auszublenden. Sie können jedoch die Reihenfolge der Spalten festlegen, versteckt von Daten-Priorität Attribut im Tabellenkopf Hinzufügen (<th>), Daten-Prioritätswert kann von 1 (höchste Priorität) bis 6 (niedrigste Priorität) sein:

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

	Wenn Sie nicht die Priorität festlegen, nicht aufgeführt ist, dann wird die Spalte immer vorhanden und wird nicht ausgeblendet werden.

Die Kombination der beiden oben genannten Teile des Codes zusammen eine Spaltenschalttabelle zu schaffen, so dass die Benutzer anpassen können, welche Spalten der Tabelle ausblenden möchten:

Beispiele

<Table data-role = "Tabelle " data-mode = "columntoggle" class = "ui-responsive" id = "myTable">
<Thead>
<Tr>
<Th data-Priorität = "6 "> CustomerID </ th>
<Th> Kundenname </ th>
<Th Daten Priorität = "1 "> Contact </ th>
<Th data-Priorität = "2 "> Adresse </ th>
<Th data-Priorität = "3 "> City </ th>
<Th Daten Priorität = "4 "> Postal </ th>
<Th data-Priorität = "5 "> Land </ 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> Deutschland </ td>
</ Tr>
</ Tbody>
</ Table>

Versuchen »

Wir können die Daten-Spalte-btn-Textattribut verwenden, um die Schalter Tabelle Text zu ändern: