jDrawer
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/jDrawer
软件介绍
This plugin is creates a stylish drawer (slider) out of a <ul><li> list. jDrawer automatically calculates the height of the <ul>, the first and last children, the drawer dimensions, and much more. It is flexible and completely customizable through settings and CSS.
Usage
Simply use jQuery to locate your <ul> and call jDrawer().
** Note ** Older version 0.9 requires wrapping your <ul> with a div, finding that div with jQuery, and calling jDrawer().
Important:
To take advantage automatic drawer size calculations, you must wrap the code you would like to always be visible with: <div class="jDrawer-handle">. It should also be the last code in the <li>.
The css is very important.
** Note ** Older version 0.9 jDrawer-handle was called jDrawer-buffer.
Example:
Javascript:
$("#jDrawer-1").jDrawer();
$("#jDrawer-2").jDrawer({event: "click"});
$("#jDrawer-3").jDrawer({speed: 500, sticky: false});
$("#jDrawer-4").jDrawer({direction: "left", sticky: false});HTML:
<ul id="jDrawer-1">
<li>Hidden<br><br><br><br><br>Visible</li>
<li>Hidden<br><br><br><br><br>Visible</li>
<li>Hidden<br><br><br><br><br><div style="jDrawer-handle">Visible</div></li>
</ul>Note: More advanced jDrawers require a <div style="jDrawer-handle"> wrapped around the Visible text.
Known Bugs
Both IE6 and IE7 have a CSS issue displaying the bottom right corner of the horizontal jDrawer. The vertical jDrawer works as intended. The problem is IE seems to ignore the bottom padding when displaying the right image which has repeat-y styling.
On IE7 the drawers may flicker a little. The problem is IE7 sends the onmouseover event for links underneath the active drawer, even if it's underneath another drawer. Then when the drawer begins to move, onmouseover events are signaled for the active drawer, and it repositions itself. Removing links from the drawer images should help reduce the flicker. This is an IE7 bug, and I'm looking into solutions.
Settings
- direction (v1.0)
Defines the direction of the drawers. eg. "top" or "left". default: "top".
- layout (v0.9)
Defines the direction of the drawers. eg. "vertical" or "horizontal". default: "vertical".
- speed
Animation time to open a drawer in milliseconds. eg. 250 or 666. default: 300.
- delay
Time delay before starting to open drawer in milliseconds. eg. 200 or 1000. default: 0.
- color
Inhereted background color of the drawers. eg. "#000" or "#CDCDCD". default: "#FFF".
- sticky
Whether or not the drawers stay open onmouseout. eg. true or false. default: true.
- zindex
Additional size to the style z-index. eg. 5 or 100. default: 0.
- buffer
Size of the closed drawers, by default calculates based on "buffer" div. eg. 150 or 20. default: "auto".
- event
Event to bind the opening of drawers to.eg. "click" or "mouseover". default: "hover".
- callback
Custom function to call after a drawer just opens. eg. function() { alert("hello world"); }. default: undefined.
