jQuery.drawer
jQuery.drawer is a jQuery-based, drawer style navigation.
Look at how the header navigation of this page works
Download
jQuery.drawer v1.00
Everyone can use it under the MIT-style license.
Settings
Load dependencies in the header element of HTML.
<link href="drw/styles.css" rel="stylesheet" media="all" /> <script src="drw/jquery.js" type="text/javascript"></script> <script src="drw/scripts.js" type="text/javascript"></script>
Set the code where you want to display jQuery.drawer's tabs.
A link tag with a rel="drw" attribute activates jQuery.drawer.
If you need more tabs, add a list item element.
JavaScript automatically make the width of each tab the equal.
See a Flexible Sample when you use it with a flexible layout.
<ul id="drw_tabs"> <li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li> <li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li> <li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li> ... </ul>
Set the code where you want to display jQuery.drawer.
<div id="drw"></div>
How to use
Set a "href" attribute of link tag in jQuery.drawer's tabs to the ID of HTML element.
The HTML element will display in jQuery.drawer.
For example:
In that case jQuery.drawer display the HTML element of ID "hello".
<ul id="drw_tabs"> <li><a href="#hello" rel="drw">Hello</a></li> ... </ul> ... <div id="hello"> <p>Hello jQuery.drawer!</p> </div>
Icon & List View
jQuery.drawer provides 2 content styles in default.
"Icon View" is a item list with icon.
Use element <ul> with class name "drw_icon_view".
The format of Icon View:
<ul class="drw_icon_view"> <li> <div class="drw_img"><img src="item's icon" /></div> <div class="drw_info"> <h6><a href="item's link">item's title</a></h6> <p>item's description</p> </div> </li> ... </ul>
"List View" is a simple item list.
Use element <ul> with class name "drw_list_view".
The format of List View:
<ul class="drw_list_view"> <li> <a href="item's link"> <span class="drw_title">item's title</span> <span class="drw_desc">item's description</span> <span class="drw_date">item's date</span> </a> </li> ... </ul>
Ajax
jQuery.drawer can load source code of external file with Ajax.
Set a "href" attribute of link tag in jQuery.drawer's tabs to the URL of external file.
The source code of external file will display in jQuery.drawer.
For example:
In that case jQuery.drawer display source code of "sample_ajax.html".
<ul id="drw_tabs"> <li><a href="sample_ajax.html" rel="drw">Hello</a></li> ... </ul>
Author
inamorix@metatype.jp
Copyright © 2008 metatype, All rights reserved.