Author: admitriev
Date: 2008-08-15 08:46:03 -0400 (Fri, 15 Aug 2008)
New Revision: 10113
Added:
management/design/Split Panel component/markup/
management/design/Split Panel component/markup/splitPanel.html
Log:
Added: management/design/Split Panel component/markup/splitPanel.html
===================================================================
--- management/design/Split Panel component/markup/splitPanel.html
(rev 0)
+++ management/design/Split Panel component/markup/splitPanel.html 2008-08-15 12:46:03 UTC
(rev 10113)
@@ -0,0 +1,95 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
+
+<html>
+<head>
+
+<title>Untitled</title>
+<style>
+
+</style>
+
+</head>
+
+<body>
+
+
+<div style="width : 800px; height : 600px;">
+ <div style="background : gold; width : 800px; height : 600px; float :
left;">
+ <div style="width : 790px; height : 590px; margin : 5px">
+
+ <div style="background : red; width : 790px; height : 590px">
+ <div style=" width : 200px; height : 590px; float : left;">
+
+ <div style="border : 1px solid black; width : 198px; height : 33px;
background : silver">
+ <div style="margin : 7px">Header</div>
+ </div>
+ <div style=" border : 1px solid black; border-top : 0px; overflow : auto;
width : 198px; height : 554px">
+
+ <br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br />
+ </div>
+ </div>
+ <div style="background : yellow; width : 5px; height : 590px; float : left;
cursor: col-resize">
+
+ </div>
+ <div style="background : blue; width : 585px; height : 590px; float :
left;">
+
+ <div style=" width : 585px; height : 590px;">
+ <div style=" width : 585px; height : 200px; float : left;">
+ <div style=" border : 1px solid black; overflow : auto; width : 583px;
height : 198px">
+
+ </div>
+ </div>
+ <div style="background : yellow; width : 585px; height : 5px; float : left;
cursor: row-resize">
+
+ </div>
+ <div style="border : 1px solid black; width : 583px; height : 33px;
background : silver">
+ <div style="margin : 7px">Header</div>
+ </div>
+ <div style=" border : 1px solid black; border-top : 0px; background :
green; width : 583px; height : 349px; float : left;">
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
+
+<br /><br />
+<hr>
+<pre>
+<splitPanel cols="200,*" border="5px">
+ <splitArea areaBorder="1" scroll="auto">
+ <areaHeader value="Header">
+ </splitArea>
+ <splitPanel rows="200,*" border="5px">
+ <splitArea areaBorder="1" scroll="auto">
+ </splitArea>
+ <splitArea areaBorder="1" scroll="auto">
+ <areaHeader value="Header">
+ </splitArea>
+ </splitPanel>
+</splitPanel>
+</pre>
+<hr>
+<pre>
+
+<b>No header</b>
+areaSize = parentSize - 2 x areaBorder
+
+<b>With header</b>
+areaWidth = parentWidth - 2 x areaBorder
+areaHeight = parentHeight - headerHeight - 3 x areaBorder
+
+<b>Size of (*) area (if we have n areas)</b>
+area(*)Size = parentSize - areaSize(1) - .... - areaSize(n-1) - (n-1) x border
+
+</pre>
+<hr>
+
+
+
+</body>
+</html>
Show replies by date