Hay sahabat bloger. Pernahkah anda melihat tampilan seperti gambar dibawah. Saya rasa sering sekali anda melihatnya di semart phone anda. contohnya adalah aplikasi Facebook dan Twitter dan lain sebgainya. Untuk itu kali ini saya akan berbagi tutorial membuat tampilan sederhan sebgai awal dari tutorial Cara Membuat Mobile Website Dengan Jquery Mobile ini.
Berkut adalah caranya:
1. Silahkan download jqueri mobile disini cari versi zipnya.
2. Setelah selsai mendownload extrac file yang anda download tadi. maka hasilnya kurang lebih seperti ini.
3. Kemudian buka file demos dan tampilanya adalah sebagai berikut.
4. dan buatlah file coba.html seperti gambar diatas kemudian isi dengan script berikut.
<html>
<head>
<title>jQuery Mobile: Demos and Documentation</title>
<link href="css/themes/default/jquery.mobile-1.1.1.css" rel="stylesheet"></link>
<link href="docs/_assets/css/jqm-docs.css" rel="stylesheet"></link>
<script src="js/jquery.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.1.1.js"></script>
</head>
<body>
</body>
<header data-role="header" data-theme="b">
<h1>
Mohammad Zaenuddin H</h1>
<nav data-role="navbar">
<ul>
<li><a data-icon="home" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">HOME</a></li>
<li><a data-icon="grid" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">Fhoto</a></li>
<li><a data-icon="info" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">Who We Are</a></li>
</ul>
</nav>
</header>
<article data-role="content" data-theme="a">
Nama saya adalah Mohammad Zaenuddin H saya lahir di lombok timur juni 1994. saya dinggal di jl.Wisata lemor ketangga kec suela lombok timur
</article>
<footer data-position="fixed" data-role="footer" data-theme="b">
<center>
&copy Copy Right 2014 ZAOF GEGELI<br />
<a href="https://www.blogger.com/lelampakdatu.blogspot.com">lelampakdatu.blogspot.com</a></center>
</footer>
</html>
<head>
<title>jQuery Mobile: Demos and Documentation</title>
<link href="css/themes/default/jquery.mobile-1.1.1.css" rel="stylesheet"></link>
<link href="docs/_assets/css/jqm-docs.css" rel="stylesheet"></link>
<script src="js/jquery.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.1.1.js"></script>
</head>
<body>
</body>
<header data-role="header" data-theme="b">
<h1>
Mohammad Zaenuddin H</h1>
<nav data-role="navbar">
<ul>
<li><a data-icon="home" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">HOME</a></li>
<li><a data-icon="grid" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">Fhoto</a></li>
<li><a data-icon="info" href="https://www.blogger.com/blogger.g?blogID=5434980636622436051#">Who We Are</a></li>
</ul>
</nav>
</header>
<article data-role="content" data-theme="a">
Nama saya adalah Mohammad Zaenuddin H saya lahir di lombok timur juni 1994. saya dinggal di jl.Wisata lemor ketangga kec suela lombok timur
</article>
<footer data-position="fixed" data-role="footer" data-theme="b">
<center>
&copy Copy Right 2014 ZAOF GEGELI<br />
<a href="https://www.blogger.com/lelampakdatu.blogspot.com">lelampakdatu.blogspot.com</a></center>
</footer>
</html>
5. kemudian simpan maka hasilnya akan seprti gambar dibawah.
demikian sedikit dari saya mungkin nanti kita akan berlanjut ke tutorial-tutoraial lainya demikian
matur tampi asih Wassalam.
0 Komentar untuk "Cara Membuat Mobile Website Dengan J query Mobile"