Ringkasan html5 pelbagai kesan penukaran halaman dan kotak dialog mod kemahiran tutorial usage_html5

Artikel ini meringkaskan secara terperinci pelbagai kesan penukaran halaman dan penggunaan dialog mod html5. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Animasi halaman:

Atribut peralihan data boleh menentukan kesan animasi penukaran halaman.
Contohnya: Saya akan pop
jadual parameter peralihan data:

Perihalan parameter

slaid slaid masuk dari kanan ke kiri
slaid naik slaid masuk dari bawah
slaid turun slaid masuk dari atas
pop pudar masuk dari tengah kembangkan
pudar pudar masuk
balikkan selak

Nota: Jika anda ingin memaparkan butang kembali dalam halaman sasaran, anda boleh menambah atribut data-direction="reverse" pada pautan ini adalah sama dengan data-back="true". Saya tidak tahu sama ada ia akan berada dalam versi rasmi Atribut yang akan dikekalkan.

Dialog modal

Kotak dialog modal ialah lapisan pseudo terapung dengan bar tajuk bulat dan butang tutup, digunakan untuk aplikasi acara eksklusif. Mana-mana halaman berstruktur boleh menggunakan pautan data-rel="dialog" untuk melaksanakan aplikasi dialog modal.
Contohnya: Buka dialog
Kesan penukaran halaman ini juga boleh menggunakan kesan parameter peralihan data standard muka surat. Adalah disyorkan untuk menggunakan parameter "pop", "slideup" dan "flip" untuk hasil yang lebih baik.
Kotak dialog modal ini akan menjana butang tutup secara lalai untuk kembali ke halaman induk. Pada peranti yang mempunyai keupayaan skrip yang lemah, anda juga boleh menambah pautan dengan data-rel="back" untuk melaksanakan butang tutup.
Untuk peranti yang menyokong skrip, anda boleh terus menggunakan href="#" atau data-rel="back" untuk menutupnya. Anda juga boleh menggunakan kaedah "tutup" terbina dalam untuk menutup kotak dialog modal, contohnya: $('.ui-dialog').dialog('close').
Memandangkan kotak dialog modal ialah halaman sementara yang dipaparkan secara dinamik, halaman ini tidak akan disimpan dalam jadual cincang, yang bermaksud kami tidak boleh kembali ke halaman ini, contohnya, anda mengklik pautan untuk membukanya di halaman A . kotak dialog B, operasi selesai dan kotak dialog ditutup, dan kemudian melompat ke halaman C. Pada masa ini, jika anda mengklik butang belakang penyemak imbas, anda akan kembali ke halaman A, bukan halaman B.

Bar Alat

Bar alat digunakan terutamanya dalam "header", "footer" dan kawasan lain untuk menyokong dan melaksanakan aplikasi fungsi perniagaan pada halaman. jQuery Mobile menyediakan penyelesaian yang agak lengkap.
Bar alat dibahagikan kepada tiga aplikasi: bar pengepala, bar pengaki dan bar nav.
Tajuk dan pengaki mempunyai beberapa kaedah aplikasi yang berbeza dalam halaman Bar alat lalai diposisikan sebaris ini boleh mencapai keserasian maksimum, termasuk skrip dan css yang dioptimumkan dengan baik.
Yang lain ialah kedudukan terapung (tetap), yang juga boleh dipanggil kedudukan "statik" ini boleh mengekalkan bar alat di bahagian atas atau bawah skrin. Ia juga boleh menerima peristiwa klik untuk menunjukkan/menyembunyikan bar alat, sekali gus memaksimumkan penggunaan ruang skrin.
Cara melaksanakan: Tambahkan atribut data-position="fixed" pada kawasan tajuk dan pengaki.

Bekas Tajuk

Bekas tajuk ialah kawalan paparan di kawasan pengepala halaman Ia digunakan terutamanya untuk memaparkan tajuk dan kawasan operasi utama.
Kod struktur:

Salin kod

