0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add splitpanel demo

Browse source
This commit is contained in:
rolux 2011-03-04 00:50:06 +01:00
parent 9fa83fa98f
commit 7ef84ae6b2
3 changed files with 143 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
build/css/ox.ui.css
View file

@ -719,7 +719,7 @@ Lists
}
.OxIconList .OxPage {
position: absolute;
//position: absolute;
left: 0;
right: 0;
margin-left: auto;
@ -892,7 +892,7 @@ Lists
.OxTextList .OxBody {
float: left;
position: absolute;
//position: absolute;
left: 0;
top: 0;
right: 0;
@ -943,7 +943,7 @@ Lists
cursor: ns-resize;
}
.OxTextList .OxPage {
position: absolute;
//position: absolute;
}
.OxTextList.OxDrop .OxItem .OxCell {
color: green;

2
build/css/ox.ui.modern.css
View file

@ -28,7 +28,7 @@ Bars
}
.OxThemeModern .OxResizebar > .OxLine {
background: rgb(48, 48, 48);
background-color: rgb(48, 48, 48);
}
/*

139
demos/splitpanel2/index.html Normal file
View file

@ -0,0 +1,139 @@
<!DOCTYPE HTML>
<html>
<head>
<title>OxJS SplitPanel Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.5.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script>
$(function() {
function element(options, css) {
return Ox.extend({
element: Ox.Element().html(JSON.stringify(options))
}, options);
}
new Ox.SplitPanel_({
elements: [
{
element: Ox.Element()
.css({backgroundColor: 'rgb(0, 0, 255)'})
.html('{size: 16}'),
size: 16
},
{
element: new Ox.SplitPanel_({
elements: [
{
collapsible: true,
element: new Ox.Element()
.css({backgroundColor: 'rgb(0, 255, 0)'})
.html('{collapsible: true, size: 128, resizable: true, resize:[64, 128, 192]}'),
size: 128,
resizable: true,
resize: [64, 128, 192]
},
{
element: new Ox.SplitPanel_({
elements: [
{
collapsible: true,
element: Ox.Element()
.css({backgroundColor: 'rgb(128, 128, 255)'})
.html('{collapsible: true, size: "10%"}'),
size: '10%'
},
{
element: five = new Ox.SplitPanel_({
elements: [
{
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 64, 255)'})
.bindEvent('anyclick', function() {
five.resizeElement(0, '10%');
}),
},
{
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 96, 255)'})
},
{
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 128, 255)'})
.bindEvent('anyclick', function() {
five.replaceElement(2, Ox.Element())
})
},
{
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 160, 255)'})
},
{
element: Ox.Element()
.css({
//position: 'absolute',
top: 16,
bottom: 16,
//display: 'block',
//top: 15,
//bottom: 0,
//height: '100%',
overflowY: 'scroll'
})
.append(
Ox.Element()
.css({
height: '1000px',
backgroundColor: 'rgb(255, 192, 255)'
})
)
}
],
orientation: 'horizontal'
})
},
{
collapsible: true,
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 128, 128)'}),
size: '10%'
}
],
orientation: 'vertical'
})
},
{
collapsible: true,
element: new Ox.Element()
.css({backgroundColor: 'rgb(255, 255, 0)'})
.html('foo'/*'{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'*/),
size: '10%',
resizable: true,
resize: ['5%', '10%', '15%']
}
],
orientation: 'horizontal'
})
},
{
element: Ox.Element()
.css({backgroundColor: 'rgb(255, 0, 0)'}),
size: 16
}
],
orientation: 'vertical'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0
})
.appendTo($('body'));
});
</script>
</head>
<body></body>
</html>