Buatlah sebuah Situs Mobile dengan Jquery Ponsel

jQuery Mobile adalah, berbasis HTML5 sistem antarmuka pengguna sentuhan dioptimalkan.Hal ini dibangun pada platform jQuery dan jQuery UI, dan sangat ideal untuk pengembangan mobile yang cepat.Kerangka jQuery Mobile menggunakan atribut khusus untuk membantu menentukan dan gaya elemen Anda, tanpa harus menulis kelas rinci aturan sendiri.

1. 1
   Arahkan ke homepage jQuery Mobile, dan kemudian klik pada "download" tab dari menu navigasi utama.

   Iklan

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
2. 2
   Scroll down pada halaman Download sampai Anda melihat Copy-dan-Paste Cuplikan untuk file CDN-host bagian .

   Salin baris kode ke clipboard Anda.Ketiga file referensi adalah semua yang Anda butuhkan untuk melaksanakan kerangka.

   instagram viewer

   Iklan

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
3. 3
   Terbuka pengembangan perangkat lunak pilihan Anda dan membuat dokumen HTML baru.

   Jika Anda tidak memiliki pengembangan perangkat lunak, buka aplikasi Notepad di komputer Anda.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
4. 4
   Tambahkan referensi ke dokumen HTML Anda.

   dalam tag kepala Anda, paste file link CDN-host.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
5. 5
   Buat pertama "halaman" Anda.

   Dengan kerangka jQuery Mobile, Anda membuat beberapa halaman dalam dokumen HTML yang sama.Di dalam tag tubuh , menciptakan sebuah wadah div.Menambahkan atribut Data-peran, dan menetapkan nilai halaman .Akhirnya, tambahkan atribut ID , dan menetapkan nilai rumah .

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
6. 6
   Tambahkan header, konten dan footer kontainer div .

   dalam div kontainer halaman Anda, membuat tiga tag div lebih.Menggunakan Data-peran atribut , menetapkan nilai dari sundulan , konten dan footer masing-masing.Ini adalah struktur dasar dari halaman jQuery Mobile.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
7. 7
   Tambahkan header dan judul footer .

   Menggunakan h1 menuju tag, buat menuju judul untuk header dan footer tag Anda.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
8. 8
   Buat halaman kedua.

   luar wadah div yang memiliki Data-peran atribut yang ditetapkan untuk halaman, membuat wadah div baru.Tambahkan Data-peran atribut , dan kemudian set ke halaman.Menambahkan atribut ID , dan kemudian set ke halaman 2. Akhirnya, tambahkan wadah div untuk header, konten dan footer, sehingga struktur menyerupai halaman rumah.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
9. 9
   Buat halaman menu .

   Halaman menu akan dibuat dalam cara yang sama seperti dua halaman pertama, tetapi tanpa footer.Buat wadah div, dan mengatur atribut Data-perannya ke halaman.Menambahkan atribut ID , dan memberikan nilai main_nav.

   Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
10. 10
    Buat struktur menu navigasi.

    Di dalam konten kontainer div, membuat daftar unordered.Menambahkan atribut Data-peran, dan set nilainya ke ListView.Menambahkan atribut data inset, dan set nilainya ke true.Di dalam tag ul untuk daftar unordered, menambahkan dua tag daftar-item( tag li).

    Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
11. 11
    Buat menu link .

    Di dalam tag daftar-item pertama, membuat tag anchor.Tambahkan atribut href ke tag anchor.Menggunakan simbol hashtag untuk menargetkan atribut ID , dan kemudian ketik "rumah".Ini menargetkan "rumah" wadah div.Ikuti proses ini sama untuk kedua daftar-item, tapi kali ini Jenis hashtag "page2" untuk menargetkan halaman kedua.

    Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
12. 12
    Tambahkan menu link ke halaman lain .

    Sekarang menu Anda dibuat, Anda perlu mengatur tag anchor di "rumah" dan "page 2" halaman untuk mengaksesnya.Gulir ke atas dan cari bagian header halaman rumah Anda.Tambahkan tag anchor dalam wadah header, tepat sebelum tag h1 .Menggunakan proses linking sama seperti yang Anda lakukan dengan menu, mengatur atribut href untuk hashtag "main_nav".Tambahkan Data-peran atribut , dan memberikan nilai tombol.Tambahkan Data-ikon atribut , dan memberikan nilai bar.Akhirnya, tambahkan atribut data iconpos, dan memberikan nilai notext.Hal ini menciptakan sebuah tombol di sebelah kiri judul header.Ulangi langkah ini untuk halaman page2.

    Apakah langkah ini bermanfaat?Ya |Tidak ada |Saya butuh bantuan
    Iklan

• Buat sebagai banyak halaman dalam dokumen HTML yang sama seperti yang Anda suka.jQuery Mobile menggunakan sistem navigasi AJAX yang secara otomatis tendangan ketika Anda membuat beberapa halaman dalam dokumen yang sama.
• Tambahkan Data-transisi atribut untuk jangkar untuk transisi visual memenuhi tuntutan antara halaman.Transisi yang tersedia adalah fade, pop, flip, gilirannya, arus, slidefade, slide, slideUp dan slidedown.
• Gunakan Data-tema atribut untuk gaya hampir setiap elemen dalam proyek Anda.Secara default, jQuery Mobile hadir dengan lima kotak warna untuk Anda gunakan.Sistem theming menggunakan huruf sebagai nilai-nilai.Akibatnya, Data-tema atribut menerima nilai-nilai a, b, c, d dan e ketika Anda pertama kali men-download.Memeriksa jQuery Mobile ThemeRoller untuk membuat tema kustom, dengan sampai 26 swatch warna yang berbeda!
• Gunakan data posisi atribut untuk membuat "lengket" atau tetap header dan footer untuk website Anda.Menambahkan atribut ini ke wadah div yang memiliki Data-peran set ke header atau footer, dan nilai data posisi untuk tetap.
• Check out Kit jQuery Mobile Warna untuk mulai mengembangkan dengan 26 swatch tema yang berbeda.

• Pastikan untuk menggunakan komentar HTML untuk memisahkan Anda halaman jQuery Mobile.Ini menghemat waktu satu ton di jalan, sebagai dokumen HTML tunggal dengan beberapa "halaman" akan membengkak cukup cepat.

• jQuery Mobile Warna Kit
• jQuery Mobile
• jQuery Mobile ThemeRoller
• Jika Anda memiliki masalah dengan langkah-langkah ini, memintapertanyaan untuk bantuan lebih lanjut, atau posting di bagian komentar di bawah ini.