jOpanel plugin
An android notifications bar like panel, for hidden content.
Content is defined as the plugin's container div, unless a "src" property will be provided as an iframe's URL
Properties
- closeEvent (default: "click") | The mouse event for closing the panel
- bgcolor (default: "white") | The background color if the content is less than the viewport's height
- width (default: "100%") | The width of the panel
- openmsg (default: "Drag to open...") | Text showing at the panel's bar before opening
- closemsg (default: "Click to close the panel") | Text showing at the panel's bar when is open
- textcolor (default: "grey") | The color of the openmsg and closemsg texts
- src (default: false) | URL to use for hidden content of the panel
- duration (default: 500) | Duration in milliseconds to complete the animation for opening and closing the panel
- maxfollow (default: 50) | Distance in pixels that the panel bar follows the mouse (sticky movement) waiting to grab it for dragging
Methods
Demo
Just drag the top bar of this page...
Dependencies
- jQuery Library
- jQuery UI Library
Syntax with all properties
jQuery().ready(function(){
$('selector').jOpanel({
closeEvent: "click",
bgcolor:"white",
textcolor: "grey",
width:"100%",
openmsg: "drag to open...",
closemsg: "click to close the panel",
src: false,
duration: 500,
maxfollow: 50
});
});