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

<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