Komórka jQuery Form

responsive tabeli

Responsive projekt jest powszechnie stosowane w celu dostosowania użytkownikowi szereg urządzeń mobilnych.

Trzeba tylko użyć prostego nazwę klasy, jQuery Mobile automatycznie dostosować zawartość strony w zależności od rozmiaru ekranu.

Responsive formą do zawartości strony na urządzeniach mobilnych i stacjonarnych do końca dobrą adaptację.

Responsive tabeli istnieją dwa typy: reflow (refluks) i przełączanie kolumn.

refluks Formularz

Wzór formularza refluks wystarczająco duży rozmiar ekranu jest wyświetlana poziomo, podczas gdy rozmiar ekranu jest na tyle mała, wszystkie dane będą stać pionowo.

Tworzenie tabeli w sekcji <table>, aby dodać data-role = "stół" i kategorii "ui reagujący":

Przykłady

Spróbuj »

	Dla postaci elastycznej, należy podać <thead> i <tbody> element. Nie stosować atrybut rowspan lub colspan; reaguje tabela nie jest obsługiwana przez te dwie właściwości.

kolumna przełączanie

Kolumna modelu przełączanie będą ukryte, gdy szerokość danych nie wystarcza.

Tworzenie przełącznik trybu kolumna tabeli przedstawia się następująco:

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

Domyślnie jQuery Mobile będzie pierwszym ukryć kolumnę po prawej stronie tabeli. Można jednak określić kolejność kolumn ukrytych dodając atrybut danych priorytetu w głowie tabeli (<th>) wartość danych priorytecie może wynosić od 1 (najwyższy priorytet) do 6 (najniższy priorytet):

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

	Jeśli nie zostanie określony priorytet nie ma na liście, a następnie kolumna zawsze będzie istnieć i nie zostaną ukryte.

Połączenie powyższych dwóch kawałków kodu razem, aby utworzyć tabelę przełączania kolumn, dzięki czemu użytkownicy mogą dostosować kolumny, które chcesz ukryć tabelę:

Przykłady

<Table data-role = "tabeli " Dane-mode = "columntoggle" class = "ui reagujący" id = "myTable">
<THEAD>
<Tr>
<Th danych priorytetu = "6 "> CustomerID </ th>
<Th> CustomerName </ th>
<Th danych priorytetu = "1 "> ContactName </ th>
<Th danych priorytetu = "2 "> Adres </ th>
<Th danych priorytetu = "3 "> Miasto </ th>
<Th danych priorytetu = "4 "> PostalCode </ th>
<Th danych priorytetu = "5 "> Kraj </ 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> Niemcy </ td>
</ Tr>
</ Tbody>
</ Table>

Spróbuj »

Możemy użyć atrybutu danych kolumny btn-tekstową zmodyfikować tekst tabeli Przełącznik: