tag:blogger.com,1999:blog-44319141828535363572024-02-19T06:53:52.051-08:00FolkscriptsAnonymoushttp://www.blogger.com/profile/09605903994727370827noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-4431914182853536357.post-71076820824843129042014-06-20T01:26:00.001-07:002014-06-20T06:05:49.362-07:00How to make android application with jquerymobile - Tutorial 3 - Button and Navbar <b>Tutorial 3 – Button and Navbar</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmC-U82bc5dM_ymAFkARzgpDWPUNM-in0nozQMEclmf46gQSErJHpHSS1ncoKOQVkTjdCGyrZiMEMnnGo_uE0-i2wuxz6SZfX9yFfiVjefRN7taEAjiPdQB9SB-ha_yBovg9hkJUVn4K4M/s1600/jquerymobilelogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmC-U82bc5dM_ymAFkARzgpDWPUNM-in0nozQMEclmf46gQSErJHpHSS1ncoKOQVkTjdCGyrZiMEMnnGo_uE0-i2wuxz6SZfX9yFfiVjefRN7taEAjiPdQB9SB-ha_yBovg9hkJUVn4K4M/s1600/jquerymobilelogo.png" height="320" width="320" /></a></div>
<br />
After you learn Tutorial 2 – Header, main, footer, and pages. Now go to tutorial 3 –Button and Navbars.<br />
<b>1. Creating Button, button can create by 3 ways :</b><br />
a. Using input element<br />
<blockquote class="tr_bq">
<input type="button" value="Button"></blockquote>
b.Using button element with class="ui-btn"<br />
<blockquote class="tr_bq">
<button class="ui-btn">Button</button></blockquote>
c. Using <a><br />
<blockquote class="tr_bq">
<a href="#" class="ui-btn">Button</a></blockquote>
<i><b># Example :</b></i><br />
Iam try to test this script in div data-role=”main”<br />
<blockquote class="tr_bq">
<div data-role="main" class="ui-content"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h3>This is content</h3><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="button" value="Button"><br />
<button class="ui-btn">Button</button><br />
<a href="#" class="ui-btn">Button</a><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwni2j7K-qpVdwliJqTULGGNwg_ialE5h4EbKvAmrPYvXkzFnSvge6OR11-tjoCGOqvycGqEnS3KVWYZI1cT3-CMLICqbRzZAJkJjU9AQle6gFIEfmsEJ4hJR6UtfA4o3SxzzGCzn1qPj/s1600/img4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwni2j7K-qpVdwliJqTULGGNwg_ialE5h4EbKvAmrPYvXkzFnSvge6OR11-tjoCGOqvycGqEnS3KVWYZI1cT3-CMLICqbRzZAJkJjU9AQle6gFIEfmsEJ4hJR6UtfA4o3SxzzGCzn1qPj/s1600/img4.png" height="328" width="400" /></a></div>
<br />
<b>*Make Navigation buttons</b><br />
<blockquote class="tr_bq">
<a href="#pageid" class="ui-btn">Go to Page Two</a></blockquote>
Example :<br />
Iam try to test this script in div data-role=”main” at page 1<br />
<blockquote class="tr_bq">
<div data-role="main" class="ui-content"><br />
<a href="#pagetwo" class="ui-btn">Go to Page Two</a><br />
</div><br />
And Iam try to test this script in div data-role=”main” at page 2<br />
<br />
<div data-role="main" class="ui-content"><br />
<a href="#pageone" class="ui-btn">Go to Page one</a><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrb63oT4gjyHCJ1Y6VSer1NtvWRczoQ6Bu7rBy9g5LPMgvo-XJmnpWC8OSowTsXAlOUNw4gt4RwEiIIvRD2AJrfYptIq_wNfFjVrxHd3YuHANtyw-2b_n3MdRZe4_hyTokBWu1wOsZH-eY/s1600/vid1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrb63oT4gjyHCJ1Y6VSer1NtvWRczoQ6Bu7rBy9g5LPMgvo-XJmnpWC8OSowTsXAlOUNw4gt4RwEiIIvRD2AJrfYptIq_wNfFjVrxHd3YuHANtyw-2b_n3MdRZe4_hyTokBWu1wOsZH-eY/s1600/vid1.gif" height="328" width="400" /></a></div>
<br />
<b>*Make grouped buttons</b><br />
<blockquote class="tr_bq">
<div data-role="controlgroup" data-type="horizontal"><br />
<a href="#" class="ui-btn">Button 1</a><br />
<a href="#" class="ui-btn">Button 2</a><br />
<a href="#" class="ui-btn">Button 3</a><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TFgOsombDTe_f7176ImOnwA69VtTocVtH3qbKnRt2vLFBlPcI5mAX6CW6yYUaxFE3T9Ajz3lQlGwtSJb0tptrt6h_8BPoAX8uCI9tyBt_HiHu1UevffuVmKnI3BUufYxkE2QR3mO-GzE/s1600/img5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TFgOsombDTe_f7176ImOnwA69VtTocVtH3qbKnRt2vLFBlPcI5mAX6CW6yYUaxFE3T9Ajz3lQlGwtSJb0tptrt6h_8BPoAX8uCI9tyBt_HiHu1UevffuVmKnI3BUufYxkE2QR3mO-GzE/s1600/img5.png" height="328" width="400" /></a></div>
<br />
<b>2.<span class="Apple-tab-span" style="white-space: pre;"> </span>Navbar (Navigation bar) place in header, place it <span style="color: red;">after </span>tittle <span style="color: red;">header</span></b><br />
<blockquote class="tr_bq">
<div data-role="header"><br />
<h1>this is header</h1><br />
<div data-role="navbar"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Home</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Page Two</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Search</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipby2JA_mbZsG-lNAZimaGr8pu2PNsrRwzv2iO7vbtbdVm4TMIONiT1h9JuRlcdFfO1yNYCBAXMi3n4ZcdnKlQPDveVUKQHJgL2lW7VWtajGeJfcuxOVpVRsCwcIKApfRVverDgbLLI_cj/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipby2JA_mbZsG-lNAZimaGr8pu2PNsrRwzv2iO7vbtbdVm4TMIONiT1h9JuRlcdFfO1yNYCBAXMi3n4ZcdnKlQPDveVUKQHJgL2lW7VWtajGeJfcuxOVpVRsCwcIKApfRVverDgbLLI_cj/s1600/img1.png" height="71" width="400" /></a></div>
<br />
<b>3.<span class="Apple-tab-span" style="white-space: pre;"> </span>Navbar (Navigation bar) place in footer, place it <span style="color: red;">before </span>tittle <span style="color: red;">footer</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<blockquote class="tr_bq">
<div data-role="footer" data-position="fixed"><br />
<div data-role="navbar"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><ul><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Home</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Page Two</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><li><a href="#anylink">Search</a></li><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></ul><br />
</div><br />
<h3>This is footer</h3><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDuNGa7lG3Y20DF-erg-0rAQNSHXT1IjQEjAH1GhiyEFhJS9XqzCcVoChJacE8p4JlN-h47i6G6QCo7AJQBKS1sl41JnWf5_KwM_x_0RJTAAeGyF2EmlHdA-vUhIonM_Sl9BzDneHQDwL/s1600/img2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDuNGa7lG3Y20DF-erg-0rAQNSHXT1IjQEjAH1GhiyEFhJS9XqzCcVoChJacE8p4JlN-h47i6G6QCo7AJQBKS1sl41JnWf5_KwM_x_0RJTAAeGyF2EmlHdA-vUhIonM_Sl9BzDneHQDwL/s1600/img2.png" height="73" width="400" /></a></div>
<br />
<br />
<b>*Or place Navbar at <span style="color: red;">header </span>and <span style="color: red;">footer</span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTCS4IN4rzsYT4Mifx_cJO-5IegVZ0GpQj4rOfgF8rgus6ic8lwlbFI1CUOtgCSM_oA6ecO6Qvi_KG0qRM4uCOH5mZrB_8etEWSPQA91yzmNV56dWs017NNO2gShAOC8bb0nitGqLwXny/s1600/img3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTCS4IN4rzsYT4Mifx_cJO-5IegVZ0GpQj4rOfgF8rgus6ic8lwlbFI1CUOtgCSM_oA6ecO6Qvi_KG0qRM4uCOH5mZrB_8etEWSPQA91yzmNV56dWs017NNO2gShAOC8bb0nitGqLwXny/s1600/img3.png" height="328" width="400" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/09605903994727370827noreply@blogger.com0tag:blogger.com,1999:blog-4431914182853536357.post-13656540015914934032014-06-19T13:13:00.005-07:002014-06-19T22:53:28.613-07:00How to make android application with jquerymobile - Tutorial 2 - Header, main, footer, and pages<b>Tutorial 2 – Header, main, footer, and pages</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRvZO_JHsJDTJHFnm6mozJ2KVgNpaDL5J7aVbfNzmrnj-sTrzhYlividySBG6qYTA8GptMYX2Gapwn2cIicmCVJ9HMFRMnNF57BqZkeVPwzPg92utCe09pISowSwlKitWX03hJ9Ljsn6S/s1600/jquerymobilelogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRvZO_JHsJDTJHFnm6mozJ2KVgNpaDL5J7aVbfNzmrnj-sTrzhYlividySBG6qYTA8GptMYX2Gapwn2cIicmCVJ9HMFRMnNF57BqZkeVPwzPg92utCe09pISowSwlKitWX03hJ9Ljsn6S/s1600/jquerymobilelogo.png" height="320" width="320" /></a></div>
<br />
After you learn tutorial 1 - basic, now go to Tutorial 2 – Header, main, footer, and pages<br />
<b>1.<span style="white-space: pre;"> </span>Make div data-role="page" in <span style="color: red;"><i>body</i></span></b><br />
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"><br />
<script src="js/jquery-1.10.2.min.js"></script><br />
<script src="js/jquery.mobile-1.4.2.min.js"></script><br />
</head><br />
<body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="page"> <span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
</body><br />
</html></blockquote>
<br />
<b>2. Make div data-role="header", in div data-role="<span style="color: red;">page</span>"</b><br />
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"><br />
<script src="js/jquery-1.10.2.min.js"></script><br />
<script src="js/jquery.mobile-1.4.2.min.js"></script><br />
</head><br />
<body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="page"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="header"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h1>this is header</h1><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
</body><br />
</html></blockquote>
<br />
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzAG-7xzHnjG7NCDuIWXpq-mhSgeBr0H5Wzjys2Ntgejtgmrx4PPYos4SKu9nDZJjNowNALQencv-Gcyj7aSQAXfitMJmhceR4TM-4S_pW-d7tycOQNROU7cdyviti6vESfHYqnHtr6Qh/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzAG-7xzHnjG7NCDuIWXpq-mhSgeBr0H5Wzjys2Ntgejtgmrx4PPYos4SKu9nDZJjNowNALQencv-Gcyj7aSQAXfitMJmhceR4TM-4S_pW-d7tycOQNROU7cdyviti6vESfHYqnHtr6Qh/s1600/img1.png" height="328" width="400" /></a></div>
<br />
<b>* custom for header</b><br />
<blockquote class="tr_bq">
<div data-role="header" data-position="fixed"></blockquote>
This script make your header always on top.<br />
<br />
<b>3. Make div data-role="main", in div data-role="<span style="color: red;">page</span>"</b><br />
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"><br />
<script src="js/jquery-1.10.2.min.js"></script><br />
<script src="js/jquery.mobile-1.4.2.min.js"></script><br />
</head><br />
<body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="page"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="header"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h1>this is header</h1><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="main" class="ui-content"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h3>This is content</h3><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
</body><br />
</html></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcvYKCCKOiVleKodkAnWjcLFqWjPHesIIQprc5f2m6eUcjEhoaoMXDjwzwPHFo1lQ7Q2VTvTzXYnc-KQWSBU-oeDiyIHaUp3q6EKeG5FZzwvlH74xwVmVFy6HszNssVZ0FTWq5h3alDwj/s1600/img2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcvYKCCKOiVleKodkAnWjcLFqWjPHesIIQprc5f2m6eUcjEhoaoMXDjwzwPHFo1lQ7Q2VTvTzXYnc-KQWSBU-oeDiyIHaUp3q6EKeG5FZzwvlH74xwVmVFy6HszNssVZ0FTWq5h3alDwj/s1600/img2.png" height="328" width="400" /></a></div>
<br />
<b>4. Make div data-role="footer", </b><b>in div data-role="<span style="color: red;">page</span>"</b><br />
<blockquote class="tr_bq">
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"><br />
<script src="js/jquery-1.10.2.min.js"></script><br />
<script src="js/jquery.mobile-1.4.2.min.js"></script><br />
</head><br />
<body><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="page"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="header"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h1>this is header</h1><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="main" class="ui-content"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h3>This is content</h3><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><div data-role="footer"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><h3>This is footer</h3><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></div><br />
</body><br />
</html></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdn-3NET9cM_BEzo4HVUfhUQOc8kbXwcTz3DIvxFOUZheoREznVYHsiX92_C_Dd-6eLlzTsyB9MPJfabvQRR2ausNdhjZrCyfweGe1dq0xUYcrpkrohELLK4GzUst43-0Ulf2yY0XWPOs_/s1600/img3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdn-3NET9cM_BEzo4HVUfhUQOc8kbXwcTz3DIvxFOUZheoREznVYHsiX92_C_Dd-6eLlzTsyB9MPJfabvQRR2ausNdhjZrCyfweGe1dq0xUYcrpkrohELLK4GzUst43-0Ulf2yY0XWPOs_/s1600/img3.png" height="328" width="400" /></a></div>
<br />
<b>* custom for footer</b><br />
<blockquote class="tr_bq">
<div data-role="footer" data-position="fixed"></blockquote>
This script make your footer always at bottom.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdenpAY4Q7QlvJ28zKDAyQVr3Zj7IlT5WZ44RJYYrjUmtZJEQAR1wKShm9m4RYghodG2hthy9wo9anhA2Xnu7oEH1k-fKv4htAJ2MriFhdIR3Oo8vWv5naKYP_hIRPqZZEIyAkMzzXM3c/s1600/img4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbdenpAY4Q7QlvJ28zKDAyQVr3Zj7IlT5WZ44RJYYrjUmtZJEQAR1wKShm9m4RYghodG2hthy9wo9anhA2Xnu7oEH1k-fKv4htAJ2MriFhdIR3Oo8vWv5naKYP_hIRPqZZEIyAkMzzXM3c/s1600/img4.png" height="328" width="400" /></a></div>
<br />
<b>5. adding pages in jquerymobile</b><br />
<b><br /></b>
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<br />
<blockquote class="tr_bq">
<div data-role="page" id="pageone"><br />
<div data-role="main" class="ui-content"><br />
<a href="#pagetwo">Go to Page Two</a><br />
</div><br />
</div><br />
<br />
<div data-role="page" id="pagetwo"><br />
<div data-role="main" class="ui-content"><br />
<a href="#pageone">Go to Page One</a><br />
</div><br />
</div></blockquote>
Make sure that code is right, and the result is like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicahyphenhyphenzOYVegkdkl41RimhGq8kigAvmiZ0ziQDp_YBC2XTDbmFTWfAlvug_Ye84o21Gcv_DuCeXlh_voEwQ7j38YPiq0X36MmSsgSq2QLEyayJbJH9-HFUU-jtp1-bKZCu0tE7yj-QHkaLp/s1600/img5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicahyphenhyphenzOYVegkdkl41RimhGq8kigAvmiZ0ziQDp_YBC2XTDbmFTWfAlvug_Ye84o21Gcv_DuCeXlh_voEwQ7j38YPiq0X36MmSsgSq2QLEyayJbJH9-HFUU-jtp1-bKZCu0tE7yj-QHkaLp/s1600/img5.png" height="328" width="400" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvZS5eyhnti8BXM0l_r4f8VxvWnzGwH2RuHgT9spNeA_RZuK5D6KK-i7CUDaBNbFG367mOXQf3Vb2baKDONwYnc8BePFe6TAHm0FdlpH8Vm7z7z3cQnkT94pRSOYkFwcsYAsE5aPTWco5/s1600/img6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvZS5eyhnti8BXM0l_r4f8VxvWnzGwH2RuHgT9spNeA_RZuK5D6KK-i7CUDaBNbFG367mOXQf3Vb2baKDONwYnc8BePFe6TAHm0FdlpH8Vm7z7z3cQnkT94pRSOYkFwcsYAsE5aPTWco5/s1600/img6.png" height="328" width="400" /></a></div>
Okay now go to <b><i>Tutorial 3 – Navbar and Button</i></b><br />
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/09605903994727370827noreply@blogger.com0tag:blogger.com,1999:blog-4431914182853536357.post-9414522354818724442014-06-19T12:59:00.004-07:002014-06-19T22:45:58.824-07:00How to make android application with jquerymobile - Tutorial 1 - Basic<div class="MsoNoSpacing">
<span style="line-height: 18px;">Hi everybody,</span><br />
<span style="line-height: 18px;">It is my first post in this blog, okay in this occasion I will share to you about <b>"HOW TO MAKE ANDROID APPLICATION with JQUERY MOBILE"</b>. Before you studying jquerymobile I wish you have basic knowledge of html, css, jquery.</span><br />
<span style="line-height: 18px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRvZO_JHsJDTJHFnm6mozJ2KVgNpaDL5J7aVbfNzmrnj-sTrzhYlividySBG6qYTA8GptMYX2Gapwn2cIicmCVJ9HMFRMnNF57BqZkeVPwzPg92utCe09pISowSwlKitWX03hJ9Ljsn6S/s1600/jquerymobilelogo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcRvZO_JHsJDTJHFnm6mozJ2KVgNpaDL5J7aVbfNzmrnj-sTrzhYlividySBG6qYTA8GptMYX2Gapwn2cIicmCVJ9HMFRMnNF57BqZkeVPwzPg92utCe09pISowSwlKitWX03hJ9Ljsn6S/s1600/jquerymobilelogo.png" height="320" width="320" /></a></div>
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;"><br /></span><span style="line-height: 18px;"> Jquery mobile is a framework for creating mobile web applications. Many developer use jquery mobile to their application like :</span><br />
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;">1. Facebook app</span><br />
<span style="line-height: 18px;">2. Twitter app</span><br />
<span style="line-height: 18px;">3. Etc</span><br />
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;">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.</span><br />
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;"><b>1. Now start the project by create a <span style="color: red;"><i>index.html</i></span></b></span><br />
<blockquote class="tr_bq">
<span style="line-height: 18px;"><!DOCTYPE html></span><br />
<span style="line-height: 18px;"><html></span><br />
<span style="line-height: 18px;"><head></span><br />
<span style="line-height: 18px;"></head></span><br />
<span style="line-height: 18px;"><br /></span><span style="line-height: 18px;"><body></span><br />
<span style="line-height: 18px;"></body></span><br />
<span style="line-height: 18px;"></html></span></blockquote>
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;"><b>2. And then copy this code in <span style="color: red;"><i>head</i></span></b></span><br />
<blockquote class="tr_bq">
<span style="line-height: 18px;"><!DOCTYPE html></span><br />
<span style="line-height: 18px;"><html></span><br />
<span style="line-height: 18px;"><head></span><br />
<span style="line-height: 18px;"><meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<span style="line-height: 18px;"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"></span><br />
<span style="line-height: 18px;"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script></span><br />
<span style="line-height: 18px;"><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script></span><br />
<span style="line-height: 18px;"></head></span><br />
<span style="line-height: 18px;"><br /></span><span style="line-height: 18px;"><body></span><br />
<span style="line-height: 18px;"></body></span><br />
<span style="line-height: 18px;"></html></span></blockquote>
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;">Or you can make this script local, download at <a href="http://jquerymobile.com/download/"><i><span style="color: #3d85c6;">http://jquerymobile.com/download/</span></i></a> and then place into same folder with index.Html,</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBosZ8Y648OpNt7Gpfvcdljg9tbzHSLRVI4bIvcy-EMFjdeImL71nr8v-Q7w3DxgO5cw1_OFtfg7EHtzFkF6AXJ0FIekZf2CCkGOCAV4GtMYZqz4kSoX3DBOhhMekhMKW4ixt_xSDKAS1/s1600/img2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBosZ8Y648OpNt7Gpfvcdljg9tbzHSLRVI4bIvcy-EMFjdeImL71nr8v-Q7w3DxgO5cw1_OFtfg7EHtzFkF6AXJ0FIekZf2CCkGOCAV4GtMYZqz4kSoX3DBOhhMekhMKW4ixt_xSDKAS1/s1600/img2.png" height="68" width="640" /></a></div>
<span style="line-height: 18px;"><br /></span><span style="line-height: 18px;">or you can make folder js and css, and place scripts in separate folder, I like to place in separate folder.</span><br />
<blockquote class="tr_bq">
<span style="line-height: 18px;"><!DOCTYPE html></span><br />
<span style="line-height: 18px;"><html></span><br />
<span style="line-height: 18px;"><head></span><br />
<span style="line-height: 18px;"><meta name="viewport" content="width=device-width, initial-scale=1"></span><br />
<span style="line-height: 18px;"><link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"></span><br />
<span style="line-height: 18px;"><script src="js/jquery-1.10.2.min.js"></script></span><br />
<span style="line-height: 18px;"><script src="js/jquery.mobile-1.4.2.min.js"></script></span><br />
<span style="line-height: 18px;"></head></span><br />
<span style="line-height: 18px;"><br /></span><span style="line-height: 18px;"><body></span><br />
<span style="line-height: 18px;"></body></span><br />
<span style="line-height: 18px;"></html></span></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54pYjBAJXgg0vAxKsueuasTWa8KvQ70_F9k7sLqirE8l3lZK7iizJ6CNiNxNeWQXbjvu4auaFg5PE9hMI1JgOWXfof6X21irTAoDX4ZvGjawSsprjISeeVtXlRm3m0dN7lKHJfjmpnxIG/s1600/img1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54pYjBAJXgg0vAxKsueuasTWa8KvQ70_F9k7sLqirE8l3lZK7iizJ6CNiNxNeWQXbjvu4auaFg5PE9hMI1JgOWXfof6X21irTAoDX4ZvGjawSsprjISeeVtXlRm3m0dN7lKHJfjmpnxIG/s1600/img1.png" height="100" width="640" /></a></div>
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;"><br /></span>
<span style="line-height: 18px;">And now we are going to <b><a href="http://folkscripts.blogspot.com/2014/06/how-to-make-android-application-with_19.html"><span style="color: #3d85c6;"><i>Tutorial 2 – Header, main, footer, and pages</i></span></a></b></span></div>
Anonymoushttp://www.blogger.com/profile/09605903994727370827noreply@blogger.com0