Fitur -Fitur :
Kenapa saya sarankan belajar jQuery Mobile dari pada framework lainnya karena kesederhanaan dari framework ini. Kode ini dibangun oleh jQuery dan terus dikembangkan oleg pengembangnya secara aktif untuk memperbaiki bug-bug yang ada di aplikasi ini. Banyak fitur yang ditawarkan dalam framework ini termasuk dukungan HTML5, Ajax-powered navigasi link, dan sentuhan/atau navigasi gesekan.
Berikut adalah Daftar OS yang mendukung untuk jquery mobile.
Dukungan untuk framework ini bervariasi antara ponsel dan yang laianya secara umum dibagi menjadi grafik dari 3 kategori dari A sampai C :
A adalah tingkat atas yang menawarkan dukungan penuh dari jQuery Mobile,
B memiliki semuanya kecuali Ajax sedangkan
C adalah HTML dasar dengan sedikit-untuk-tidak JavaScript. dan beberapa merk smarthanphone sudah menggunakan tingkatan 3.
Perlengkapan perang :
1. Silahkan download Jquery mobilenya disini http://jquerymobile.com/
2. Pastikan sebelum anda belajar sudah mengerit tentang html dan css.. ga perlu advance.
Aplikasi Pertama Kita ..?
Aplikasi pertama yang akan kita buat adalah aplikasi dasar uttuk perancagan halaman HTML dengan memanfaatkan Jquery Mobile. Untuk tutorial ini akan saya bikin step by step jadi tetap sering lihat lihat blog saya.. untuk tutorial ini akan terus kita sambung.
Langkah 1
Silahkan buat file html anda.. oh yah untuk anda yang belajar tutorial ini sayang anggap sudah mengenal konsep pemograman web.
Langkah 2
silahkan buat skrip seperti dibawah ini
------------------------------------------------------------------------------------------ Batas Skrip Atas
<!--
Created
By Dily Isyam Alie (Always Junior Programer)
-->
<html>
<head>
<title>Pengetahuan Dasar Web Mobile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="jquery/dily.css">
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery-1.6.4.mobile.js"></script>
</head>
<body>
<body>
<div data-role="page" id="index">
<header data-role="header">
<h1>Dily Mobile Website</h1>
</header>
<div data-role="content">
<h3>Lihat halaman Lain </h3>
<p>Silahkan klik tombol ini</p>
<p><a href="#about" data-role="button" data-theme="c">Tentang Saya</a></p>
</div>
<footer data-role="footer">
<h2>© Dily Same Alie .</h2>
</footer>
</div>
<div data-role="page" id="about">
<header data-role="header">
<h1>Halaman Dua Disini </h1>
</header>
<div data-role="content">
<p>Ini adalaha halaman content.</p>
<p>Silahkan dicoba <a data-rel="back" href="#index">Kembali</a> Kapanpun</p>
</div>
</div>
</body>
</html>
</body>
</html>
------------------------------------------------------------------------------------------ Batas Skript bawah
Sedikit keterangan sintax :
viewport ---> Digunakan untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible ---> Untuk menegcek compabilitas perangkat.
Langkah 4
silahkan ada coba kompile di browser anda maka akan muncul tampilan seperti ini. kalau tampilan ini sudah berhasil menandakan aplikasi pertama anda telah berhasil dibuat. Dan tutorial part 1 anda sudah berhasil.. selanjutnya kita akan membut dengan bentuk bentuk tombol yang lainya.
Langkah 5
Mungkin anda punya keinginan bagaimana merubah warna tombol tentang saya dengan warna lain gampang anda tinggal merubah property dibagain ini
data-theme="a" silahkan anda ganti dengan abjad a-e. maka tombol otomatis akan berubah juga.
Souce Code tahap ini silahkan download disini Download
Untuk proyek webmobile ini tidak sampai disini saja akan kita lanjut dengan tahap selanjut yaitu dengan membuat footer dah header yang bisa di slider (digeser dengan sentuhan).. Ditunggu yah mudah mudahan masih bisa menyisihakan waktu untuk melanjutkanya..
Kelanjutannya :
Sumber :
No comments:
Post a Comment