Skip to content

Commit e710cdd

Browse files
author
=
committed
added ui.layout, first commit
1 parent ed57047 commit e710cdd

File tree

8 files changed

+676
-0
lines changed

8 files changed

+676
-0
lines changed

‎demos/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<script src="../ui/jquery.ui.spinner.js"></script>
3030
<script src="../ui/jquery.ui.tabs.js"></script>
3131
<script src="../ui/jquery.ui.tooltip.js"></script>
32+
<script src="../ui/jquery.ui.layout.js"></script>
3233
<script src="../ui/jquery.effects.core.js"></script>
3334
<script src="../ui/jquery.effects.blind.js"></script>
3435
<script src="../ui/jquery.effects.bounce.js"></script>
@@ -283,6 +284,7 @@
283284
<dd><a href="spinner/index.html">Spinner</a></dd>
284285
<dd><a href="tabs/index.html">Tabs</a></dd>
285286
<dd><a href="tooltip/index.html">Tooltip</a></dd>
287+
<dd><a href="layout/index.html">Layout</a></dd>
286288
<dt>Effects</dt>
287289
<dd><a href="animate/index.html">Color Animation</a></dd>
288290
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>

‎demos/layout/horizontal.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<head>
3+
<meta charset="UTF-8" />
4+
<title>Horizontal layout</title>
5+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.4.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.resizable.js"></script>
12+
<script src="../../ui/jquery.ui.position.js"></script>
13+
<script src="../../ui/jquery.ui.layout.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script type="text/javascript">
16+
17+
$(document).ready(function () {
18+
$('#layout').layout();
19+
});
20+
21+
</script>
22+
<style>
23+
#layout{
24+
margin: 10px;
25+
}
26+
.content{
27+
text-align: center;
28+
overflow: hidden;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<div id="layout">
34+
<div class="ui-layout-pane-west "><div class="content">West</div></div>
35+
<div class="ui-layout-pane-center "><div class="content">Center</div></div>
36+
<div class="ui-layout-pane-east "><div class="content">East</div></div>
37+
</div>
38+
39+
</body>
40+
</html>

‎demos/layout/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery UI Accordion Demos</title>
6+
<link type="text/css" href="../demos.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="demos-nav">
10+
<h4>Examples</h4>
11+
<ul>
12+
<li class="demo-config-on"><a href="horizontal.html">Horizontal</a></li>
13+
<li><a href="vertical.html">Vertical</a></li>
14+
<li><a href="nested.html">Nested</a></li>
15+
</ul>
16+
</div>
17+
</body>
18+
</html>

‎demos/layout/nested.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<html>
2+
<HEAD>
3+
<TITLE>Nested layout Example</TITLE>
4+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
5+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
6+
<script src="../../jquery-1.4.4.js"></script>
7+
<script src="../../ui/jquery.ui.core.js"></script>
8+
<script src="../../ui/jquery.ui.widget.js"></script>
9+
<script src="../../ui/jquery.ui.mouse.js"></script>
10+
<script src="../../ui/jquery.ui.resizable.js"></script>
11+
<script src="../../ui/jquery.ui.position.js"></script>
12+
<script src="../../ui/jquery.ui.layout.js"></script>
13+
<script src="../../ui/jquery.ui.button.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script type="text/javascript">
16+
17+
$(document).ready(function () {
18+
var $outer_layout = $('#outer-layout').layout({west: {sliding: true}});
19+
var $inner_layout = $('#inner-layout').layout({type:'vertical', north: {sliding: true}});
20+
$('.ui-layout-pane-west .toggleSlide').button().click(function(e){
21+
e.preventDefault();
22+
$outer_layout.layout('toggleSlide', 'west')
23+
});
24+
$inner_layout.bind('layoutnorthopen', function(e,data){
25+
var self = $inner_layout.data('layout')
26+
self.options[data.name].height = self.panes['center'].outerHeight()+17
27+
});
28+
29+
});
30+
</script>
31+
<style>
32+
body{
33+
height: 100%;
34+
width: 100%;
35+
padding:0;
36+
margin:0;
37+
}
38+
.ui-layout-pane div.content{
39+
text-align: center;
40+
height: 100%;
41+
overflow:hidden;
42+
}
43+
a.toggleSlide.ui-button.ui-widget {
44+
font-size: 75%;
45+
}
46+
</style>
47+
</HEAD>
48+
<body>
49+
<div id="outer-layout">
50+
<div class="ui-layout-pane-west">
51+
<div class="content">
52+
<a href="nested.html#" class="toggleSlide">Toggle slide</a>
53+
<div>Outer layout west</div>
54+
</div>
55+
</div>
56+
<div id="inner-layout" class="ui-layout-pane-center">
57+
<div class="ui-layout-pane-north"><div class="content">Inner layout North</div></div>
58+
<div class="ui-layout-pane-center"><div class="content">Inner layout Center </div></div>
59+
<div class="ui-layout-pane-south"><div class="content">Inner layout South</div></div>
60+
</div>
61+
</div>
62+
</body>
63+
</html>

‎demos/layout/vertical.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<HTML>
2+
<HEAD>
3+
<TITLE>Vertical layout Example</TITLE>
4+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
5+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
6+
<script src="../../jquery-1.4.4.js"></script>
7+
<script src="../../ui/jquery.ui.core.js"></script>
8+
<script src="../../ui/jquery.ui.widget.js"></script>
9+
<script src="../../ui/jquery.ui.mouse.js"></script>
10+
<script src="../../ui/jquery.ui.resizable.js"></script>
11+
<script src="../../ui/jquery.ui.position.js"></script>
12+
<script src="../../ui/jquery.ui.layout.js"></script>
13+
<link rel="stylesheet" href="../demos.css">
14+
<script type="text/javascript">
15+
16+
$(document).ready(function () {
17+
$('#layout').layout({type: 'vertical'});
18+
});
19+
20+
</script>
21+
<style>
22+
#layout{
23+
margin: 10px;
24+
}
25+
.content{
26+
text-align: center;
27+
overflow: hidden;
28+
}
29+
</style>
30+
</HEAD>
31+
<BODY>
32+
<div id="layout">
33+
<div class="ui-layout-pane-north"><div class="content"><span>North</span></div></div>
34+
<div class="ui-layout-pane-center"><div class="content">Center</div></div>
35+
<div class="ui-layout-pane-south"><div class="content">South</div></div>
36+
</div>
37+
</BODY>
38+
</HTML>

