jquery mobile 移动web(5)_jquery

Senarai pesanan

 　　<div data-role="content">
　　　　<ol data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ol>
 　　</div>

Senarai baca sahaja

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

Senarai butang yang boleh diasingkan

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

Mengandungi senarai kiraan gelembung

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

Pilihan konfigurasi.

Apabila jquery Mobile mula berjalan, ia akan mencetuskan acara mobileinit pada objek dokumen. Kita boleh mengatasi fungsi lalai sepadan melalui acara ini. Konfigurasikan pelbagai parameter atribut.

Cara menggunakannya:

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

Menyediakan pembangun dengan objek: $.mobile Tujuan objek ini adalah untuk mengkonfigurasi pelbagai pilihan dan konfigurasi lalai.

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

　　Pilihan boleh dikonfigurasikan:

1.ns

Jenis: Rentetan, lalai ialah rentetan bukan kosong.
Penggunaan: $.mobile.ns="mynamespace"
Penerangan: Sesuaikan ruang nama dan elakkan ruang nama.

2.autolinitializePage

Jenis: Jenis Boolean, lalai adalah benar.
Penggunaan: $.mobile.autoInitializePage = false
Perihalan: Secara lalai, apabila elemen DOM halaman sudah sedia, program akan memuatkan fungsi $.mobile.initializePage secara automatik jika ditetapkan kepada

palsu

Halaman tidak akan dibuat dan akan kekal tersembunyi.

3.subPageUrlKey

Jenis: rentetan, nilai lalai ialah halaman-ui.

Penggunaan: $.mobile.subPageUrlkey = "halaman"

Penerangan: Tukar nama parameter utama paparan jQuery Mobile dalam alamat URL Apabila parameter yang dipilih ditukar kepada subPageUrlKey = "halaman", alamat url

akan ditukar kepada

　　　example.html?page=subpage.

4.activePageClass

Jenis: rentetan, nilai lalai ialah ui-page-active

Penggunaan: $.mobile.activePageClass = “ui-ns-page-active”.

Penerangan: Fungsi utama adalah untuk menyesuaikan gaya css paparan halaman keadaan aktif dan keadaan peralihan.

5.activeBtnClass

Jenis: rentetan, nilai lalai ialah ui-btn-active

Penggunaan: $.mobile.activeBtnClass = "ui-ns-page-active"

Penerangan: Fungsi utama pilihan ini adalah untuk menyesuaikan gaya gadis aktif.

6.ajaxEnabled

Jenis: Nilai Boolean, nilai lalai adalah benar

Penggunaan: $.mobile.ajaxEnabled = palsu

Penerangan: Tetapkan sama ada hendak menggunakan Ajax untuk memuatkan halaman atau menyerahkan data apabila mengklik sambungan atau menyerahkan borang atau butang.

　7.hashListeningEnabled

Jenis: Nilai Boolean, nilai lalai adalah benar;

Penggunaan: $.mobile.hashListeningEnabled = palsu

Penerangan: Tetapkan sama ada untuk memantau dan memproses perubahan lokasi.cincang secara automatik Jika ditetapkan kepada palsu, anda boleh menggunakan kaedah manual untuk memproses perubahan cincang atau hanya menggunakan sambungan

Alamat akan diubah hala.

8.defaultPageTransition

Jenis: rentetan, nilai lalai ialah slaid

Penggunaan: $.mobile.defaultPageTransition = “fade”

Penerangan: Parameter pilihan ini terutamanya menetapkan kesan lalai penukaran halaman Jika ditetapkan kepada tiada, tidak akan ada kesan apabila menukar halaman

Slaidup (slaid dari bawah ke atas) slaid ke bawah (dari atas ke bawah) pop (dari tengah)

9.touchOverflowEnabled

Jenis: Nilai Boolean, nilai lalai adalah palsu

Penggunaan: $.mobile.touchOverflowEnabled = benar

Perihalan: Sama ada hendak menggunakan ciri tatal asli peranti.

　10.defaultDialogTransition

Jenis: rentetan, nilai lalai ialah pop

Penggunaan: $.mobile.defaultDialogTransition = "tiada"

