Senin, 30 Juni 2014
Tutorial - How to Make Android Application with Jquerymobile - Step 3 - Button and Navbar
Step 3 – Button and Navbar
After you learn Step 2 – Header, main, footer, and pages. Now go to Step 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">And Iam try to test this script in div data-role=”main” at page 2
<a href="#pagetwo" class="ui-btn">Go to Page Two</a>
</div>
<div data-role="main" class="ui-content">Make sure that code is right, and the result is like this.
<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">
<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>
Make sure that code is right, and the result is like this.
3. Navbar (Navigation bar) place in footer, place it before tittle footer
<div data-role="footer" data-position="fixed">
<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>
Make sure that code is right, and the result is like this.
*Or place Navbar at header and footer
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