Slide Panel滑动面板效果

联合创作 · 2023-10-02 07:43

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',
});


浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报