add demos

14 years ago · b4d083be74
3 changed files with 85 additions and 0 deletions
--- a/build/png/ox.ui.classic/symbolSet.png
+++ b/build/png/ox.ui.classic/symbolSet.png
--- a/build/png/ox.ui.modern/symbolSet.png
+++ b/build/png/ox.ui.modern/symbolSet.png
--- a/demos/splitpanel/index.html
+++ b/demos/splitpanel/index.html
@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+	<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/jquery-1.4.2.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() {
+			new Ox.SplitPanel({
+				elements: [
+					{
+						collapsible: true,
+						element: new Ox.Element().options({id: 'top'}).css({background: 'yellow'}).html('top').bindEvent('resize', function() { Ox.print('resize top') }),
+						resizable: true,
+						resize: [64, 128, 192],
+						size: 128
+					},
+					{
+						element: new Ox.SplitPanel({
+							elements: [
+								{
+									collapsible: true,
+									element: new Ox.Element().options({id: 'left'}).css({background: 'red'}).html('left'),
+									resizable: true,
+									resize: [128, 256, 384],
+									size: 256
+								},
+								{
+									element: new Ox.Element().options({id: 'center'}).css({background: 'green', overflowY: 'auto'}).html(Ox.repeat('center<br/>', 100)),
+									size: 'auto'
+								},
+								{
+									collapsible: true,
+									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'}),
+												resizable: true,
+												resize: [32, 64, 96],
+												size: 64
+											},
+										],
+										id: 'right',
+										orientation: 'vertical'
+									}),
+									resizable: true,
+									resize: [128, 256, 384],
+									size: 256
+								},
+							],
+							id: 'middle',
+							orientation: 'horizontal'
+						}),
+						size: 'auto'
+					},
+					{
+						collapsible: true,
+						element: new Ox.Element().options({id: 'bottom'}).css({background: 'orange'}).html('bottom'),
+						resizable: true,
+						resize: [64, 128, 192],
+						size: 128
+					},
+				],
+				orientation: 'vertical'
+			}).appendTo($('body'));
+		});
+		</script>
+	</head>
+	<body></body>
+</html>