-
Notifications
You must be signed in to change notification settings - Fork 98
/
demo.html
120 lines (118 loc) · 5.14 KB
/
demo.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery Splitter Demo</title>
<meta name="Description" content="jQuery Splitter Demo"/>
<link rel="shortcut icon" href=""/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.splitter.js"></script>
<link href="css/jquery.splitter.css" rel="stylesheet"/>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
@media (max-width: 800px) {
.vsplitter, .hsplitter {
display: none;
}
.vsplitter,
.splitter_panel,
.right_panel,
.left_panel,
.top_panel,
.bottom_panel,
.horizontal_panel,
.vertical_panel,
.hsplitter {
position: static !important;
height: auto !important;
width: auto !important;
}
}
</style>
<script>
jQuery(function($) {
$('#widget').width(700).height(400).split({
orientation: 'vertical',
limit: 100,
position: '70%',
percent: true
});
$('#foo').split({
orientation: 'horizontal',
limit: 10,
percent: true
});
$('#a').split({
orientation: 'vertical',
limit: 10,
percent: true
});
$('#spliter2').css({
width: 200,
height: 300
}).split({
orientation: 'horizontal',
limit: 20,
percent: true
});
$('#multiple').css('height', 200).split({
limit: 5,
orientation: 'vertical'
});
});
</script>
<style>
#multiple > .item {
background-color: #2d2d2d;
}
#spliter2 .a {
background-color: #2d2d2d;
}
#spliter2 .b {
background-color: #2d002d;
}
#foo {
background-color: #E92727;
}
#x {
background-color: #EFBD73;
}
#y {
background-color: #EF3e32;
}
#b {
background-color: #73A4EF;
}
#bar {
background-color: #BEE927;
}
</style>
</head>
<body>
<div id="widget">
<div id="foo">
<div id="a">
<div id="x"><div style="padding: 0.5em; text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper.</div></div>
<div id="y">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper.</div>
</div><!-- #a -->
<div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper. Nulla suscipit, massa vitae suscipit ornare, tellus est consequat nunc, quis blandit elit odio eu arcu. Nam a urna nec nisl varius sodales. Mauris iaculis tincidunt orci id commodo. Aliquam non magna quis tortor malesuada aliquam eget ut lacus. Nam ut vestibulum est. Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet. Nulla vel odio erat, ac mattis enim.</div>
</div> <!-- end of #foo -->
<div id="bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper. Nulla suscipit, massa vitae suscipit ornare, tellus est consequat nunc, quis blandit elit odio eu arcu. Nam a urna nec nisl varius sodales. Mauris iaculis tincidunt orci id commodo. Aliquam non magna quis tortor malesuada aliquam eget ut lacus. Nam ut vestibulum est. Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet. Nulla vel odio erat, ac mattis enim.</div>
</div> <!-- end of #widget -->
<div id="multiple">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
</div>
<div id="debug"></div>
<div id="spliter2">
<div class="a">Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet.
</div>
<div class="b">Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet.
</div>
</div>
</body>
</html>