Penerangan: Tetapkan kesan pop timbul kotak dialog Ajax Jika ditetapkan kepada tiada, tidak akan ada kesan yang berlebihan.

　11.minScrollBack

Jenis: Rentetan, nilai lalai ialah 150

Penggunaan: $.mobile.minScrollBack = “200”

Penerangan: Fungsi memori kedudukan tatal akan dicetuskan hanya apabila tatal melebihi ketinggian yang ditetapkan.

　12.loadingMessage

Jenis: StringNilai lalai sedang dimuatkan

Penggunaan: $.mobile.loadingMessage = "Memuatkan"

Penerangan: Tetapkan kandungan teks status pemuatan halaman. Jika ditetapkan kepada palsu, tiada apa yang akan dipaparkan.

　13.pageLoadErrorMessage

Jenis: Rentetan, nilai lalai ialah Ralat Memuatkan Halaman

Penggunaan: $.mobile.pageLoadErrorMessage = "Pemuatan halaman gagal"

Penerangan: Tetapkan kandungan teks gesaan yang dipaparkan apabila permintaan halaman Ajax gagal

14.gredA

Jenis: Nilai Boolean, nilai lalai ialah nilai $.support.mediaquery

Penggunaan: $.mobile.gradeA

Penerangan: Benar akan dikembalikan apabila penyemak imbas memenuhi semua syarat yang disokong

3 Kelemahan JQuery Mobile dan HTML5

1. Berjalan lebih perlahan daripada apl asli: Kelemahan terbesar pada pendapat saya ialah walaupun pada perkakasan Android dan iOS terkini (telefon Android Tegra 2 dwi-teras, tablet iPad2 dwi-teras), apl Mudah Alih JQuery adalah lebih perlahan

Dalam program asli. Terutamanya pada Android, penyemak imbas lebih perlahan dan lebih buggy daripada pada iOS (walaupun Google ialah syarikat yang memfokuskan pada web). Saya tidak menguji program saya pada peranti Android yang lebih lama, mungkin ia tidak akan dijalankan sama sekali (cth. Android G1). Saya percaya bahawa dalam tempoh 12-24 bulan akan datang, kelajuan perkakasan akan bertambah baik dengan cepat (contohnya, peranti empat teras akan tersedia tidak lama lagi pada tahun 2011), dan prestasi mungkin tidak menjadi masalah tidak lama lagi. Tetapi hari ini, ia benar-benar kelemahan. Jika anda hanya memfokuskan pada iOS, anda boleh menjangkakan prestasi penyemak imbas, sekurang-kurangnya ia boleh dipercayai dalam hal itu (tidak seperti Android, BlackBerry, dll.)

2. Pelik (penyemak imbas merentas, pembangunan merentas platform): JQuery Mobile masih versi beta, jadi saya menghadapi banyak pepijat. Walau bagaimanapun, pasukan JQuery masih aktif bertindak balas terhadap isu yang dibangkitkan pada GitHub. Saya fikir salah satu isu terbesar ialah tingkah laku pelik pelbagai penyemak imbas pada platform mudah alih yang berbeza. Isu ini sentiasa dikritik. Apl itu mungkin kelihatan agak pelik - walaupun saya rasa pasukan JQuery Mobile melakukan kerja yang hebat dengan widget dan tema, ia kelihatan berbeza dengan ketara daripada apl asli. Tidak diketahui sejauh mana kesan isu ini kepada pengguna, tetapi ia adalah sesuatu yang perlu diberi perhatian.

3. Keupayaan terhad berbanding program asli: Jelas sekali, JavaScript yang dijalankan dalam penyemak imbas tidak dapat mengakses sepenuhnya banyak ciri peranti. Contoh biasa ialah kamera. Walau bagaimanapun, alatan seperti PhoneGap boleh membantu menyelesaikan banyak masalah biasa. Saya sebenarnya telah mula menggunakan beberapa versi apl saya ke iOS dan Android melalui PhoneGap, menggunakan pengikatan Facebook asli, dan saya kagum dengan hasilnya. Saya akan menulis tentang pengalaman saya menggunakan PhoneGap dalam blog akan datang.