Cara Membina Dokumen Bergerak Berbilang Halaman untuk Pemrograman HTML5 dan CSS3 - monyet

Sangat baik dapat mengurangkan laman web HTML5 dan CSS3 jadi ia sesuai dengan peranti mudah alih, tetapi jelas jika halaman lebih kecil, anda memerlukan lebih banyak daripada mereka. Apl mudah alih sering menggunakan metafora yang membongkar halaman untuk mengemas lebih banyak data dalam sekeping kecil skrin hartanah, dan perpustakaan mudah alih jQuery mempunyai satu lagi alat yang hebat untuk menjadikannya mudah.

Setakat ini, aplikasi ini kelihatan seperti aplikasi mudah alih jQuery yang telah anda lihat setakat ini. Satu perkara yang berbeza, dan itulah butang di tajuk. Ia sangat biasa bagi aplikasi mudah alih untuk mempunyai butang navigasi di tajuk. Tekan butang Seterusnya.

Selepas peralihan pudar yang bagus, halaman seterusnya muncul. Yang ini mempunyai dua butang di tajuk. Menekan Seterusnya sekali lagi membawa pengguna ke halaman ketiga.

Halaman ketiga sekali lagi sangat biasa, tetapi kali ini ia mempunyai satu butang di sebelah kiri tajuk, dan satu lagi butang di kawasan kandungan utama.

Perkara menarik mengenai ketiga-tiga halaman ini adalah mereka tidak tiga halaman sama sekali! Ia hanya satu halaman, direka untuk bertindak seperti tiga halaman yang berbeza. Terdapat beberapa kelebihan untuk susunan ini.

• Sumber CSS dan JavaScript hanya perlu dimuatkan sekali: Ini mengekalkan sistem yang konsisten dan meningkatkan sedikit masa beban.

• Tidak ada masa lag: Apabila dokumen itu dimuatkan, semua perkara itu dalam ingatan, walaupun hanya satu bahagian yang dapat dilihat pada satu masa. Ini membolehkan anda dengan cepat bergerak di antara halaman tanpa perlu menunggu akses pelayan.

Anda biasanya akan melaksanakan mekanisme jenis ini apabila anda mempunyai halaman besar yang anda ingin merawat sebagai beberapa halaman yang lebih kecil sehingga pengguna tidak perlu menatal.

Berikut adalah kod untuk multiPage. html secara keseluruhannya.

multiPage. html #foot {font-size: 75%; gaya fon: italik; teks-align: center;} pra {margin-left: auto; margin-right: auto; warna latar belakang: putih; lebar: 8em;}

Halaman Satu
seterusnya Ini adalah indeks

halaman 1
halaman 2
halaman 3
dari HTML All in One untuk Dummies prev

Page Dua
seterusnya Halaman kedua adalah seperti yang pertama, kecuali bukan yang pertama, dan ia mempunyai teks dan bukannya butang. Ia adalah halaman kedua. Jika anda suka yang pertama, saya rasa anda boleh kembali, tetapi anda perlu pergi ke halaman seterusnya, kerana saya mendengar ia benar-benar bagus.
dari HTML All in One untuk Dummies prev

Page Three
3333333 3 3 3 33333 3 3 3333333

Go to index
from HTML All in One for Dummies

Walaupun kod untuk contoh ini adalah panjang, ia tidak memecahkan banyak perkara baru.

1. Muatkan kandungan mudah alih jQuery.

   Tarik fail CSS dan JavaScript yang diperlukan dari jQuery. laman web com.

2. Guna CSS anda sendiri.

   Malah jika anda "meminjam" kod CSS dari jQuery, anda masih dibenarkan menambahkan sendiri. Anda boleh menambah CSS untuk membuat kaki dan elemen pra bertindak seperti yang anda mahu.

3. Bina halaman anda.

   Anda boleh membina banyak halaman yang anda mahu, tetapi mereka semua mengikuti corak mudah jQuery umum yang sama: Buat halaman div dengan header, kandungan, dan div footer. Gunakan atribut peranan data untuk menunjukkan peranan setiap div.

4. Namakan setiap div peringkat halaman dengan atribut id.

   Oleh kerana pengguna akan membalik halaman, setiap halaman memerlukan beberapa pengenal. Berikan setiap halaman atribut id yang unik.

5. Membina butang di dalam tajuk.

   Satu-satunya bahagian yang benar-benar baru dalam contoh ini (selain daripada halaman-membalikkannya sendiri) ialah butang dalam tajuk. Melangkah ke tajuk halaman 2, dan anda akan melihat sesuatu yang benar-benar menarik:

   prev
   
   Page Two
   next
   

   Jika anda menentukan pautan dalam elemen dengan peranan data header, pautan itu akan menjadi butang secara automatik. Selain itu, pautan pertama yang ditakrif akan secara automatik diletakkan di sebelah kiri tajuk, dan yang kedua akan diletakkan di sebelah kanan.

6. Tekan butang tunggal ke kanan.

   Jika anda mahu butang berada di sebelah kanan, tambahkan kelas ke butang:

   
   Page One
   seterusnya
   

7. Gunakan jangkar dalaman untuk melangkau antara halaman.

   Lihat URL di semua butang. Mereka bermula dengan hash, yang menunjukkan pautan dalaman di dalam dokumen. Ingat, walaupun ini merasakan tiga halaman berbeza kepada pengguna, ia benar-benar satu halaman web besar.

8. Eksperimen dengan peralihan.

   Perhatikan butang pada halaman tiga:

   Pergi ke indeks
   

   Butang ini mempunyai atribut peralihan data khas. Secara lalai, halaman mudah alih menukar dengan pudar. Anda boleh menetapkan peralihan ke slaid, slaid, slaid, pop, pudar, atau flip. Anda juga boleh membalikkan peralihan dengan menambahkan satu lagi sifat: data-direction = "reverse".