<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery滑动展开侧边固定面板代码</title>
<style type="text/css">
body{font-family:Arial;background:#eee;}
h1, h2{margin-top:0;}
p{color:#ccc;line-height:1.5;}
#page{width:940px;height:400px;padding:20px;margin:0 auto;background:white;}
.panel{display:none;width:220px;padding:20px;background-color:#333;color:#fff;box-shadow:inset 0 0 5px 5px #222;}
</style>
</head>
<body>
<div id="page">
<h1>板滑块的例子</h1>
<a id="left-panel-link" href="#left-panel">打开左面板</a> |
<a id="right-panel-link" href="#right-panel">打开右面板</a>
<hr />
</div>
<!-- Left panel -->
<div id="left-panel" class="panel">
<h2>左侧面板</h2>
<p>点击任何外部面板关闭它。</p>
</div>
<!-- Right panel -->
<div id="right-panel" class="panel">
<h2>右侧面板</h2>
<p>单击该面板不会关闭它,因为外面 <code>clickClose = false</code></p>
<button id="close-panel-bt">关闭</button>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.panelslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#left-panel-link').panelslider();
$('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 200 });
$('#close-panel-bt').click(function() {
$.panelslider.close();
});
});
</script>
</body>
</html>
