jQuery Mobile ialah perpustakaan rangka kerja web yang sangat popular untuk peranti mudah alih Ia menggunakan HTML dinamik (reka bentuk responsif) untuk membantu pembangun membina tapak web dan aplikasi dengan mudah berdasarkan telefon mudah alih dan tablet. Lompatan ialah cara biasa untuk melaksanakan peralihan antara halaman dalam aplikasi anda yang dibuat dengan jQuery Mobile. Walau bagaimanapun, bagi sesetengah pembangun pemula, mereka mungkin keliru tentang cara melompat antara halaman dalam jQuery Mobile. Dalam artikel ini, kami akan mempelajari cara melaksanakan lompatan dalam jQuery Mobile, serta beberapa masalah biasa yang mungkin berlaku semasa proses lompatan dan penyelesaiannya.

Prinsip asas lompat jQuery Mobile

Pertama sekali, kita perlu memahami prinsip asas lompat dalam jQuery Mobile. Dalam jQuery Mobile, kaedah "$.mobile.changePage()" yang disediakan olehnya biasanya digunakan untuk mencapai lompatan halaman. Kaedah ini boleh membantu anda melaksanakan beberapa teknik lompat halaman yang lebih maju, dan menyokong lompatan ke halaman sebaris dan halaman luaran.

Untuk menggunakan kaedah ini, kita perlu memanggilnya dan lulus URL halaman yang ingin kita lompat sebagai parameter ke dalam kaedah. Sebagai contoh, dengan mengandaikan kita ingin melompat dari halaman semasa ke halaman bernama "page2.html", kita boleh memanggil kaedah "$.mobile.changePage()" seperti berikut:

$.mobile.changePage("page2.html");

Dengan cara ini, apabila memanggil kaedah, jQuery Mobile secara automatik akan menghantar permintaan Ajax dan memuatkan halaman "page2.html" dalam DOM halaman semasa. Dengan memuatkan halaman secara dinamik melalui Ajax, kami boleh menukar halaman dengan lebih pantas dan mengemas kini bahagian yang perlu dikemas kini mengikut keperluan.

Bentuk lompatan yang berbeza

Selain lompatan halaman asas, jQuery Mobile juga menyediakan pelbagai jenis kaedah lompatan yang berbeza untuk menyokong lebih banyak keperluan lompatan. Bentuk lompatan yang berbeza adalah seperti berikut:

Lompatan pautan sebaris

Lompatan pautan sebaris ialah satu lagi cara lompatan halaman yang biasa. Ia adalah cara untuk melompat ke halaman dalam dokumen HTML yang sama (iaitu, halaman terbenam Ia biasanya dilaksanakan dengan teg:

<a href="#page2" data-transition="fade">Go to Page 2</a>

Dalam kod di atas, terdapat teg dalam). halaman , atribut hrefnya menghala ke elemen "halaman2" dalam halaman. Ini akan membolehkan lompatan pautan sebaris, dan apabila pautan diklik, jQuery Mobile akan secara automatik menatal ke elemen halaman dan peralihan dengan kesan peralihan yang ditentukan (dalam kes ini kesan "pudar").

Lompatan Terprogram

Anda juga boleh melaksanakan lompatan halaman secara terprogram. Kaedah ini biasanya digunakan untuk mengendalikan lompatan dinamik, contohnya, melompat ke halaman lain selepas borang diserahkan. Kod untuk melompat ke halaman lain adalah seperti berikut:

$.mobile.changePage("page2.html");

Apabila kami memanggil kaedah "$.mobile.changePage()", ia secara automatik akan menyembunyikan halaman yang sedang dipaparkan dan memaparkan halaman baharu keluar. Pada masa yang sama, jQuery Mobile juga menyediakan beberapa parameter pilihan untuk mengawal cara memaparkan dan beralih ke halaman baharu:

$.mobile.changePage("page2.html", {
    transition: "pop",
    reverse: true
});

