diff options
Diffstat (limited to 'jquery_drawer/sample.html')
| -rw-r--r-- | jquery_drawer/sample.html | 327 |
1 files changed, 327 insertions, 0 deletions
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 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + +<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> +<meta http-equiv="content-style-type" content="text/css" /> +<meta http-equiv="content-script-type" content="text/javascript" /> +<title>jQuery.drawer</title> +<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> +<style type="text/css"> +body { + font-family : "Lucida Grande", "Arial", sans-serif; + background : #222222; + padding : 20px 0 0 0; + margin : 0; +} + +div#content { + color : #ffffff; + background : #000000; +} + +div#info { + padding : 0 30px 30px 30px; +} + +div#info h1 { + font-size : 36px; + font-weight : bold; + padding : 30px 0 0 0; + margin : 0; +} + +div#info h2 { + font-size : 20px; + font-weight : bold; + border-top : 1px solid #111111; + padding : 30px 0 0 0; + margin : 30px 0 0 0; +} + +div#info p { + font-size : 12px; + line-height : 1.6; + padding : 10px 0 0 0; + margin : 0; +} + +div#info a { + color : #ffffff; +} + +div#info pre { + font-size : 11px; + font-family : "Courier New", monospace; + line-height : 1.4; + color : #99ff99; + background : #222222; + padding : 10px; + margin : 10px 0; +} + +div#info em { + font-style : normal; + color : #ff0099; +} + +div.sample p { + font-size : 24px; + font-weight : bold; + line-height : 1.6; + color : #ffff00; + padding : 20px; + margin : 0; +} +</style> +</head> +<body> + + + +<!--============= DRAWER ============--> +<ul id="drw_tabs"> + <li><a href="#hello" rel="drw">Hello</a></li> + <li><a href="#sample_icon" rel="drw">Icon View</a></li> + <li><a href="#sample_list" rel="drw">List View</a></li> + <li><a href="sample_ajax.html" rel="drw">Ajax</a></li> + <li><a href="http://www.google.com/" target="_blank">No Drawer</a></li> +</ul> +<!--============ /DRAWER ============--> + + + +<div id="content"> +<div id="drw"></div> +<div id="info"> +<div> + <h1>jQuery.drawer</h1> + <p> + jQuery.drawer is a <a href="http://jquery.com/">jQuery</a>-based, drawer style navigation.<br /> + Look at how the header navigation of this page works + </p> +</div> + + + +<div> + <h2>Download</h2> + <p> + <a href="http://src.metatype.jp/jquery_drawer_1.00.zip">jQuery.drawer v1.00</a><br /> + Everyone can use it under the MIT-style license. + </p> +</div> + + + +<div> + <h2>Settings</h2> + <p> + Load dependencies in the header element of HTML. + </p> + <pre><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></pre> + <p> + Set the code where you want to display jQuery.drawer's tabs.<br /> + A link tag with a rel="<em>drw</em>" attribute activates jQuery.drawer.<br /> + If you need more tabs, add a list item element.<br /> + JavaScript automatically make the width of each tab the equal.<br /> + See a <a href="sample_flexible.html">Flexible Sample</a> when you use it with a flexible layout. + </p> + <pre><ul id="drw_tabs"> + <li><a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>">label of this tab</a></li> + <li><a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>">label of this tab</a></li> + <li><a href="#<em>the ID of HTML element</em>" rel="<em>drw</em>">label of this tab</a></li> + ... +</ul></pre> + <p> + Set the code where you want to display jQuery.drawer. + </p> + <pre><div id="drw"></div></pre> +</div> + + + +<div> + <h2>How to use</h2> + <p> + Set a "href" attribute of link tag in jQuery.drawer's tabs to <em>the ID of HTML element</em>.<br /> + The HTML element will display in jQuery.drawer.<br /> + <br /> + For example:<br /> + In that case jQuery.drawer display the HTML element of ID "hello". + </p> + <pre><ul id="drw_tabs"> + <li><a href="#<em>hello</em>" rel="<em>drw</em>">Hello</a></li> + ... +</ul> + +... + +<div id="<em>hello</em>"> + <p>Hello jQuery.drawer!</p> +</div></pre> +</div> + + + +<div> + <h2>Icon & List View</h2> + <p> + jQuery.drawer provides 2 content styles in default.<br /> + <br /> + "Icon View" is a item list with icon.<br /> + Use element <ul> with class name "drw_icon_view".<br /> + The format of Icon View: + </p> + <pre><ul class="drw_icon_view"> + <li> + <div class="drw_img"><img src="<em>item's icon</em>" /></div> + <div class="drw_info"> + <h6><a href="<em>item's link</em>"><em>item's title</em></a></h6> + <p><em>item's description</em></p> + </div> + </li> + ... +</ul></pre> + <p> + "List View" is a simple item list.<br /> + Use element <ul> with class name "drw_list_view".<br /> + The format of List View: + </p> + <pre><ul class="drw_list_view"> + <li> + <a href="<em>item's link</em>"> + <span class="drw_title"><em>item's title</em></span> + <span class="drw_desc"><em>item's description</em></span> + <span class="drw_date"><em>item's date</em></span> + </a> + </li> + ... +</ul></pre> +</div> + + + +<div> + <h2>Ajax</h2> + <p> + jQuery.drawer can load source code of external file with Ajax.<br /> + + Set a "href" attribute of link tag in jQuery.drawer's tabs to <em>the URL of external file</em>.<br /> + The source code of external file will display in jQuery.drawer.<br /> + <br /> + For example:<br /> + In that case jQuery.drawer display source code of "sample_ajax.html". + </p> + <pre><ul id="drw_tabs"> + <li><a href="<em>sample_ajax.html</em>" rel="<em>drw</em>">Hello</a></li> + ... +</ul></pre> +</div> + + + +<div> + <h2>Author</h2> + <p> + inamorix@metatype.jp<br /> + Copyright © 2008 <a href="http://metatype.jp/">metatype</a>, All rights reserved. + </p> +</div> +</div> +</div> + + + +<div id="hello" class="sample"> + <p>Hello jQuery.drawer!</p> +</div> + + + +<ul id="sample_icon" class="drw_icon_view"> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> + <li> + <div class="drw_img"><img src="sample.gif" alt="sample" /></div> + <div class="drw_info"> + <h6><a href="#">item's title</a></h6> + <p>item's description is here. item's description is here.</p> + </div> + </li> +</ul> + + + +<ul id="sample_list" class="drw_list_view"> + <li> + <a href="#"> + <span class="drw_title">item's title</span> + <span class="drw_desc">item's description is here. item's description is here.</span> + <span class="drw_date">2008.05.01</span> + </a> + </li> + <li> + <a href="#"> + <span class="drw_title">item's title</span> + <span class="drw_desc">item's description is here. item's description is here.</span> + <span class="drw_date">2008.05.01</span> + </a> + </li> + <li> + <a href="#"> + <span class="drw_title">item's title</span> + <span class="drw_desc">item's description is here. item's description is here.</span> + <span class="drw_date">2008.05.01</span> + </a> + </li> + <li> + <a href="#"> + <span class="drw_title">item's title</span> + <span class="drw_desc">item's description is here. item's description is here.</span> + <span class="drw_date">2008.05.01</span> + </a> + </li> +</ul> + + + +</body> +</html>
\ No newline at end of file |