jQuery UI: Introduction

This entry is part 1 of 11 in the series jQuery UI Draggable

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

jQuery UI is built for designers and developers alike.

Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

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