CODEWITHSUNDEEP
jqueryjquery-mobile
Sandwich T
Sandwich T

Reputation: 3

Aligning tabs upward in jQuery mobile 1.4

I am new to jQuery Mobile stuff and I'm using jQuery Mobile 1.4 for my mobile web app project. What I want is to have the tabs content above the navbars so that I can put navbars/tabs in footer and the contents between the header and footer.

<div data-role="page" id="northet">
    <div data-role="header" data-theme="a"><a href="#homepage" data-role="button" data-icon="home">Home</a>
    <h1>North Route</h1>
  </div>
  <div data-role="tabs" data-position="fixed">
    <div data-role="navbar" id="navbar" data-iconpos="top" >
      <ul>
        <li><a href="#northlist" data-icon="bullets"  class="ui-btn-active ui-state-persist" >Lists</a></li>
        <li><a href="#northmap"  data-icon="location">Map</a></li>
      </ul>
    </div>
    <!-- End of Northern Rout Tabs -->
    <div id="northlist" class="ui-body-d ui-content ui-state-persist ">
      <ul data-role="listview" data-icon="false" data-theme="a">
        <li><a href="#debrelibanos"> <img src="images/list_thumb/debrelibanos_thumb.jpg" alt="debrelibanos">
          <h3>Debre Libanos</h3>
          <p>103 Km</p>
        </a></li>
        <li><a href="#portugesebridge"> <img src="images/list_thumb/portugesebridge_thumb.jpg" alt="portugesebridge">
          <h3>Portugese Bridge</h3>
          <p> Km</p>
        </a></li>
        <li><a href="#abbaygoarge"> <img src="images/list_thumb/abbaygoarge_thumb.jpg" alt="abbaygoarge">
          <h3>Blue Nile Goarge</h3>
          <p>103 Km</p>
        </a></li>
        <li><a href="#abbayfall"> <img src="images/list_thumb/bulefall_thumb.jpg" alt="abbayfall">
          <h3>Blue Nile Fall</h3>
          <p>592 Km</p>
        </a></li>
        <li><a href="#gefersa"> <img src="images/list_thumb/gefersa_thumb.jpg" alt="Gefersa">
          <h3>Gefersa Reservoer</h3>
          <p>18 Km</p>
        </a></li>
   </ul>
    </div>

    <div id="northmap" class="ui-body-d ui-content" >
      <h3> Map Of Northern Ethiopia</h3>
    </div>
  </div>
  <div data-role="footer" data-position="fixed">
    <h4>Footer</h4>
  </div>

Upvotes: 0

Views: 349

Answers (1)

ezanker
ezanker

Reputation: 24738

You can move the tab buttons to the footer, but then you have to add javascript to have the button clicks hide and show the tabs. For your example, you can add a class to all the tab buttons (tabButton) and a second class to all the views that should be hidden and shown (tabView).

Then in the pagecreate event, first hide all views except for the default view that should be visible. Second handle the click event on the tab buttons:

$(document).on("pagecreate", "#northet", function(){
    //start with only viewone visible
    $("#northmap").hide();

    $(".tabButton").on("click", function(){
        $(".tabButton").removeClass("ui-btn-active");        
        $(".tabView").hide();
        var href = $(this).prop("href");
        $(href.substr(href.indexOf('#'))).show();        
        $(this).addClass("ui-btn-active");
        return false;
    });
});

When a button is clicked, remove the active class from the button, hide all views, find the one that should be shown (href of the clicked button), show that view, and make the current button active.

Here is a DEMO

Upvotes: 2

Related Questions