Dokumentasi Belajar JQuery Mobile

Diunggah oleh

Iwan Flamenggo
9 tayangan2 halaman
JQuery Mobile

Hak Cipta

© © All Rights Reserved

Format Tersedia

DOCX, PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Deskripsi:

JQuery Mobile

Hak Cipta:

© All Rights Reserved
Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
9 tayangan2 halaman

Dokumentasi Belajar JQuery Mobile

Diunggah oleh

Iwan Flamenggo

Deskripsi:

JQuery Mobile

Hak Cipta:

© All Rights Reserved
Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 2

Dokumentasi belajar jQuery Mobile

Perlengkapan yng dibutuhkan, yaitu :


1. Xampp
2. Notepad++
3. jQuery Mobile
contoh halaman sederhana
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>
</body>
</html>
Dari contoh di atas, untuk menggunakan jQuery mobile kita hanya butuh menginclude jQuery mobile css,
jQuery js, dan jQuery Mobile js
Contoh berikut berisi attribute dasar yang biasa digunakan dalam sebuah halaman
<div class="section" id="page1">
<div class="header"><h1>jQuery Mobile</h1></div>
<div class="content">
<p>First page!</p>
</div>
<div class="footer"><h1>O'Reilly</h1></div>
</div>
Contoh dalam penggunaan html5, pada html5 sudah terdapat tag section, header, dan footer.
<section id="page1">
<header><h1>jQuery Mobile</h1></header>
<div class="content">
<p>First page!</p>
</div>
<footer><h1>O'Reilly</h1></footer>
</section>
Namun pada struktur dasar dari jQuery mobile menggunakan attribute data-role, dimana nilai dari attribute
tersebut adalah page, header, content, dan footer.
Contoh penggunaan jQuery mobile pada html5
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>

Struktur aplikasi dan navigasi


Internal Pages

Pada sebuah dokumen html kita dapat mempunyai banyak halaman sesuai yang
kita inginkan .
Contoh
<html>
<head>
<meta charset="utf-8">
<title> Contoh Page Internal </title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
<script src="js/jquery-1.10.2.js" text="text/javascript"></script>
<script text="text/javascript" src="js/jquery.mobile1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Bagian
Header</h1></header>
<div class="content" data-role="content">
<h1>Halaman 1</h1>
<a href="#page2">Halaman 2</a>
</div>
<footer data-role="footer"><h1>Bagian
Footer</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>Bagian
Header</h1></header>
<div class="content" data-role="content">
<h1>Halaman 2</h1>
<a href="#page1">kembali ke Halaman 1</a>
</div>
<footer data-role="footer"><h1>Bagian
Footer</h1></footer>
</section>
</body>
</html>

Anda mungkin juga menyukai