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

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

Isi kandungan:

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2024

Video: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2024
Anonim

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.

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

Pilihan Editor

Cara Mengeksport karya seni dari Fireworks - dummies

Cara Mengeksport karya seni dari Fireworks - dummies

Setelah anda mengoptimumkan imej itu, sudah waktunya untuk mengeksport dari Fireworks. Mengekspot imej adalah agak mudah; pilih Fail → Eksport dan kemudian nyatakan folder di mana untuk menyimpan imej. Apabila anda mengeksport dokumen seperti menu navigasi dengan beberapa kepingan, anda mengeksport dokumen itu sebagai imej dan HTML seperti berikut: Pilih Fail → Eksport. The ...

Cara Cari Warna untuk Skema Warna Laman Web Anda - dummies

Cara Cari Warna untuk Skema Warna Laman Web Anda - dummies

Peraturan yang paling asas Skim warna untuk laman web adalah bahawa anda perlu bekerja dengan beberapa warna yang terkurung. Jika tidak, laman web anda hanya akan membentangkan warna cacian warna. (Ya, pendekatan gila-gilaan juga merupakan bentuk skema warna, tetapi sebagai peraturan umum tidak begitu berkesan.) Bagaimana ...

Pilihan Editor

Memilih Penutupan Daripada Potret Khas - patung

Memilih Penutupan Daripada Potret Khas - patung

Potret di mana imej anda dipangkas dengan ketat supaya subjek itu mengambil sebahagian besar atau semua bingkai - adalah alat licik dalam beg jurufat jurulatih. Walau bagaimanapun, orang umumnya tidak suka mempunyai kamera terlalu dekat dengan mereka, kerana ketakutan bahawa imej itu ...

Menangkap Highlights and Drips dalam Fotografi Makanan Anda - dummies

Menangkap Highlights and Drips dalam Fotografi Makanan Anda - dummies

Sedikit dari fotografi bukan makanan. Fotografi komersil tradisional cenderung untuk menjauhkan diri dari kekejangan sorotan spekular dan kelemahan drip dan ketidaksempurnaan. Sorotan specular kadang-kadang hanya smidge yang terlalu cerah dan mengganggu dalam foto, tetapi kemuncaknya berkilat ...

Pilih Lensa Makro Kanan untuk Subjek Anda - patung

Pilih Lensa Makro Kanan untuk Subjek Anda - patung

Komponen utama untuk dipertimbangkan ketika mencari makro Kanta yang sesuai dengan gaya fotografi rapat anda adalah subjek yang akan anda ambil gambar dengan lensa. Sekiranya anda menembak mata secara tidak langsung, anda boleh meletakkan kanta anda dengan sangat dekat dengannya. Subjek lain mungkin memerlukan anda menyimpan jarak yang selamat, yang bermaksud ...

Pilihan Editor

Bagaimana Mengubah Transparansi Layer Jenis di Photoshop CS6 - dummies

Bagaimana Mengubah Transparansi Layer Jenis di Photoshop CS6 - dummies

Anda boleh menukar transparansi lapisan jenis, seperti yang anda boleh dengan lapisan lain dalam Adobe Photoshop Creative Suite 6, mengurangkan kelegapan (ketelusan) jenis supaya ia membolehkan lapisan mendasar untuk menunjukkan. Lapisan adalah seperti susunan lapisan digital yang mana setiap unsur imej anda ...

Bagaimana Tukar Resolusi Imej dalam Adobe Photoshop CS6 - dummies

Bagaimana Tukar Resolusi Imej dalam Adobe Photoshop CS6 - dummies

Menggunakan kotak dialog Ukuran Imej hanya satu cara yang anda boleh mengawal resolusi dalam Adobe Photoshop CS6. Walaupun anda boleh meningkatkan resolusi, berbuat demikian dengan berhati-hati dan mengelakkannya, jika anda boleh. Pengecualian kepada peraturan ini adalah apabila anda mempunyai imej yang besar dalam saiz dimensi tetapi rendah ...

Cara Mengukir Huruf menjadi Imej Tekstur Batu di Photoshop CS6

Cara Mengukir Huruf menjadi Imej Tekstur Batu di Photoshop CS6

Dalam Adobe Photoshop CS6, anda boleh menggunakan alat jenis untuk membuat pilihan yang dibentuk seperti huruf dan kemudian menggunakan imej itu sendiri sebagai tekstur (seperti batu) untuk jenisnya. Pemilihan jenis boleh memotong mana-mana bahagian gambar untuk menggunakan apa-apa cara yang anda mahukan. Ikuti langkah-langkah ini untuk mengukir huruf ke dalam tekstur batu ...