Form Ponsel jQuery

meja responsif

desain responsif umumnya digunakan untuk beradaptasi pengguna berbagai perangkat mobile.

Kita hanya perlu menggunakan nama kelas sederhana, jQuery Mobile secara otomatis akan menyesuaikan konten halaman sesuai dengan ukuran layar.

bentuk responsif terhadap konten halaman di perangkat mobile dan desktop untuk mengakhiri adaptasi yang baik.

meja responsif ada dua jenis: reflow (refluks) dan kolom switching.

Form refluks

Refluks bentuk model yang cukup ukuran layar yang besar ditampilkan secara horizontal, sedangkan ukuran layar yang cukup kecil, semua data akan menjadi vertikal.

Membuat tabel di <table> elemen untuk menambahkan data-role = "meja" dan "ui-responsif" Kategori:

contoh

Coba »

	Untuk bentuk responsif, Anda harus menyertakan <thead> dan <tbody> elemen. Jangan menggunakan atribut rowspan atau colspan; meja responsif tidak didukung oleh dua sifat.

kolom beralih

switching model kolom akan disembunyikan ketika lebar data tidak cukup.

Buat beralih modus kolom tabel adalah sebagai berikut:

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

Secara default, jQuery Mobile pertama akan menyembunyikan kolom di sebelah kanan meja. Namun, Anda dapat menentukan urutan kolom tersembunyi dengan menambahkan data atribut-prioritas di kepala tabel (<th>), data nilai-prioritas dapat dari 1 (prioritas tertinggi) sampai 6 (prioritas terendah):

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

	Jika Anda tidak menentukan prioritas tidak terdaftar, maka kolom akan selalu ada dan tidak akan disembunyikan.

Kombinasi dari dua potong atas kode bersama-sama untuk membuat tabel kolom switching, sehingga pengguna dapat menyesuaikan kolom yang ingin menyembunyikan tabel:

contoh

<Tabel data-role = "tabel " Data-mode = "columntoggle" class = "ui-responsif" id = "myTable">
<Thead>
<Tr>
<Th Data-prioritas = "6 "> Pelanggan </ th>
<Th> CustomerName </ th>
<Th Data-prioritas = "1 "> ContactName </ th>
<Th Data-prioritas = "2 "> Alamat </ th>
<Th Data-prioritas = "3 "> Kota </ th>
<Th Data-prioritas = "4 "> PostalCode </ th>
<Th Data-prioritas = "5 "> Negara </ 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> Jerman </ td>
</ Tr>
</ Tbody>
</ Table>

Coba »

Kita dapat menggunakan data atribut-kolom-btn-teks untuk memodifikasi teks tabel switch: