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.