mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
278 lines
13 KiB
HTML
278 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
|
<title>Slide Demo - Fixed Drawer</title>
|
|
<style type="text/css">
|
|
<!--
|
|
/*************************************/
|
|
/* Blueprint: reset.css */
|
|
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-size: 100%;
|
|
font-family: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* Remember to define focus styles! */
|
|
:focus {
|
|
outline: 0;
|
|
}
|
|
body {
|
|
line-height: 1;
|
|
color: black;
|
|
background: white;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
|
|
/* Tables still need 'cellspacing="0"' in the markup. */
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
caption, th, td {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: "";
|
|
}
|
|
blockquote, q {
|
|
quotes: "" "";
|
|
}
|
|
|
|
/*************************************/
|
|
/* Demo Styles */
|
|
.capt,
|
|
.capb {
|
|
background: url("images/caps.gif") no-repeat;
|
|
height:4px;
|
|
width:100%;
|
|
/*position:absolute;*/
|
|
z-index:100;
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
.capt {
|
|
position:absolute;
|
|
background-position:0 -4px;
|
|
}
|
|
.capb {
|
|
margin-top:-19px;
|
|
}
|
|
#content {
|
|
float:left;
|
|
}
|
|
.drawers-wrapper {
|
|
position: relative;
|
|
width: 188px;
|
|
float:left;
|
|
margin:10px;
|
|
}
|
|
.drawers {
|
|
margin-bottom:15px;
|
|
color:#76797C;
|
|
font-size:11px;
|
|
line-height: 18px;
|
|
}
|
|
.drawer {
|
|
background:transparent url(images/sideboxlight_bg.gif) repeat-y scroll 0pt;
|
|
color:#76797C;
|
|
font-size:11px;
|
|
line-height:1.3em;
|
|
height: 1%; /* for IE6 & 7 */
|
|
}
|
|
|
|
.drawer-handle {
|
|
background:#939393 url(images/slider_handlebg.png) no-repeat scroll 0pt;
|
|
color:#333333;
|
|
cursor:default;
|
|
height:25px;
|
|
line-height:25px;
|
|
text-indent:15px;
|
|
font-size:12px;
|
|
width:100%;
|
|
}
|
|
.drawer-handle.open {
|
|
background-color:#72839D;
|
|
background-position:-188px 0pt;
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
/* nasty, but it fixes the indent on the first one. */
|
|
h2.drawer-handle span {
|
|
|
|
}
|
|
.drawer ul {
|
|
padding: 0 12px;
|
|
padding-bottom:0pt;
|
|
}
|
|
|
|
/* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
|
|
* html .drawer ul {
|
|
background-color: #FFFFFF;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
.drawer li {
|
|
border-bottom:1px solid #E5E5E5;
|
|
line-height:16px;
|
|
padding:6px 0pt;
|
|
}
|
|
.drawer-content ul {
|
|
padding-top: 7px;
|
|
}
|
|
.drawer-content li a {
|
|
display:block;
|
|
overflow:hidden;
|
|
}
|
|
.alldownloads li {
|
|
border:0pt none;
|
|
line-height:18px;
|
|
padding:0pt;
|
|
}
|
|
|
|
.drawers a {
|
|
color:#666666;
|
|
text-decoration:none;
|
|
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
|
|
}
|
|
-->
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
|
|
|
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
|
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
|
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
<!--
|
|
$(function () {
|
|
$('ul.drawers').accordion({
|
|
header: 'h2.drawer-handle',
|
|
selectedClass: 'open',
|
|
//animated: 'easeOutBounce',
|
|
//animated: 'bounceslide',
|
|
//animated: 'easeslide',
|
|
animated: function(options) {
|
|
return options.down ? "easeOutBounce" : "easeInOutCubic";
|
|
},
|
|
//duration: 500,
|
|
duration: function(options) {
|
|
return options.down ? 700 : 400;
|
|
},
|
|
event: 'mouseover'
|
|
});
|
|
});
|
|
//-->
|
|
</script>
|
|
</head>
|
|
<body id="page">
|
|
<div id="content">
|
|
<h1>Fixed drawer slide out demo (using accordion plugin)</h1>
|
|
<p>This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.</p>
|
|
<p>Mouse over the headings to reveal the list of available links.</p>
|
|
|
|
<p>
|
|
<a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Read the article this demonstration relates to</a>
|
|
</p>
|
|
</div>
|
|
<div class="drawers-wrapper">
|
|
<div class="capt"></div>
|
|
<ul class="drawers">
|
|
<li class="drawer">
|
|
<h2 class="drawer-handle open">
|
|
<span>Downloads</span>
|
|
</h2>
|
|
<ul class="alldownloads">
|
|
<li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
|
|
<li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
|
|
<li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
|
|
<li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
|
|
<li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
|
|
<li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business & Finance</a></li>
|
|
<li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
|
|
<li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
|
|
<li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
|
|
<li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email & Chat</a></li>
|
|
<li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
|
|
<li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
|
|
<li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home & Learning</a></li>
|
|
<li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
|
|
<li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging & 3D</a></li>
|
|
<li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
|
|
<li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
|
|
<li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math & Science</a></li>
|
|
<li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking & Security</a></li>
|
|
<li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
|
|
<li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
|
|
<li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
|
|
<li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX & Open Source</a></li>
|
|
<li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
|
|
<li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="drawer">
|
|
<h2 class="drawer-handle">Top Downloads</h2>
|
|
<ul>
|
|
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
|
|
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
|
|
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
|
|
<li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
|
|
<li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
|
|
<li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
|
|
<li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
|
|
<li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
|
|
<li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
|
|
<li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
|
|
<li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
|
|
<li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
|
|
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
|
|
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="drawer last">
|
|
<h2 class="drawer-handle">Top Apple Downloads</h2>
|
|
<ul>
|
|
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
|
|
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
|
|
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
|
|
<li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
|
|
<li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
|
|
<li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
|
|
<li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
|
|
<li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
|
|
<li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
|
|
<li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
|
|
<li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
|
|
<li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
|
|
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
|
|
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div class="capb"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|