Halaman jQuery Mobile
Mulai Belajar jQuery Mobile
 | Meskipun jQuery Mobile adalah kompatibel dengan semua perangkat mobile, tetapi tidak sepenuhnya kompatibel dengan PC (karena dukungan CSS3 terbatas). Dalam rangka untuk lebih membaca tutorial ini, kami menyarankan Anda menggunakan browser Google Chrome. |
|---|
contoh
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
Coba »
contoh analisis:
- = "Halaman" Data-peran adalah halaman di browser untuk menampilkan.
- Data-role = "header" adalah tool bar di bagian atas halaman yang dibuat (biasanya digunakan untuk judul atau tombol pencarian)
- Data-role = "main" mendefinisikan isi halaman, seperti teks, gambar, bentuk, tombol dan sebagainya.
- "Ui-konten" kelas untuk halaman ini padding dan margin.
- Data-role = "footer" yang digunakan untuk membuat bagian bawah halaman toolbar.
- Dalam wadah ini Anda dapat menambahkan elemen HTML - paragraf, gambar, judul, daftar, dll
| jQuery Mobile mengandalkan HTML5 data- * atribut untuk mendukung berbagai elemen UI, transisi, dan struktur halaman. Browser tidak mendukung mereka, mereka akan dibuang diam-diam. |
|---|
Menambahkan jQuery Mobile di halaman
Gunakan jQuery Mobile, Anda dapat membuat file HTML tunggal dalam jumlah halaman yang berbeda.
Anda dapat menggunakan atribut href yang berbeda untuk membedakan antara menggunakan id unik yang sama halaman:
contoh
<Div Data-role = "page " id = "pageone">
<Div Data-role = "main" class = "ui-content">
<a href="#pagetwo"> untuk melompat ke halaman kedua </a>
</ Div>
</ Div>
<Div Data-role = "page " id = "pagetwo">
<Div Data-role = "main" class = "ui-content">
<a href="#pageone"> untuk melompat ke halaman pertama </a>
</ Div>
</ Div>
<Div Data-role = "main" class = "ui-content">
<a href="#pagetwo"> untuk melompat ke halaman kedua </a>
</ Div>
</ Div>
<Div Data-role = "page " id = "pagetwo">
<Div Data-role = "main" class = "ui-content">
<a href="#pageone"> untuk melompat ke halaman pertama </a>
</ Div>
</ Div>
Coba »
Catatan: Ketika aplikasi web memiliki banyak konten (teks, gambar, script, dll) serius akan mempengaruhi waktu buka. Jika Anda tidak ingin menggunakan link di halaman Anda dapat menggunakan file eksternal:
<a href="externalfile.html">访问外部文件</a>
Halaman sebagai penggunaan dialog
kotak dialog digunakan untuk menampilkan tampilan halaman informasi atau bentuk masukan informasi.
Tambahkan data link-rel = "dialog" kotak dialog pop-up memungkinkan pengguna untuk mengklik pada link:
contoh
<Div Data-role = "page" id = "pageone">
<Div Data-role = "main" class = "ui-content">
<a href="#pagetwo"> melompat ke halaman kedua </a>
</ Div>
</ Div>
<Div Data-role = "halaman " Data-dialog = "true" id = "pagetwo">
<Div Data-role = "main" class = "ui-content">
<a href="#pageone"> melompat ke halaman pertama </a>
</ Div>
</ Div>
<Div Data-role = "main" class = "ui-content">
<a href="#pagetwo"> melompat ke halaman kedua </a>
</ Div>
</ Div>
<Div Data-role = "halaman " Data-dialog = "true" id = "pagetwo">
<Div Data-role = "main" class = "ui-content">
<a href="#pageone"> melompat ke halaman pertama </a>
</ Div>
</ Div>
Coba »