Dalam kod di atas, kami menyediakan parameter pilihan tambahan dan menggunakan nama Untuk "pop" kesan peralihan, urutan flip juga ditakrifkan untuk menukar arah penukaran halaman.

Kaedah awam baharu (versi 1.4)

Selepas jQuery Mobile versi 1.4, disebabkan kerumitan kaedah $.mobile.changePage(), kaedah awam baharu diperkenalkan secara rasmi untuk melaksanakan halaman lompat berubah. Kaedah awam baharu ini dipanggil $.mobile.pageContainer.pagecontainer(). Ia sepatutnya menjadi pengganti kaedah $.mobile.changePage() dan lebih mudah dan lebih mudah untuk digunakan.

$.mobile.pageContainer.pagecontainer("change", "page2.html", {
    changeHash: false
});

Kaedah baharu ini mempunyai dua parameter:

• URL halaman untuk melompat ke
• Objek pilihan yang akan dihantar.

Masalah dan penyelesaian biasa

Apabila menggunakan jQuery Mobile untuk lompat halaman, kami mungkin menghadapi beberapa masalah ini adalah masalah biasa dalam lompatan, tetapi Kami boleh menyelesaikannya dengan beberapa cara yang mudah .

Elemen halaman tidak dimuatkan

Dengan menggunakan kaedah $.mobile.changePage(), kami boleh menghidupkan dan bertukar ke halaman baharu secara dinamik. Walau bagaimanapun, mungkin terdapat masalah dengan skrip yang belum dimuatkan lagi apabila mengambil halaman baharu melalui Ajax. Dalam kes ini, kami boleh menggunakan acara "pagebeforeshow" jQuery Mobile untuk mengawal apabila pengendali halaman tertentu dimuatkan.

$(document).on("pagebeforeshow", "#page2", function() {
    // Code to execute before the page is displayed
});

Kod di atas akan dilaksanakan sebelum halaman dimuatkan dan memastikan semua elemen dimuatkan sepenuhnya.

Kesan peralihan tidak lancar

Dengan menggunakan kesan peralihan, kami boleh membuat lompatan halaman lebih lancar dan lebih semula jadi. Walau bagaimanapun, jika kesan peralihan tidak dikendalikan dengan baik, pengalaman lompat halaman akan menjadi tidak lancar. Dalam kes ini, kita harus berusaha untuk meningkatkan pemprosesan untuk menjadikan peralihan lebih lancar.

$.mobile.changePage("page2.html", {
    transition: "slidefade",
    reverse: true,
    complete: function() {
        console.log("Transition complete.");
    }
});

Dalam contoh kod di atas, kami menyediakan pilihan "lengkap" dan memaparkan mesej pada konsol selepas penukaran halaman selesai. Dengan menangkap dan mengendalikan peristiwa penyiapan peralihan, kami boleh menjejak dan mengendalikan isu dengan lebih mudah serta memastikan peralihan halaman yang lancar.

Kekeliruan teg lompat

Kadangkala, kami mungkin menggunakan berbilang teg untuk menandakan elemen halaman dalam halaman HTML sebaris. Walau bagaimanapun, jika teg ini digunakan semula, ia akan menyebabkan kekeliruan teg dan menyebabkan masalah lompat halaman. Dalam kes ini, kami boleh menyelesaikan masalah ini dengan menggunakan ID halaman yang berbeza atau menambahkan rentetan pertanyaan pada penghujung URL.

<a href="page2.html?id=1">Link to Page 2</a>

在上面的代码中，我们使用了查询字符串"id=1"来标识要跳转的页面，以避免重复使用相同的标记。

总结

本文中，我们介绍了如何在jQuery Mobile中实现页面跳转，包括基本的页面跳转、内联链接跳转以及编程方式跳转等多种方式，并且提供了一些常见问题的解决方法。在使用jQuery Mobile以及其他移动设备网页框架库时，跳转是一种必不可少的技能，希望本文对您有所帮助。

Atas ialah kandungan terperinci jquery mudah alih bagaimana untuk melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!