forked from hippietrail/jQuery-Splitter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic-example.html
90 lines (77 loc) · 2.08 KB
/
basic-example.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Minimal Vertical splitter</title>
<script src="jquery-1.8.js" type="text/javascript"></script>
<script src="splitter.js" type="text/javascript"></script>
<style type="text/css" media="all">
.simple {
height: 200px;
width: 500px;
border: 5px solid #aaa;
}
.simple div {
overflow: auto;
}
.vsplitbar {
width: 5px;
background: #cab;
}
.splitter {
height: 400px;
margin: 1em 3em;
border: 4px solid #bdb;
background: #f8fff8;
}
.ui-state-default { background-color: #aca }
.ui-state-hover { background-color: #bdb }
.ui-state-highlight { background-color: #add }
.ui-state-error { background-color: #eaa }
.splitter-pane {
overflow: auto;
}
.splitter-bar-vertical {
width: 6px;
background-image: url(img/vgrabber.gif);
background-repeat: no-repeat;
background-position: center;
}
.splitter-bar-vertical-docked {
width: 10px;
background-image: url(img/vdockbar-trans.gif);
background-repeat: no-repeat;
background-position: center;
}
.splitter-bar.ui-state-highlight {
opacity: 0.7;
}
.splitter-iframe-hide {
visibility: hidden;
}
</style>
<script type="text/javascript">
$().ready(function() {
$(".simple").splitter();
});
</script>
</head>
<body>
<h1>jQuery Minimal Vertical Splitter</h1>
<p>
This example shows the minimum code and markup required to create a vertical splitter with fixed height and width, with a class to set minimal styles and using plugin defaults for all settings.
</p>
<p>
<a href="index.html">See the splitter documentation</a>
</p>
<div class="simple">
<div>
This is the left pane of the minimal vertical splitter. Easy, eh?
</div>
<div>
This is the right pane of the minimal vertical splitter. No initial size or position was given, so the two panes start at the same size. The other examples are more complex, but show typical markup and code.
</div>
</div>
</body>
</html>