add splitpanel demo
This commit is contained in:
parent
9fa83fa98f
commit
7ef84ae6b2
3 changed files with 143 additions and 4 deletions
|
@ -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;
|
||||
|
|
|
@ -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
139
demos/splitpanel2/index.html
Normal 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>
|
Loading…
Reference in a new issue