Kod tersebut adalah seperti berikut:

Tajuk Halaman

Untuk memudahkan interaksi halaman, ia akan muncul secara automatik di sebelah kiri sisi bekas tajuk selepas halaman ditukarkan dapat memudahkan kerumitan pembangunan kami, tetapi kadangkala kami tidak memerlukan butang belakang ini kerana keperluan aplikasi Anda boleh menambah atribut data-backbtn="false" pada tajuk bekas untuk menghalang butang belakang Dibuat secara automatik.
Butang boleh diletakkan di sebelah kiri dan kanan bekas tajuk Selepas menghalang butang kembali yang dijana secara automatik, kami boleh menyesuaikan butang pada kedudukan butang belakang.
Contohnya:

Salin kod

Kod adalah seperti berikut:

Batal
< ;h1>Edit Kenalan
Simpan

Jika anda perlu menyesuaikan teks dalam butang kembali lalai, anda boleh menggunakan atribut data-back-btn-text="previous" atau melaksanakannya melalui sambungan:

Salin kod

Kod adalah seperti berikut:

$.mobile.page.prototype.options.backBtnText = "sebelumnya"

Jika anda tidak menggunakan struktur standard untuk mencipta kawasan tajuk, rangka kerja tidak akan menjana butang lalai secara automatik.

Bekas Pengaki

Struktur bekas pengaki pada asasnya sama dengan bekas pengepala hanya tetapkan parameter atribut peranan data kepada "pengaki".
Contohnya:

Salin kod

Kod adalah seperti berikut:

Kandungan pengaki

Bekas pengaki mempunyai lebih fleksibiliti daripada bekas pengepala, ia tidak Seperti bekas tajuk, hanya dua butang dibenarkan diletakkan, dan butang tidak diletakkan di bahagian atas kiri dan kanan secara lalai. Butang dalam pengaki disusun dari kiri ke kanan secara lalai, dan tiada cara untuk meletakkan lebih banyak butang.
Hanya tambahkan class="ui-bar" pada bekas pengaki untuk menukar pengaki menjadi bar alat, di mana anda boleh menambah butang yang kemas tanpa menetapkan sebarang gaya reka letak.
Contohnya:

Salin kod

Kod adalah seperti berikut:

Alih keluar
< ;a href="index.html" data-role="button" data-icon="plus">Tambah
Up

Jika kita memerlukan set kesan pautan, kita boleh menulis seperti ini:

Salin kod

Kod adalah seperti berikut:

Alih keluar> ;
Tambah
Naik
Kebawah

div>

Petua : Berbilang halaman boleh menggunakan pengaki yang sama dengan menggunakan atribut data-id.

Navigasi

Bekas navigasi ialah kawalan kumpulan butang yang boleh memuatkan sehingga 5 butang setiap baris, menggunakan div dengan atribut data-role="navbar"
untuk menahan butang ini.
Contoh:

Salin kod

Kodnya adalah seperti berikut:

• Satu


• Dua

ul>

dalam butang lalai Add class="ui-btn-active"
Jika bilangan butang melebihi 5, bekas navigasi akan dipaparkan secara automatik dalam berbilang baris dengan nombor yang sesuai.

Butang

Anda boleh mengisytiharkan mana-mana pautan pada halaman sebagai gaya paparan butang melalui data-role="button". Untuk menyatukan gaya, rangka kerja akan memformat butang kelas borang secara automatik ke dalam butang gaya jQuery Mudah Alih apabila halaman dimuatkan. Tidak perlu menambah atribut peranan data.
Rangka kerja mengandungi satu set ikon yang biasa digunakan yang boleh digunakan untuk butang Gunakan parameter dalam atribut ikon data untuk mentakrif dan memaparkan kesan ikon yang berbeza.
Contohnya:

Salin kod

Kodnya adalah seperti berikut:

Delete

senarai parameter asli ikon data