‎themes/base/jquery.ui.base.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@
2222
@import url("jquery.ui.spinner.css");
2323
@import url("jquery.ui.tabs.css");
2424
@import url("jquery.ui.tooltip.css");
25+
@import url("jquery.ui.layout.css");

‎themes/base/jquery.ui.layout.css

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.ui-layout{
2+
position: relative;
3+
overflow: hidden;
4+
border: none;
5+
}
6+
.ui-layout.ui-layout-pane{
7+
border: none;
8+
}
9+
.ui-layout-pane{
10+
position: absolute;
11+
}
12+
.ui-layout-pane-east{
13+
margin-left:16px;
14+
right: 0;
15+
top:0;
16+
}
17+
.ui-layout-pane-west{
18+
margin-right:16px;
19+
left: 0;
20+
top:0;
21+
}
22+
.ui-layout-pane-east.ui-layout-pane-sliding.ui-layout-pane-open{
23+
padding-left: 16px;
24+
}
25+
26+
.ui-layout-pane-west.ui-layout-pane-sliding.ui-layout-pane-open{
27+
padding-right: 16px;
28+
}
29+
30+
.ui-layout-pane-north{
31+
margin-bottom:16px;
32+
top: 0;
33+
left: 0;
34+
}
35+
.ui-layout-pane-south{
36+
margin-top:16px;
37+
bottom: 0;
38+
left: 0;
39+
}
40+
.ui-layout-pane-north.ui-layout-pane-sliding.ui-layout-pane-open{
41+
padding-bottom: 16px;
42+
}
43+
.ui-layout-pane-south.ui-layout-pane-sliding.ui-layout-pane-open{
44+
padding-top: 16px;
45+
}
46+
47+
48+
49+
.ui-layout-pane .ui-resizable-handle{
50+
position: absolute;
51+
z-index: inherit;
52+
}
53+
.ui-resizable-w, .ui-resizable-e {
54+
width: 16px;
55+
height: 100%;
56+
top: 0;
57+
}
58+
.ui-resizable-e{
59+
right:-17px;
60+
}
61+
62+
.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-e{
63+
right:0;
64+
}
65+
66+
.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-w{
67+
left:0;
68+
}
69+
70+
.ui-resizable-w{
71+
left:-17px;
72+
}
73+
74+
.ui-resizable-s, .ui-resizable-n {
75+
height: 16px;
76+
width: 100%;
77+
left: 0;
78+
}
79+
.ui-resizable-n{
80+
top:-17px;
81+
}
82+
83+
.ui-resizable-s{
84+
bottom:-17px;
85+
}
86+
87+
.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-n{
88+
top:0;
89+
}
90+
.ui-layout-pane-sliding.ui-layout-pane-open > .ui-resizable-s{
91+
bottom:0;
92+
}
93+
94+
95+
.ui-resizable-handle .ui-icon{
96+
position: absolute;
97+
}
98+
99+
.ui-resizable-w .ui-icon, .ui-resizable-e .ui-icon{
100+
top: 50%;
101+
margin-top: -8px;
102+
}
103+
.ui-resizable-n .ui-icon, .ui-resizable-s .ui-icon{
104+
left: 50%;
105+
margin-left: -8px;
106+
}

0 commit comments

Comments
 (0)