Bagaimana Membangun Halaman JQuery Dasar Mobile untuk Pemrograman HTML5 dan CSS3 - dummies

Ada pendekatan yang sangat populer di antara pemrogram HTML5 dan CSS3 untuk membangun situs web ramah seluler dengan AJAX, dan itu untuk menggunakan perpustakaan tambahan ke jQuery disebut jQuery Mobile . Jquery Mobile adalah kombinasi kode JavaScript dan CSS yang hebat yang dibangun di atas perpustakaan.

Perpustakaan jQuery bekerja dengan mengambil halaman HTML5 biasa dan memodifikasi dengan cara yang meniru tampilan dan nuansa asli. Kode ini terlihat sangat mirip HTML biasa:

Demo Mobile

Demo Mobile JQuery
situs web jQuery Mobile

Ini adalah daftar biasa
yang dikodekan agar terlihat seperti
daftar ponsel

dari > HTML All in One for Dummies Beberapa detail mengubah halaman ini menjadi keajaiban mobile:

Sertakan CSS jQuery mobile.

1. Ini adalah file CSS khusus yang dirancang untuk mengubah elemen HTML menjadi mitra mobile mereka. Meskipun Anda bisa mendownloadnya sendiri, kebanyakan pengembang langsung terhubung ke situs jQuery.

   Sertakan perpustakaan jQuery standar.

2. Sebagian besar kode didasarkan pada jQuery, jadi integrasikan juga perpustakaan jQuery. Sekali lagi, Anda perlu menarik jQuery dari situs jQuery utama.

   Memasukkan perpustakaan mobile jQuery.

3. Ini adalah pustaka JavaScript yang memperluas perpustakaan untuk menambahkan perilaku spesifik seluler baru.

   Tambahkan atribut data-role = "page" ke div utama.

4. Buat div utama di halaman Anda dan berikan atributnya ke halaman Anda. Ini adalah atribut peran data khusus yang ditambahkan oleh jQuery mobile. jQuery melihat-lihat peran data dari berbagai elemen dan menerapkan perubahan gaya dan perilaku pada elemen ini secara otomatis. Tetapkan div utama Anda peran peran halaman. Ini memberitahu browser untuk memperlakukan keseluruhan div sebagai halaman.

   Tentukan sebuah tema data.

5. Anda dapat menerapkan tema data ke elemen apa pun, namun Anda hampir selalu menerapkan tema pada halaman. jquery mobile hadir dengan sejumlah tema bawaan yang ada di dalamnya, yang disebut "a" melalui "e. "Bereksperimenlah untuk menemukan yang Anda sukai, atau Anda dapat membangunnya sendiri dengan versi ThemeRoller versi seluler khusus.

   Tambahkan lebih banyak divs di dalam halaman Anda.

6. Tambahkan beberapa divs lagi di dalam div halaman Anda. Umumnya Anda memiliki tiga: header, content, dan footer.

   Tentukan div header dengan data-role = "header".

7. Dengan menempatkan informasi header Anda di dalam div dengan peran data "header", Anda memberi tahu jQuery untuk memperlakukan elemen ini sebagai header seluler dan menerapkan gaya yang sesuai. Header biasanya menyertakan tag

   .

   Biasanya Anda akan menentukan header yang akan diperbaiki dengan atribut data-position = "fixed". Hal ini memastikan header akan tetap ada jika konten lainnya digulir, yang merupakan perilaku khas dalam aplikasi seluler.

   Buat div konten

8. Tambahkan div dengan data-role = "content" untuk menyiapkan area konten utama halaman Anda. Salah satu unsur utama dari situs Anda harus masuk ke segmen ini.

   Setiap link dapat dikonversi ke sebuah tombol.

9. Konvensi standar di aplikasi web adalah mengubah tautan menjadi tombol yang memiliki target lebih besar daripada masukan berbasis mouse. Mudah mengonversi tautan ke tombol dengan menambahkan atribut peran data = "tombol" ke tag anchor.

   Mengkonversi daftar ke daftar putar seluler.

10. Daftar juga memiliki konvensi khusus di dunia mobile. Anda dapat menggunakan atribut peran data untuk mengubah daftar apapun menjadi daftarView.

    Buat footer.

11. Tambahkan satu div lagi dengan kumpulan data ke "footer". Biasanya, footer (seperti header) diperbaiki dengan atribut data-posisi.