Selain memaparkan ikon di sebelah kiri secara lalai, anda juga boleh menggunakan atribut data-iconpos untuk menentukan hubungan kedudukan antara ikon dan teks.
senarai parameter data-iconpos:

Kesan parameter:
ikon kanan berada di sebelah kanan teks
ikon atas berada di atas teks
ikon bawah berada di bawah teks
atribut data-iconpos="notext" membenarkan butang untuk menyembunyikan teks.

Gaya sebaris

Secara lalai dalam bingkai, butang adalah eksklusif secara mendatar dan menyesuaikan secara mendatar mengikut lebar skrin Namun, dalam aplikasi kami, kami sering perlu memaparkan berbilang butang dalam satu baris Pada masa ini, kami perlu mengetahui yang baharu ciri dipanggil sebaris Atribut mod ialah
data-inline="true".
Contohnya:

Salin kod

Kod adalah seperti berikut:

Batal
Simpan

Kumpulan butang

Rangka kerja mudah alih jQuery boleh memaparkan beberapa butang dalam kumpulan, dan data-role="controlgroup" digunakan untuk menunjukkan hubungan padat antara butang. Contohnya:

Salin kod

Kod adalah seperti berikut:

Yes

Mungkin

Jika butang diperlukan Untuk susunan mendatar, anda boleh menambah atribut data-type="horizontal".

Permohonan borang

Rangka kerja Mudah Alih jQuery merangkum bentuk ungkapan baharu untuk elemen bentuk html asli dan mengoptimumkan pengendalian peranti skrin sentuh. Elemen borang akan diberikan secara automatik ke dalam elemen gaya jQuery Mobile dalam halaman bingkai. Penggunaan
elemen borang adalah sama dengan kaedah html lalai Anda juga boleh menggunakan kaedah Post dan dapatkan untuk menyerahkan data Walau bagaimanapun, perlu diingatkan bahawa penamaan ID elemen tidak dibenarkan halaman yang sama dalam spesifikasi konvensional. Dalam jQuery Mobile, kerana ia membenarkan berbilang halaman wujud dalam DOM yang sama, adalah disyorkan bahawa penamaan ID bagi elemen borang adalah unik dalam keseluruhan projek untuk mengelakkan ralat yang disebabkan oleh isu ID.
Secara lalai, rangka kerja akan secara automatik memaparkan gaya elemen borang dalam halaman standard Setelah berjaya dipaparkan, elemen kawalan ini akan dapat dikendalikan menggunakan fungsi dalam jQuery. Dalam sesetengah kes, kami perlu menggunakan elemen borang html asli Untuk mengelakkan rangka kerja mudah alih daripada memaparkan elemen ini secara automatik, kami memperkenalkan parameter kawalan "tiada" dalam atribut peranan data dalam rangka kerja. Menggunakan parameter atribut ini akan menyebabkan elemen dipaparkan dalam keadaan HTML asalnya.
Contohnya:

Salin kod

Kod adalah seperti berikut:

A
B> ;
C

Aplikasi senarai

Senarai maklumat ialah kawalan yang agak kerap digunakan dalam aplikasi pembangunan Ia digunakan untuk paparan data, navigasi, senarai data, dsb. Untuk menyesuaikan diri dengan kandungan maklumat yang berbeza, senarai juga dibentangkan dalam pelbagai bentuk.
Struktur kod senarai dilaksanakan dalam senarai tertib dan tidak tersusun Selagi anda mengisytiharkan data-role="listview" pada ul atau ol, anda boleh membiarkan bingkai dipaparkan dalam bentuk senarai, contohnya:

Salin kod

Kod tersebut adalah seperti berikut:

• Acura




• BMW

Jika anda perlu menambah data pada senarai, anda perlu melaksanakan kaedah refresh() untuk mengemas kini senarai selepas data dimuatkan.
Contohnya:

Salin kod

Kodnya adalah seperti berikut:

$('ul').listview('refresh');

Di atas ialah peraturan asas untuk menggunakan jQuery Mobile untuk membina antara muka.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan HTML5 semua orang.