-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
71 lines (67 loc) · 3.51 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.slidingpanel.css"/>
</head>
<body>
<style>
#panel {
width: 500px;
background-color: #fff;
padding: 10px;
margin-top: 15px;
border: 1px solid #ccc;
}
p {
margin: 25px;
}
</style>
<h1>Sliding Panel test page</h1>
<p>
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
Some normal content. Some normal content. Some normal content. Some normal content. Some normal content.
</p>
<div id="panel">
From now, Sliding Panel can be finely positionned.
The position parameter determines on which side
of your container the panel will be. <br/>
The offset parameter allows you to fine tune the position,
relatively to the sides you wish. You could, for example,
use position: 'right' and offset: {top: '100px'} to make it appear
on the right side, 100px from the top. Have a try !
</div>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="jquery.slidingpanel.js"></script>
<script type="text/javascript">
$(function() {
$("#panel").slidingPanel({
position: 'left',
offset: {
top: '100px'
}
});
});
</script>
</body>
</html>