From c8be7bc85f92e321abbe77882699d972f133db90 Mon Sep 17 00:00:00 2001 From: Silvio Date: Tue, 25 Mar 2014 17:27:48 -0300 Subject: Adding jquery drawer --- jquery_drawer/sample.html | 327 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 jquery_drawer/sample.html (limited to 'jquery_drawer/sample.html') diff --git a/jquery_drawer/sample.html b/jquery_drawer/sample.html new file mode 100644 index 0000000..df92610 --- /dev/null +++ b/jquery_drawer/sample.html @@ -0,0 +1,327 @@ + + + + + + + +jQuery.drawer + + + + + + + + + + + + + + + +
+
+
+
+

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. +

+
+
+
+ + + +
+

Hello jQuery.drawer!

+
+ + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3