duyarlı Tablolar
Eğer kullanıcının cihazında, cevap için mobil web sayfasının içeriğini istediğinizde Duyarlı tasarımı, onun ekran boyutu ve yönü olarak yararlıdır.
Basit bir sınıf adı ile jQuery Mobile kullanıcının mevcut ekran boyutu farkındadır ve otomatik olarak bu belirli bir kullanıcı için alakalı içerik göstermek için kendini boyutlandırır.
Duyarlı tablolar bize cep ve masaüstü hem de çekici görünecek tablo büyük bir veri kümesini görüntülemek için izin verir.
Yeniden akış ve sütun geçiş: Duyarlı tabloların iki tipi vardır.
yeniden düzenle Tablo
daha sonra tüm sıra üst gruplanmış, minimum boyuta ulaşıncaya kadar yeniden akış modu yatay tablo verileri konumlandırır.
Veri rol = "tablo" ve sınıfını, Tablo oluşturma eklemek "ui-responsive" üzerinde <table> elemanı:
Duyarlı tablo düzgün çalışması için, sen içermelidir <thead> ve <tbody> elemanları.
RowSpan veya colspan özelliklerini kullanmayın; Duyarlı tablolarda desteklenmez.
Sütun Geçiş Tablosu
"column toggle" verileri görüntülemek için yeterli genişlik olmadığı zaman modu sütunları will hide.
Bir sütun geçiş tablo oluşturmak için aşağıdakileri ekleyin <table> elemanı:
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
id="myTable" >Varsayılan olarak, jQuery Mobile tablonun sağ tarafında sütun will hide. Ancak, gizli veya belirli bir sırayla gösterilmesi gerektiğini sütun belirtmek için izin verilir. Ekle data-priority tablonun başlığına niteliği (<th>) ve 1 arasında bir sayı belirtin (highest priority) 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>Bir sütun için bir öncelik belirtmezseniz, sütun kalıcı ve gizleme için kullanılamaz olacaktır.
Hepsini bir araya koyun ve bir sütun geçiş tablosunu oluşturduk! Çerçeve otomatik tablonun sağ üst köşesinde bir düğme ekler dikkat edin. Bu tabloda görüntülenecek sütunu seçmek için kullanım sağlar:
Örnek
<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>
Kendin dene " Geçiş tablosu düğme metni değiştirmek için kullanmak data-column-btn-text niteliğini:
Örnek
<table data-role="table"
data-mode="columntoggle" class="ui-responsive"
data-column-btn-text="Click me to hide or show columns!"
id="myTable"> Kendin dene " Şekillendirme Tabloları
Kullan "ui-shadow" tablosuna gölge eklemek için sınıf:
gölge ekleme
<table data-role="table"
data-mode="columntoggle" class="ui-responsive ui-shadow"
id="myTable">
Kendin dene " ayrıca tablo stil için CSS kullanın:
Bütün tablo satırlarının bir alt sınır ekleyin
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
Kendin dene " Herkese bir alt sınır ekleyin <th> bütün çift tablo satırlarının elemanları ve arka plan rengi
<style>
th {
border-bottom: 1px solid
#d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
Kendin dene "