iTabs Widget

Requried

Example

		    <link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
		    <script type="text/javascript" src="js/jquery.js"></script>
		    <script type="text/javascript" src="js/jquery-ui.js"></script>
		    <script type="text/javascript" src="js/ui/ui.iTabs.js"></script>
			<script type="text/javascript">
		    $(document).ready(function(){
				// jquery.iphone.js have autoloader, but you can use
				// alternative method of init widget
		    	$(".tabbar").iTabs();
		    });
		    </script>
            
            <ul class="tabbar">
                <li><a class="iicon" href="#mail" title="Mail"><em class="ii-envelope"></em>Mail</a></li>
                <li><a class="iicon" href="#chat" title="Chat"><em class="ii-chat2"></em>Chat</a></li>
                <li><a class="iicon" href="#search" title="Search"><em class="ii-magnify"></em>Search</a></li>
                <li><a class="iicon" href="#options" title="Options"><em class="ii-gear2"></em>Options</a></li>
            </ul>

            <div id="mail" title="Mail">...</div>
            <div id="chat" title="Chat">...</div>
            <div id="search" title="Search">...</div>
            <div id="options" title="Options">...</div>
		

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia quam nec enim scelerisque porta. In ut lorem ipsum. Proin iaculis viverra rutrum. Maecenas quis ante enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum luctus tristique feugiat. Morbi dictum est dolor, at condimentum nisl. Ut id nunc augue, at luctus enim. Phasellus urna nunc, aliquam sit amet rutrum ac, imperdiet in nunc. Cras mattis massa et est sodales ac auctor mi sagittis. Fusce elementum ultrices nunc, eu scelerisque massa sodales quis. Aliquam bibendum accumsan nibh ut blandit. Vestibulum suscipit leo vitae magna tincidunt pharetra. Sed consequat, ligula non pretium ultrices, ligula enim venenatis urna, in scelerisque urna turpis vel neque. Praesent nibh urna, eleifend et fringilla eu, pellentesque sit amet nisl.

Praesent venenatis dictum ante, et viverra diam ultrices et. Maecenas egestas augue eget nibh consequat tempus. Quisque facilisis ipsum non mi molestie faucibus. Integer sapien est, mattis eu suscipit nec, auctor id dolor. In hac habitasse platea dictumst. Duis adipiscing tristique ipsum, ut tempus eros porta ut. Nulla enim quam, auctor ut venenatis at, pharetra eget enim. Nam suscipit quam eu erat adipiscing aliquam. Etiam aliquet sagittis viverra. Ut ultricies, neque nec bibendum commodo, sem arcu lobortis nunc, ut luctus tellus erat at sem.

Duis massa leo, pulvinar nec congue fringilla, dapibus eu dui. Nulla at arcu mi. Donec lacinia nunc non erat luctus sit amet ullamcorper ipsum pulvinar. Nullam auctor dictum arcu, a sagittis nunc eleifend fermentum. Nullam nec mi non sem accumsan ullamcorper et vel diam. Vestibulum ac scelerisque neque. Aliquam non ante sit amet sapien dapibus cursus. Sed ut velit justo. Duis eget felis vel turpis imperdiet imperdiet vel vitae lorem. Ut rutrum faucibus urna et aliquet. Nulla sagittis sagittis enim, non ullamcorper magna dignissim sit amet. Nullam nec ligula odio, vel ornare enim. Praesent eget nisi magna. Vivamus orci mi, malesuada nec fermentum sit amet, posuere vel dolor. Phasellus tellus sem, sollicitudin ac sollicitudin in, dignissim ac eros. Integer tincidunt laoreet sem, nec luctus lectus malesuada vestibulum. Duis rutrum massa venenatis nunc imperdiet molestie.