How to make android application with jquerymobile - Tutorial 3 - Button and Navbar
Tutorial 3 – Button and Navbar
After you learn Tutorial 2 – Header, main, footer, and pages. Now go to tutorial 3 –Button and Navbars.
1. Creating Button, button can create by 3 ways :
a. Using input element
Iam try to test this script in div data-role=”main”
*Make Navigation buttons
Iam try to test this script in div data-role=”main” at page 1
*Make grouped buttons
2. Navbar (Navigation bar) place in header, place it after tittle header
3. Navbar (Navigation bar) place in footer, place it before tittle footer
*Or place Navbar at header and footer
After you learn Tutorial 2 – Header, main, footer, and pages. Now go to tutorial 3 –Button and Navbars.
1. Creating Button, button can create by 3 ways :
a. Using input element
<input type="button" value="Button">b.Using button element with class="ui-btn"
<button class="ui-btn">Button</button>c. Using <a>
<a href="#" class="ui-btn">Button</a># Example :
Iam try to test this script in div data-role=”main”
<div data-role="main" class="ui-content">Make sure that code is right, and the result is like this.
<h3>This is content</h3>
<input type="button" value="Button">
<button class="ui-btn">Button</button>
<a href="#" class="ui-btn">Button</a>
</div>
*Make Navigation buttons
<a href="#pageid" class="ui-btn">Go to Page Two</a>Example :
Iam try to test this script in div data-role=”main” at page 1
<div data-role="main" class="ui-content">Make sure that code is right, and the result is like this.
<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
</div>
And Iam try to test this script in div data-role=”main” at page 2
<div data-role="main" class="ui-content">
<a href="#pageone" class="ui-btn">Go to Page one</a>
</div>
*Make grouped buttons
<div data-role="controlgroup" data-type="horizontal">Make sure that code is right, and the result is like this.
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">Button 3</a>
</div>
2. Navbar (Navigation bar) place in header, place it after tittle header
<div data-role="header">Make sure that code is right, and the result is like this.
<h1>this is header</h1>
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
3. Navbar (Navigation bar) place in footer, place it before tittle footer
<div data-role="footer" data-position="fixed">Make sure that code is right, and the result is like this.
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
<h3>This is footer</h3>
</div>
*Or place Navbar at header and footer
How to make android application with jquerymobile - Tutorial 2 - Header, main, footer, and pages
Tutorial 2 – Header, main, footer, and pages
After you learn tutorial 1 - basic, now go to Tutorial 2 – Header, main, footer, and pages
1. Make div data-role="page" in body
2. Make div data-role="header", in div data-role="page"
Make sure that code is right, and the result is like this.
* custom for header
3. Make div data-role="main", in div data-role="page"
4. Make div data-role="footer", in div data-role="page"
* custom for footer
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
Okay now go to Tutorial 3 – Navbar and Button
After you learn tutorial 1 - basic, now go to Tutorial 2 – Header, main, footer, and pages
1. Make div data-role="page" in body
<!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>
</body>
</html>
2. Make div data-role="header", in div data-role="page"
<!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">Make sure that code is right, and the result is like this.
<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>
How to make android application with jquerymobile - Tutorial 1 - Basic
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
2. And then copy this code in head
Or you can make this script local, download at http://jquerymobile.com/download/ and then place into same folder with index.Html,
or you can make folder js and css, and place scripts in separate folder, I like to place in separate folder.
And now we are going to Tutorial 2 – Header, main, footer, and pages
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,
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>
And now we are going to Tutorial 2 – Header, main, footer, and pages
Langganan:
Postingan
(
Atom
)
