-
Notifications
You must be signed in to change notification settings - Fork 26
/
basic-example.html
51 lines (46 loc) · 1.33 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
<!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.min.js" type="text/javascript"></script>
<script type="text/javascript" src="splitter.js"></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;
}
</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>