Slide Panel滑动面板效果

Slide Panel 是一个 jQuery 插件，使元素可以展开、折叠，创建一个滑动的面板效果。目前只支持水平方向的滑动效果。未来的发展趋势：支持垂直水平方向滑动；可从 dom 中删除的面板。

HTML

<div id="slide_panel" class="panel right">

	<div class="panel_content"></div>

	<div class="panel_tab"></div>

</div>

CSS

.left{float:left;}

.right{float: right;}



.panel{

	height:100%;

	display:block;

	overflow:hidden;

}



.panel_tab{

	height:100%;

	overflow: hidden;

}

JAVASCRIPT

$("#a_panel").panel({

	handle:'#slide_panel > .panel_tab',

	content:'#slide_panel > .panel_content',

	opened:true,

	direction : "both",

	openedSize : 180,

	openEvent : 'mouseenter',

	closeEvent : 'mouseleave',

	openSelector : '#slide_panel',

	closeSelector : '#slide_panel',

});