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">
 <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 sure that code is right, and the result is like this.

*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">
<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 sure that code is right, and the result is like this.


*Make grouped buttons

<div data-role="controlgroup" data-type="horizontal">
  <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>

Make sure that code is right, and the result is like this.

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