jQuery Mobile: Tabs

This entry is part 73 of 73 in the series jQuery Mobile

The jQuery mobile tabs is an extension of the jQuery ui tabs widget and takes all the same options and methods.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>jQM Tabs</h1>
    </div>

    <div data-role='tabs' id='tabs'>
        <div data-role='navbar'>
            <ul>
                <li><a href='#one' data-ajax='false'>one</a></li>
                <li><a href='#two' data-ajax='false'>two</a></li>
                <li><a href='http://jsbin.com/cinip/1' data-ajax='false'>three</a></li>
            </ul>
        </div>
        <div id='one' class='ui-body-d ui-content'>
            <h1>First tab contents</h1>
        </div>
        <div id='two'>
            <ul data-role='listview' data-inset='true'>
                <li><a href='#'>Acura</a></li>
                <li><a href='#'>Audi</a></li>
                <li><a href='#'>BMW</a></li>
                <li><a href='#'>Cadillac</a></li>
                <li><a href='#'>Ferrari</a></li>
            </ul>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

 

 

Series Navigation<< jQuery Mobile: Table column toggle