diff options
Diffstat (limited to 'jquery_drawer/sample_flexible.html')
| -rw-r--r-- | jquery_drawer/sample_flexible.html | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/jquery_drawer/sample_flexible.html b/jquery_drawer/sample_flexible.html new file mode 100644 index 0000000..f11bbbe --- /dev/null +++ b/jquery_drawer/sample_flexible.html @@ -0,0 +1,214 @@ +<!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> +<style type="text/css"> +ul#drw_tabs, div#drw { width: 85%; } +</style> +</head> +<body> + + + +<!--============= DRAWER ============--> +<ul id="drw_tabs"> + <li><a href="sample.html">« Back</a></li> + <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 (Flexible Sample)</h1> +</div> + + + +<div> + <h2>How to change width of jQuery.drawer</h2> + <p> + Overwrite the <em>width</em> of jQuery.drawer's CSS styles.<br /> + For example: + </p> + <pre><style type="text/css"> +ul#drw_tabs, div#drw { width: <em>85%</em>; } +</style></pre> + <p> + Or edit CSS file "drw/styles.css". + </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 |