halaman mudah alih jQuery
Mula belajar jQuery Mobile
 | 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 |
|---|
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <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> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Analisis contoh:
data-role="page" ialah halaman yang dipaparkan dalam penyemak imbas.
data-role="header" ialah bar alat yang dibuat di bahagian atas halaman (biasanya digunakan untuk tajuk atau butang carian)
data- role="main" mentakrifkan kandungan halaman, seperti teks, gambar, borang, butang, dsb.
Kelas "ui-kandungan" digunakan untuk menambah padding dan margin pada halaman.
data-role="footer" digunakan untuk membuat bar alat di bahagian bawah halaman.
Dalam bekas ini anda boleh menambah sebarang elemen HTML - perenggan, imej, tajuk, senarai, dsb.
| jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。 |
|---|
Tambah jQuery Mobile pada halaman anda
Dengan jQuery Mobile, anda boleh mencipta berbilang halaman berbeza daripada satu fail HTML.
Anda boleh menggunakan atribut href yang berbeza untuk membezakan halaman menggunakan id unik yang sama:
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎! 点击以下链接跳转到第二个页面。 </p> <a href="#pagetwo">跳转到第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>这是第二个页面。点击以下链接跳转到第一个页面。</p> <a href="#pageone">跳转到第一个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Jalankan Instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
Nota: Apabila aplikasi web mempunyai sejumlah besar kandungan (teks, gambar, skrip, dsb.) Akan menjejaskan masa pemuatan secara serius. Jika anda tidak mahu menggunakan pautan halaman dalaman, anda boleh menggunakan fail luaran:
<a href="externalfile.html">访问外部文件</a>
Halaman digunakan sebagai kotak dialog
Kotak dialog digunakan untuk dipaparkan maklumat halaman atau maklumat borang input.
Tambah data-rel="dialog" pada pautan untuk membenarkan kotak dialog muncul apabila pengguna mengklik pautan:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo">弹出对话框</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>我是一个对话框！</h1> </div> <div data-role="main" class="ui-content"> <p>对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。</p> <a href="#pageone">跳转到第一个页面</a> </div> <div data-role="footer"> <h1>对话框底部文本</h1> </div> </div> </body> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
