Bagaimana Membangun Dokumen Mobile Multi-Page untuk Pemrograman HTML5 dan CSS3 - dummies

Sangat hebat untuk dapat membuat halaman web HTML5 dan CSS3 begitu indah. Ini sesuai dengan perangkat mobile, tapi jelas jika halamannya lebih kecil, Anda memerlukan lebih banyak dari mereka. Aplikasi seluler sering menggunakan metafora pemotretan halaman untuk mengumpulkan lebih banyak data di sebagian kecil layar real estat, dan perpustakaan seluler jQuery memiliki alat lain yang bagus untuk mempermudahnya.

Sejauh ini, aplikasi ini terlihat seperti aplikasi mobile jQuery lainnya yang pernah Anda lihat sejauh ini. Satu hal yang berbeda, dan itulah tombol di header. Ini sangat umum bagi aplikasi seluler yang memiliki tombol navigasi di header. Tekan tombol Next.

Setelah transisi pudar yang bagus, halaman berikutnya akan muncul. Yang satu ini memiliki dua tombol di header. Menekan Selanjutnya lagi membawa pengguna ke halaman ketiga.

Halaman ketiga sekali lagi sangat familiar, tapi kali ini ada satu tombol di sebelah kiri header, dan tombol lain di area konten utama.

Hal yang menarik dari ketiga halaman ini sama sekali bukan tiga halaman! Itu semua hanya satu halaman, dirancang untuk bertindak seperti tiga halaman yang berbeda. Ada beberapa keuntungan dari pengaturan ini.

• Sumber daya CSS dan JavaScript hanya perlu dimuat satu kali: Hal ini membuat sistem tetap konsisten dan meningkatkan waktu muat sedikit.

• Tidak ada jeda waktu: Saat dokumen dimuat, semuanya tersimpan dalam memori, bahkan jika hanya satu bagian saja yang dapat dilihat sekaligus. Ini memungkinkan Anda dengan cepat berpindah antar halaman tanpa harus menunggu akses server.

Anda biasanya menerapkan jenis mekanisme ini saat Anda memiliki halaman besar yang ingin Anda perlakukan sebagai beberapa halaman yang lebih kecil sehingga pengguna tidak perlu menggulir.

Inilah kode untuk multiPage. html secara keseluruhan

multiPage html #foot {font-size: 75%; font-style: italic; text-align: center;} pre {margin-left: auto; margin-right: auto; background-color: putih; width: 8em;}

Halaman satu
next
Ini adalah indeks

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

Halaman Kedua
next
Halaman kedua sama seperti yang pertama, kecuali yang bukan yang pertama, dan memiliki teks dan bukan tombol. Ini halaman kedua. Jika Anda menyukai yang pertama, saya kira Anda bisa kembali, tapi Anda harus benar-benar pergi ke halaman berikutnya, karena saya dengar itu sangat bagus.
dari HTML Semua dalam Satu untuk Dummies prev

Halaman Tiga
3333333 3 3 3 33333 3 3 3 3333333

Pergi ke indeks
dari HTML All in One for Dummies

Sementara kode untuk contoh ini panjang, tidak banyak terobosan baru.

1. Muat konten jQuery mobile.

   Tarik file CSS dan JavaScript yang diperlukan dari jQuery. situs com

2. Terapkan CSS Anda sendiri.

   Bahkan jika Anda "meminjam" kode CSS dari jQuery, Anda masih diperbolehkan menambahkannya sendiri. Anda bisa menambahkan CSS untuk membuat footer dan elemen pra sesuai keinginan Anda.

3. Bangun halaman Anda

   Anda dapat membuat sebanyak mungkin halaman yang Anda inginkan, tapi semuanya mengikuti pola jQuery umum yang sama: Buat div halaman dengan header, konten, dan footer divs. Gunakan atribut data-peran untuk menunjukkan peran masing-masing div.

4. Sebutkan masing-masing diva tingkat halaman dengan atribut id.

   Karena pengguna akan membalik-balik halaman, masing-masing halaman memerlukan semacam pengenal. Berikan setiap halaman sebuah atribut id yang unik.

5. Bangun tombol di dalam tajuk.

   Bagian yang benar-benar baru dari contoh ini (selain dari halaman-membalik sendiri) adalah tombol di header. Lewati ke depan ke header halaman 2, dan Anda akan melihat sesuatu yang sangat menarik:

   prev
   
   Page Two
   next
   

   Jika Anda mendefinisikan sebuah tautan di dalam elemen dengan peran data header, tautan itu otomatis akan menjadi tombol. Selanjutnya, link pertama yang didefinisikan secara otomatis akan ditempatkan di sebelah kiri header, dan yang kedua akan ditempatkan di sebelah kanan.

6. Pakailah satu tombol ke kanan.

   Jika Anda ingin tombol berada di sebelah kanan, tambahkan sebuah kelas ke tombol:

   
   Page One
   next
   

7. Gunakan jangkar internal untuk melewati antar halaman.

   Lihatlah URL di semua tombolnya. Mereka memulai dengan hash, yang menunjukkan adanya tautan internal di dalam dokumen. Ingat, meskipun ini terasa seperti tiga halaman yang berbeda bagi pengguna, itu benar-benar semua satu halaman web besar.

8. Percobaan dengan transisi.

   Perhatikan baik-baik tombol di halaman tiga:

   Masuk ke indeks
   

   Tombol ini memiliki atribut transisi data khusus. Secara default, halaman mobile swap dengan memudar. Anda dapat mengatur transisi ke slide, slideup, slidedown, pop, fade, atau flip. Anda juga bisa membalikkan transisi dengan menambahkan atribut lain: data-direction = "reverse".