Cara Membina Laman Bergerak jQuery Asas untuk Pemrograman HTML5 dan CSS3 - patung

Terdapat pendekatan yang sangat popular di kalangan pemrogram HTML5 dan CSS3 untuk membina laman web mesra mudah alih dengan AJAX, dan itu menggunakan perpustakaan tambahan untuk jQuery dipanggil jQuery Mobile . Jquery Mobile adalah gabungan kuat kod JavaScript dan CSS yang dibina di atas perpustakaan.

Perpustakaan jQuery berfungsi dengan mengambil halaman HTML5 biasa dan mengubahnya dengan cara yang meniru rupa dan rasa asli. Kod ini kelihatan seperti HTML biasa:

Demo Bergerak

Demo Bergerak JQuery
Laman web Bergerak JQuery

Ini adalah senarai biasa
Dikodkan sebagai
senarai mudah alih

> HTML All in One untuk Dummies Beberapa butiran mengubah laman ini menjadi keajaiban mudah alih:

Sertakan CSS mudah alih jQuery.

1. Ini adalah fail CSS khas yang direka untuk mengubah elemen HTML ke rakan kongsi mudah alih mereka. Walaupun anda boleh memuat turun sendiri, kebanyakan pembangun menghubungkan terus ke laman jQuery.

   Termasuk perpustakaan jQuery standard.

2. Banyak kod didasarkan pada jQuery, jadi mengintegrasikan perpustakaan jQuery juga. Sekali lagi, anda perlu menarik jQuery dari laman web jQuery utama.

   Menggabungkan perpustakaan mudah alih jQuery.

3. Ini adalah perpustakaan JavaScript yang memanjangkan pustaka untuk menambah tingkah laku khusus mudah alih baru.

   Tambah atribut peranan data = "halaman" ke div utama.

4. Buat div utama di halaman anda dan beri atribut kepadanya. Ini adalah atribut peranan data tersuai yang ditambahkan oleh jQuery mobile. jQuery melihat peranan data pelbagai elemen dan menggunakan perubahan gaya dan tingkah laku kepada unsur-unsur ini secara automatik. Tetapkan div utama anda halaman peranan data. Ini memberitahu penyemak imbas untuk merawat keseluruhan div sebagai halaman.

   Tentukan tema data.

5. Anda boleh memohon tema data kepada mana-mana unsur, tetapi anda hampir selalu menggunakan tema pada halaman tersebut. jquery mobile dilengkapi dengan beberapa tema lalai yang dibina, yang dipanggil "a" melalui "e. "Eksperimen untuk mencari yang anda suka, atau anda boleh membina sendiri dengan versi mudah alih khas ThemeRoller itu.

   Tambah lebih banyak div di dalam halaman anda.

6. Tambah beberapa lagi div di dalam halaman div anda. Pada umumnya anda akan mempunyai tiga: header, kandungan, dan footer.

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

7. Dengan menempatkan sebarang maklumat header anda di dalam div dengan peranan data "header", anda memberitahu jQuery untuk merawat elemen ini sebagai header mudah alih dan menggunakan gaya yang sesuai. Tajuknya biasanya mengandungi tag

   .

   Biasanya anda akan menentukan tajuk yang akan ditetapkan dengan atribut kedudukan = "tetap" =. Ini memastikan pengepala akan tetap berada di tempat jika seluruh kandungan ditatal, yang merupakan tingkah laku biasa dalam aplikasi mudah alih.

   Sediakan div kandungan.

8. Tambah div dengan peranan data = "kandungan" untuk menyediakan kawasan kandungan utama halaman anda. Mana-mana unsur-unsur badan utama tapak anda harus masuk dalam segmen ini.

   Sebarang pautan boleh ditukar ke butang.

9. Konvensyen standard dalam aplikasi web adalah untuk menjadikan pautan menjadi butang yang mempunyai sasaran yang lebih besar daripada input berasaskan mouse. Adalah mudah untuk menukar mana-mana pautan ke butang dengan menambahkan atribut-peranan = "butang" atribut kepada teg anchor.

   Tukar senarai ke senarai senarai mudah alih.

10. Senarai juga mempunyai konvensyen khas di dunia mudah alih. Anda boleh menggunakan atribut peranan data untuk mengubah sebarang senarai ke dalam listView.

    Membina footer.

11. Tambah satu lagi div dengan set peranan data kepada "footer". Biasanya, footer (seperti header) ditetapkan dengan atribut kedudukan data.