Ringkasan Penggunaan berbagai efek switching halaman dan kotak dialog modal di HTML5

Artikel ini terutama memperkenalkan penggunaan berbagai efek switching halaman dan kotak dialog modal untuk Anda. Ini memperkenalkan teknik menggunakan berbagai elemen halaman HTML5 secara lebih rinci. Itu sangat praktis. Teman yang membutuhkannya bisa merujuknya.

Artikel ini merangkum berbagai efek switching halaman dan penggunaan dialog modal HTML5 secara detail. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

Properti transisi data dapat menentukan efek animasi dari switching halaman.

Misalnya: <a href = index.html transisi data = pop> saya akan pop </a>

Tabel parameter transisi data:

Deskripsi parameter

Geser dari kanan ke kiri ke halaman

Slideup meluncur ke atas dari bawah

Slidedown slide dari atas ke bawah

Pop secara bertahap mengembang dari pusat

Fade secara bertahap muncul

flip flip

Catatan: Jika Anda ingin menampilkan tombol Kembali pada halaman target, Anda dapat menambahkan atribut Data-Direction = Reverse ke tautan. Atribut ini sama dengan data asli-back = true. Saya tidak tahu atribut mana yang akan dipertahankan dalam versi resmi.

Dialog modal adalah lapisan yang mengambang semu dengan bilah judul bulat dan tombol tutup untuk acara eksklusif. Halaman terstruktur apa pun dapat digunakan untuk mengimplementasikan aplikasi dialog modal menggunakan tautan dialog data-rel =.

Misalnya: <a href = foo.html data-rel = dialog> dialog buka </a>

Efek pengalihan halaman ini juga dapat menggunakan efek parameter transisi data dari halaman standar. Dianjurkan untuk menggunakan parameter POP, Slideup dan Flip untuk mencapai hasil yang lebih baik.

Kotak dialog modal ini akan menghasilkan tombol tutup secara default, yang digunakan untuk kembali ke halaman induk. Pada perangkat dengan kemampuan skrip yang lemah, Anda juga dapat menambahkan tautan dengan data-rel = kembali untuk mengimplementasikan tombol tutup.

Untuk perangkat yang mendukung skrip, Anda dapat secara langsung menggunakan href =# atau data-rel = kembali untuk mencapai shutdown. Anda juga dapat menggunakan metode tutup bawaan untuk menutup kotak dialog modal, seperti: $ ('. UI-dialog'). Dialog ('tutup').

Karena kotak dialog modal adalah halaman sementara yang ditampilkan secara dinamis, halaman ini tidak akan disimpan dalam tabel hash, yang berarti kita tidak dapat mundur ke halaman ini. Misalnya, jika Anda mengklik tautan di halaman A untuk membuka kotak dialog B, operasi selesai dan kotak dialog ditutup, dan kemudian melompat ke halaman C. Pada saat ini, Anda mengklik tombol kembali browser, dan Anda akan kembali ke halaman A, bukan Halaman B.

Toolbar terutama digunakan di header, footer dan area lainnya, dan digunakan untuk mendukung dan mengimplementasikan penerapan fungsi bisnis di halaman. JQuery Mobile memberikan solusi yang relatif lengkap.

Toolbar dibagi menjadi tiga aplikasi: header bar, footer bar dan navigasi (nav bar).

Di antara mereka, judul dan footer diterapkan dalam beberapa cara berbeda di halaman. Toolbar default diposisikan dengan cara sebaris. Metode penentuan posisi ini dapat mencapai kompatibilitas maksimum, termasuk optimasi yang baik untuk perangkat dengan skrip yang buruk dan kompatibilitas CSS.

Metode lain adalah memperbaikinya, yang juga bisa statis. Metode penentuan posisi ini memungkinkan bilah alat untuk selalu disimpan di bagian atas atau bawah layar. Dan Anda dapat menerima acara klik untuk menampilkan/menyembunyikan bilah alat, yang telah mencapai tujuan memaksimalkan penggunaan ruang layar.

Metode Implementasi: Tambahkan posisi data = atribut tetap ke area judul dan footer.

Wadah judul adalah kontrol tampilan untuk area header halaman, yang terutama digunakan untuk menampilkan judul dan area operasi utama.

Kode Struktur: