Sabtu, 28 Juni 2014
Tutorial - How to Make Android Application with Jquerymobile - Step 2 - Header, main, footer, and pages
Label:
jquerymobile
Tutorial 2 – Header, main, footer, and pages
After you learn tutorial 1 - basic, now go to Step 2 – Header, main, footer, and pages1. Make div data-role="page" in body
<!DOCTYPE html>2. Make div data-role="header", in div data-role="page"
<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>
<div data-role="page">
</div>
</body>
</html>
<!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>
<div data-role="page">
<div data-role="header">
<h1>this is header</h1>
</div>
</div>
</body>
</html>
Make sure that code is right, and the result is like this.
* custom for header
<div data-role="header" data-position="fixed">This script make your header always on top.
3. Make div data-role="main", in div data-role="page"
<!DOCTYPE html>Make sure that code is right, and the result is like this.
<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>
<div data-role="page">
<div data-role="header">
<h1>this is header</h1>
</div>
<div data-role="main" class="ui-content">
<h3>This is content</h3>
</div>
</div>
</body>
</html>
4. Make div data-role="footer", in div data-role="page"
<!DOCTYPE html>Make sure that code is right, and the result is like this.
<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>
<div data-role="page">
<div data-role="header">
<h1>this is header</h1>
</div>
<div data-role="main" class="ui-content">
<h3>This is content</h3>
</div>
<div data-role="footer">
<h3>This is footer</h3>
</div>
</div>
</body>
</html>
* custom for footer
<div data-role="footer" data-position="fixed">This script make your footer always at bottom.
5. adding pages in jquerymobile
Adding pages in jquerymobile is very simple, just make unique id to separate pages and then create a text link to connect each pages like this
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Make sure that code is right, and the result is like this.
Okay now go to Step 3 – Button and Navbar
Navigation Links:
Step 1 - Basic
Step 2 - Header, main, footer, and pages
Step 3 – Button and Navbar
Step 4 – Transition Effect and Panel
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar