Sabtu, 28 Juni 2014

Tutorial - How to Make Android Application with Jquerymobile - Step 1 - Basic

Diposting oleh Unknown di 13.59 Label:
Share this

Hi everybody,
It is my first post in this blog, okay in this occasion I will share to you about "HOW TO MAKE ANDROID APPLICATION with JQUERY MOBILE". Before you studying  jquerymobile I wish you have basic knowledge of html, css, jquery.

 Jquery mobile is a framework for creating mobile web applications. Many developer use jquery mobile to their application like :

1. Facebook app
2. Twitter app


3. Etc

Okay that's all the introduction, now go to project. You can use adobe or macromedia dreamweaver or phpdesigner and many other to edit your project (html). And yo can use xampp (windows) to test your html project in localhost.

1.       Now start the project by create a index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
2.       And then copy this code in head
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>

Or you can make this script local, download at http://jquerymobile.com/download/ and then place into same folder with index.Html,
adoretuts.blogspot.com


or you can make folder js and css, and place scripts in separate folder, I like to place in separate folder.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
adoretuts.blogspot.com

And now we are going to Step 2 – Header, main, footer, and pages

Navigation Links:

Step 1 - Basic
Step 2 - Header, main, footer, and pages
Step 3 – Button and Navbar
Step 4 – Transition Effect and Panel

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )