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

splitpanel update (allow for animation, improve performance)

Browse source
This commit is contained in:
rlx 2011-09-18 21:17:39 +00:00
commit 17d842c64c
7 changed files with 118 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

34
demos/splitpanel/index.html
View file

@ -3,10 +3,9 @@
<head>
<title>ox.js 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/OxUI.js"></script>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script>
Ox.UI(function() {
Ox.load('UI', {debug: true}, function() {
new Ox.SplitPanel({
elements: [
{
@ -21,7 +20,23 @@
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'left'}).css({background: 'red'}).html('left'),
element: new Ox.SplitPanel({
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'leftleft'}).css({background: 'red'}),
resizable: true,
resize: [32, 64, 96],
size: 64
},
{
element: new Ox.Element().options({id: 'leftright'}).css({background: 'magenta'}),
size: 'auto'
}
],
id: 'right',
orientation: 'horizontal'
}),
resizable: true,
resize: [128, 256, 384],
size: 256
@ -35,23 +50,16 @@
element: new Ox.SplitPanel({
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'righttop'}).css({background: 'cyan'}),
resizable: true,
resize: [32, 64, 96],
size: 64
},
{
element: new Ox.Element().options({id: 'rightmiddle'}).css({background: 'blue'}),
size: 'auto'
},
{
collapsible: true,
element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'magenta'}),
element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'blue'}),
resizable: true,
resize: [32, 64, 96],
size: 64
},
}
],
id: 'right',
orientation: 'vertical'

5
demos/splitpanel2/index.html
View file

@ -3,10 +3,9 @@
<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/OxUI.js"></script>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script>
Ox.UI(function() {
Ox.load('UI', {debug: true}, function() {
function element(options, css) {
return Ox.extend({
element: Ox.Element().html(JSON.stringify(options))