jQuery Mobile - Pengaturan

Pada bab ini, kita akan membahas cara menginstal dan mengatur jQuery Mobile.

Unduh jQuery Mobile

Saat Anda membuka tautan jquerymobile.com/ , Anda akan melihat ada dua opsi untuk mengunduh perpustakaan seluler jQuery.

Custom Download - Klik tombol ini untuk mengunduh versi pustaka yang disesuaikan.
Latest Stable - Klik tombol ini untuk mendapatkan pustaka seluler jQuery versi terbaru dan stabil.

Download Kustom dengan Download Builder

Menggunakan Download Builder, Anda bisa membuat build kustom yang hanya menyertakan bagian library yang Anda butuhkan. Saat Anda mengunduh versi baru jQuery Mobile yang disesuaikan ini, Anda akan melihat layar berikut.

Anda dapat memilih perpustakaan sesuai dengan kebutuhan Anda dan klik Build My Download tombol.

Unduhan stabil

Klik tombol Stabil , yang mengarah langsung ke file ZIP yang berisi file CSS dan JQuery, untuk versi terbaru pustaka seluler jQuery. Ekstrak konten file ZIP ke direktori seluler jQuery.

Versi ini berisi semua file termasuk semua dependensi, banyak koleksi demo, dan bahkan rangkaian pengujian unit perpustakaan. Versi ini berguna untuk memulai.

Unduh jQuery Library dari CDN

CDN (Content Delivery Network) adalah jaringan server yang dirancang untuk menyajikan file kepada pengguna. Jika Anda menggunakan tautan CDN di halaman web Anda, ini memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal. Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan jQuery seluler dari CDN yang sama, itu tidak perlu diunduh ulang. Anda dapat menyertakan file CDN berikut ke dalam dokumen HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Kami menggunakan versi CDN pustaka sepanjang tutorial ini. Kami menggunakan AMPPS (AMPPS adalah tumpukan WAMP, MAMP, dan LAMP dari server Apache, MySQL, MongoDB, PHP, Perl & Python) untuk menjalankan semua contoh kami.

Contoh

Berikut ini adalah contoh sederhana jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Rincian kode di atas adalah -

Kode ini ditentukan di dalam elemen head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Area pandang digunakan untuk menentukan (oleh browser) untuk menampilkan tingkat dan dimensi zoom halaman.
content = "width = device-width" digunakan untuk mengatur lebar piksel halaman atau perangkat layar.
initial-scale = 1 menyetel tingkat zoom awal, saat halaman dimuat untuk pertama kali.

Sertakan CDN berikut

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Konten di dalam tag <body> adalah halaman yang ditampilkan di browser.

<div data-role = "page">
   ...
</div>

data-role = "header" membuat header di bagian atas halaman.
data-role = "main" digunakan untuk menentukan konten halaman.
data-role = "footer" membuat footer di bagian bawah halaman.
class = "ui-content" menyertakan padding dan margin di dalam konten halaman.

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

Simpan kode html di atas sebagai simple_example.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/simple_example.html dan keluaran berikut akan ditampilkan.