jQuery Mobile Tabs using data-role=navbar

by sebababi

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="myPage1">
        <ul data-role="listview" >
<li>
 
    <div class="ui-grid-b">
        <div class="ui-block-a" style="width: 30%;">
 
            <div data-role="fieldcontain">
             <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
                    
            </div>
 
        </div>
         <div class="ui-block-b" style="width: 60%;">
 
            <div data-role="fieldcontain">
                   <h2>Phoenix</h2>
                    <p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
            </div>
 
        </div>
        <div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
 
            <div style="float: right;">
               <a href="#" data-role="button" data-icon="plus" data-theme="c" data-inline="true">Plus</a>
            </div>
 
        </div>    
    </div>
 
</li>
        </ul>
            
            
            <ul data-role="listview" data-split-theme="a">
 <li>
     
     <a href="index.html">
    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
    <h3>Broken Bells</h3>
    </a>
    <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup" data-role="button" data-theme="c" data-inline="true" data-iconpos="text">
        BOOK
         </a>

 </li>
</ul>
    </div>