Rumah >hujung hadapan web >tutorial js >jQuery mobile 移动web(6)_jquery
jenis acara mudah alih jquery untuk peranti mudah alih.
1.acara sentuh.
Ketik dengan cepat sentuh skrin dan pergi, sama seperti operasi klik lengkap.
Ketik Tahan Sentuh skrin dan tahannya untuk tempoh masa.
leret dicetuskan apabila piksel skrin bergerak secara mendatar sebanyak 30px dalam masa 1 saat.
leret ke kiri Luncurkan ke kiri
leret seperti meluncur ke kanan.
2. Acara tukar arah
Fungsi acara orientationchange dicetuskan apabila orientasi peranti mudah alih berubah Parameter kedua dalam fungsi panggil balik acara mengembalikan parameter yang digunakan untuk mengenal pasti orientasi semasa,
.
Parameter ini mempunyai dua nilai pulangan: potret (menegak) dan landskap (mendatar).
3. Tatal acara,
scrollstart Peristiwa ini dicetuskan apabila skrol bermula.
scrollend Peristiwa ini dicetuskan apabila penatalan tamat.
4. Tunjukkan/Sembunyi
Acara Pagebeforeshow dicetuskan sebelum paparan mula muncul pada skrin melalui kesan animasi.
Pagebeforehide mencetuskan acara sebelum paparan mula disembunyikan melalui kesan animasi,
Acara Pageshow dicetuskan apabila paparan dipaparkan pada skrin melalui kesan animasi.
Pagehide dicetuskan apabila paparan disembunyikan melalui kesan animasi.
Kod sampel:
$("div").live("pageshow",function(event,ui){ alert("this page just hidden"+ui.prevPage) })
5 Simulasikan acara tetikus
vmouseover mengendalikan acara sentuh dan alih tetikus secara seragam.
vmousedown mengendalikan acara tekan sentuh dan tetikus secara seragam.
vmousemove mengendalikan acara pergerakan sentuh dan tetikus secara seragam.
vmouseup mengendalikan acara pelepasan butang sentuh dan tetikus secara seragam.
vclick mengendalikan peristiwa klik sentuh dan tetikus secara seragam.
vmousecancel mengendalikan sentuhan dan tetikus meninggalkan acara secara seragam.
Bantuan paparan halaman
1. $.mobile.changePage
Tukar kesan pensuisan antara dua paparan melalui pengaturcaraan berfungsi. Biasanya kesan pensuisan disesuaikan apabila mengklik hiperpautan atau menyerahkan borang.
Tatabahasa:
$.mobile.changePage(to,options); to 是必选参数, 可以传递的参数类型包括字符串,对象。 options 可选,传递的是一个JSON 数据格式对象, 用法: 以下实例将改变decondPage.html 的页面效果 $.mobile.changePage("secondPage.html",{ transition:"slidedown" })
Operasi penyerahan borang
$.mobile.changePage("submit.php",{ type:"post"; data:$("form#add").seriaize(); })
2.$.mobile.loaPage
Fungsi utama adalah untuk memuatkan halaman luaran dan memasukkannya ke dalam elemen DOM halaman semasa.
$.mobile.loadPage(url,options);
URL ialah parameter yang diperlukan, menghantar alamat URL mutlak atau relatif
Pilihan ialah parameter pilihan, menghantar objek data JSON.
Contoh:
$.mobile.loadPage("secomdPage.html"); 提交表单并加载结果页面: $.mobile.loadPage("result.php",{ type:"get", data:$("form#search").serizlize(); })
Storan data:
1.jqmData() kaedah;
Anda boleh mengikat sebarang data pada elemen.
$.mobile.jqmData(elemen,kunci,nilai)
Parameter elemen menentukan elemen yang perlu diikat dengan data;
Kunci ialah nama atribut yang perlu diikat pada data,
Data yang terikat dengan nilai.
Kaedah 2.jqmRemoveData():
Kaedah ini adalah untuk mengalih keluar data yang terikat pada elemen,
$.mobile.jqmRemoveData([nama])
Nama ialah parameter pilihan yang menentukan atribut data yang perlu dialih keluar Jika tiada parameter diluluskan, semua data pada elemen perlu dialih keluar.
3.jqmHasData() kaedah
Tentukan sama ada terdapat data terikat pada elemen,
$.mobile.jqmHasData(elemen);
Parameter elemen ialah elemen DOM untuk semakan data.
Pembantu laluan alamat:
1. Huraikan alamat URL
Fungsi $.mobile.path.parseUrl menghuraikan spesifikasi Url dan mengembalikan objek yang mengandungi semua nilai parameter, membolehkan kami mengakses sifat parameter pada alamat Url dengan mudah.
Sintaks fungsi parseUrl
Parameter url ialah alamat URL relatif atau mutlak dan parameter yang dihantar masuk diperlukan.
Fungsi parseUrl mengembalikan objek yang mengandungi sifat kaya.
Atribut: cincang Perihalan: Semua kandungan aksara selepas tanda # adalah bersamaan dengan cincang lokasi
Atribut: hos Penerangan: Nama hos dan nombor port URL
Atribut: nama hos Penerangan: Mengembalikan nama hos yang mengandungi URL sahaja.
Atribut: href Penerangan: Kembalikan keseluruhan alamat URL.
Atribut: nama laluan Penerangan: Mengembalikan laluan berkaitan fail atau direktori
Atribut: port Perihalan: Permintaan untuk mengembalikan nombor port Url
Atribut: portocol Penerangan: Mengembalikan protokol alamat Url permintaan, seperti http https
Atribut: carian Penerangan: Parameter permintaan selepas "?" dalam alamat pemulangan
Atribut: kuasa Penerangan: Mengembalikan alamat yang terdiri daripada nama pengguna, kata laluan, nama hos dan nombor port,
Atribut: direktori Penerangan: Mengembalikan laluan direktori alamat URL yang diminta,
Atribut: domain Penerangan: Mengembalikan laluan yang terdiri daripada protokol protokol dan kuasa
Atribut: nama fail Penerangan: Mengembalikan nama fail Url yang diminta
Atribut: hrefOfHash Penerangan: Mengembalikan laluan URL yang tidak mengandungi nilai cincang.
Atribut: hrefOfSearch Penerangan: Mengembalikan laluan URL yang tidak mengandungi parameter permintaan dan nilai cincang.
Atribut: kata laluan Penerangan: Mengembalikan kata laluan dalam URL permintaan, seperti kata laluan protokol ftp.
Atribut: nama pengguna Penerangan: Mengembalikan nama pengguna dalam URL permintaan, seperti nama pengguna protokol ftp.
memuatkan rancangan/sembunyi
$.mobile.showPageLoadingMse();
Kaedah untuk menyembunyikan kotak dialog pemuatan ialah
$.mobile.hidePageLoadingMse();
3 Kelebihan JQuery Mobile dan HTML5
1. Bermula dengan cepat dan sokong lelaran pantas: Dalam masa lebih sedikit daripada seminggu, dengan membaca dokumentasi JQuery Mobile dan buku JQuery Mobile yang diterbitkan oleh O'Reilly, saya melengkapkan versi awal apl yang berfungsi. Saya tidak mempunyai pengalaman pembangunan HTML5/JQuery Mobile sebelum ini. Berbanding dengan Android dan iOS, membina UI dan logik anda menggunakan JQuery Mobile dan HTML5 akan menjadi lebih pantas daripada membina di bawah sistem asli.Anotasi: Sistem asli: Sistem pengendalian asal, seperti sistem asli Android, iaitu sistem yang tidak diubah suai dikeluarkan oleh Google. Dalam artikel ini, aplikasi asli merujuk kepada program yang dibangunkan secara langsung menggunakan API yang disediakan oleh sistem, sepadan dengan program yang dibangunkan oleh JQuery Mobile.
Saya mendapati antara muka Apple's Builder mempunyai keluk pembelajaran yang curam, dan mempelajari sistem reka letak Android yang berbelit-belit juga memakan masa. Selain itu, menyambungkan paparan senarai ke sumber data jauh dan mempunyai rupa dan rasa yang menarik menggunakan kod asli adalah agak rumit (ListView pada Android, UITableView pada iOS saya dapat melakukan ini dengan pengetahuan sedia ada saya tentang JavaScript dan HTML/CSS). . Laksanakan fungsi yang sama dengan pantas tanpa mempelajari konsep abstrak baharu seperti penyesuai, perwakilan, dll. Anda hanya boleh menulis kod JQuery.
2. Elakkan proses kelulusan App Store yang menyusahkan dan kesakitan penyahpepijatan dan pembinaan: Proses yang paling menyakitkan untuk membangunkan aplikasi untuk telefon bimbit, terutamanya telefon mudah alih iOS, adalah untuk mendapatkan kelulusan daripada Apple App Store. Untuk mendapatkan apl asli yang dikeluarkan kepada pengguna iOS, anda perlu menunggu proses yang agak lama (ia boleh mengambil masa berhari-hari, malah mungkin berminggu-minggu). Bukan sahaja keluaran pertama program merupakan tribulasi, tetapi begitu juga setiap peningkatan seterusnya. Ini merumitkan proses QA dan pelepasan serta menambah masa tambahan. Memandangkan aplikasi Mudah Alih JQuery hanyalah aplikasi web, ia mewarisi kelebihan semua persekitaran web: apabila pengguna memuatkan tapak anda, mereka serta-merta "dinaik taraf" kepada versi terkini. Pepijat boleh diperbaiki dan ciri baharu ditambah serta-merta. Walaupun dalam sistem Android - keperluan pasaran aplikasi jauh lebih santai daripada persekitaran Apple, ia juga merupakan perkara yang baik untuk melengkapkan peningkatan produk tanpa diketahui oleh pengguna.
Faedah selanjutnya ialah lebih mudah untuk mengeluarkan versi beta atau ujian. Hanya beritahu pengguna untuk membuka URL anda dalam penyemak imbas mereka dan itu sahaja! Tidak perlu mempertimbangkan DRM iOS yang gila, mahupun APK Android yang diperlukan.
3. Menyokong pembangunan merentas platform dan merentas peranti: Faedah besar ialah apl saya berfungsi pada Android dan IOS serta-merta, dan juga pada platform lain. Sebagai pembangun bebas, mengekalkan asas kod untuk platform yang berbeza adalah satu usaha yang besar. Menulis aplikasi mudah alih berkualiti tinggi untuk satu platform mudah alih memerlukan kerja sepenuh masa dan melakukan perkara serupa berulang kali untuk setiap platform memerlukan banyak sumber. Keupayaan untuk aplikasi berfungsi pada kedua-dua peranti Android dan iOS adalah bonus yang besar untuk saya.
Mengambil selangkah lebih jauh, terutamanya dengan peranti yang menjalankan pelbagai forks Android, yang terdapat dalam semua saiz dan bentuk, adalah sangat penting untuk menjadikan apl anda kelihatan bagus pada telefon dengan pelbagai jenis resolusi skrin. Untuk pembangun Android yang menuntut, menyediakan pemisahan skrin berdasarkan saiz skrin (zum daripada diminimumkan sepenuhnya kepada dimaksimumkan) boleh mengambil banyak masa pembangunan. Memandangkan penyemak imbas akan memaparkannya dengan cara yang sama pada setiap peranti, anda tidak perlu risau tentang aspek ini.