Skip to content

Commit fccb8d0

Browse files
author
=
committed
bugs on toggle sliding panes
1 parent 353c60c commit fccb8d0

File tree

5 files changed

+62
-55
lines changed

5 files changed

+62
-55
lines changed

‎demos/layout/horizontal.html

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +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>
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>
16+
17+
$(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>
4040
</html>

‎demos/layout/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>jQuery UI Accordion Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99
<div class="demos-nav">

‎demos/layout/nested.html

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
<link rel="stylesheet" href="../demos.css">
1515
<script type="text/javascript">
1616

17-
$(document).ready(function () {
18-
var $outer_layout = $('#outer-layout').layout({west: {sliding: true, hiding: true}});
17+
$(function () {
18+
var $outer_layout = $('#outer-layout').layout({west: {hiding: true}});
1919
var $inner_layout = $('#inner-layout').layout({type:'vertical', north: {sliding: true}});
2020
$('.ui-layout-pane-west .toggleSlide').button().click(function(e){
2121
e.preventDefault();
22-
$outer_layout.layout('toggleSlide', 'west')
22+
$outer_layout.layout('toggleSlide', 'west');
2323
});
2424
$inner_layout.bind('layoutnorthopen', function(e,data){
2525
var self = $inner_layout.data('layout')
@@ -28,10 +28,15 @@
2828

2929
//set the margin to 0 after the west pane has been closed
3030
$('.ui-layout-pane-west').bind('mouseenter', function(){
31-
$outer_layout.layout('open','west')
32-
}).bind('mouseleave', function(){
33-
$outer_layout.layout('close','west')
31+
$outer_layout.layout('open','west');
3432
});
33+
34+
$outer_layout.bind('click',function(e){
35+
if (!$(e.target).closest('.ui-layout-pane-west').length){
36+
$outer_layout.layout('close','west');
37+
}
38+
});
39+
3540
});
3641
</script>
3742
<style>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@
5959

6060
.ui-layout-pane-west.ui-layout-pane-sliding.ui-layout-pane-hiding,
6161
.ui-layout-pane-west.ui-layout-pane-close.ui-layout-pane-hiding{
62-
margin-right: 0;
62+
margin-right: 1px;
6363
}
6464
.ui-layout-pane-east.ui-layout-pane-sliding.ui-layout-pane-hiding,
6565
.ui-layout-pane-east.ui-layout-pane-close.ui-layout-pane-hiding{
66-
margin-left: 0;
66+
margin-left: 1px;
6767
}
6868
.ui-layout-pane-north.ui-layout-pane-sliding.ui-layout-pane-hiding,
6969
.ui-layout-pane-north.ui-layout-pane-close.ui-layout-pane-hiding{
70-
margin-bottom: 0;
70+
margin-bottom: 1px;
7171
}
7272
.ui-layout-pane-south.ui-layout-pane-sliding.ui-layout-pane-hiding,
7373
.ui-layout-pane-south.ui-layout-pane-close.ui-layout-pane-hiding{
74-
margin-bottom: 0;
74+
margin-bottom: 1px;
7575
}
7676

7777

‎ui/jquery.ui.layout.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@
195195
self._sliding(pane)
196196
$pane[self._sizeProp(pane)](0);
197197
self._closed(pane);
198-
self._putForeground(pane);
198+
199199
}
200200
else if (self.options[pane].opened){
201201
self._open(pane, false);
@@ -303,17 +303,19 @@
303303
_sliding: function(pane, sliding){
304304
sliding = ("undefined" == typeof sliding) ? true : sliding;
305305
this.panes[pane][sliding ? 'addClass' : 'removeClass']('ui-layout-pane-sliding');
306-
},
307-
_hiding: function(pane, hiding){
308-
hiding = ("undefined" == typeof hiding) ? false : hiding;
309-
this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding');
306+
if (sliding)
307+
this._putForeground(pane);
310308
},
311309
toggleSlide: function(pane){
312310
this.options[pane].sliding = !this.options[pane].sliding;
313311
this._sliding(pane, this.options[pane].sliding);
314312
this.resize();
315313
return this.element
316314
},
315+
_hiding: function(pane, hiding){
316+
hiding = ("undefined" == typeof hiding) ? false : hiding;
317+
this.panes[pane][hiding ? 'addClass' : 'removeClass']('ui-layout-pane-hiding');
318+
},
317319
_ui:function(pane){
318320
return {pane: this.panes[pane], paneName: pane, options: this.options}
319321
},

0 commit comments

Comments
 (0)