jQuery Tab View Plugin for Mobile Device - tabview

jQuery Tab View Plugin for Mobile Device - tabview
File Size: 190KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

tabview is a jQuery and jQuery mobile based component that enables you to create navigable tabbed views of content for mobile devices like iphone, ipad, android, etc.

Basic Usage:

1. Include the latest jQuery library and jQuery Mobile library on the page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="latest.js"></script>

2. Include the latest jQuery mobile CSS

<link rel="stylesheet" href="latest.css" />

3. Markup Html Structure

<div data-role="collapsible-set" data-theme="c" data-content-theme="c">
<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h2>One very long collapsible heading</h2>
<ul data-role="listview" data-filter-theme="c" data-divider-theme="d">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h2>Items DEF</h2>
<ul data-role="listview" >
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h2>Items GHI</h2>
<ul data-role="listview" >
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
</ul>
</div>
</div>

This awesome jQuery plugin is developed by frequent. For more Advanced Usages, please check the demo page or visit the official website.