2011-03-03 23:50:06 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>OxJS SplitPanel Demo</title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
2011-09-18 21:17:39 +00:00
|
|
|
<script type="text/javascript" src="../../build/Ox.js"></script>
|
2011-03-03 23:50:06 +00:00
|
|
|
<script>
|
2011-09-18 21:17:39 +00:00
|
|
|
Ox.load('UI', {debug: true}, function() {
|
2011-03-03 23:50:06 +00:00
|
|
|
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%"}'),
|
2011-03-04 03:50:37 +00:00
|
|
|
size: 24
|
2011-03-03 23:50:06 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
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())
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
{
|
2011-03-04 03:50:37 +00:00
|
|
|
element: new Ox.TreeList({
|
|
|
|
|
data: Ox.COUNTRIES
|
|
|
|
|
})
|
2011-03-03 23:50:06 +00:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
element: Ox.Element()
|
|
|
|
|
.css({
|
|
|
|
|
//position: 'absolute',
|
|
|
|
|
//display: 'block',
|
|
|
|
|
//top: 15,
|
|
|
|
|
//bottom: 0,
|
2011-03-04 03:50:37 +00:00
|
|
|
//height: '200px',
|
2011-03-03 23:50:06 +00:00
|
|
|
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)'}),
|
2011-03-04 03:50:37 +00:00
|
|
|
size: 24
|
2011-03-03 23:50:06 +00:00
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
orientation: 'vertical'
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
collapsible: true,
|
|
|
|
|
element: new Ox.Element()
|
|
|
|
|
.css({backgroundColor: 'rgb(255, 255, 0)'})
|
2011-03-04 03:50:37 +00:00
|
|
|
.html('{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'),
|
|
|
|
|
size: 256
|
2011-03-03 23:50:06 +00:00
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
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>
|
2011-04-22 23:07:55 +00:00
|
|
|
</html>
|
