如何通过单页实现类似iframe左右侧结构
如何通过单页实现类似iframe左右侧结构呢？今天朋友带着这个问题问我。这个问题的细节主要是左侧如果是一棵树，那么假设右侧有锚点的话则通过左侧点击，在iframe的情况下，左侧肯定是不动的，但是如果实现一个伪的iframe也就是左右侧两个div的话，那么div会向上滚动。当然，这个问题，已经在这里（http://www.cnblogs.com/volnet/archive/2008/08/04/fixed-div-in-IE-and-FireFox-and-other-browser.html）有详细描述了，现在就不再多说，只列代码了。
代码
1 <html>
2 <head>
3 <title>Virtual frame</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 html, body
7 {
8 overflow: hidden;
9 margin: 0px;
10 width: 100%;
11 height: 100%;
12 }
13
14 .virtual_body
15 {
16 height: 100%;
17 overflow-y: scroll;
18 overflow-x: auto;
19 border: 1px solid #bbbbbb;
20 float: left;
21 width: auto;
22 }
23
24 .fixed_div
25 {
26 position: absolute;
27 z-index: 2010;
28 top: 0px;
29 left: 0px;
30 border: 0px solid #fff;
31 background-color: transparent;
32 width: 200px;
33 height: 100%;
34 float: left;
35 }
36 p
37 {
38 width: 600px;
39 height: 300px;
40 border-bottom: 1px solid #eeeeee;
41 }
42
43 #virtual_left_frame
44 {
45 width: 300px;
46 height: 100%;
47 float: left;
48 }
49
50 .warning
51 {
52 background-color: Yellow;
53 border: 1px solid red;
54 }
55 </style>
56 <script language="javascript" type="text/javascript">
57 var gframe = {
58 init: function () {
59
60 },
61 get_boundary: function () {
62 return {
63 top: 0,
64 left: 0,
65 width: document.body.clientWidth,
66 height: document.body.clientHeight
67 };
68 },
69 resetLeftFrame: function (left_frame_id) {
70 var left_frame = document.getElementById(left_frame_id);
71 left_frame.style.marginTop = document.body.scrollTop;
72 alert(left_frame.style.marginTop);
73 },
74 resetRightFrame: function (left_frame_id, right_frame_id) {
75 var left_frame = document.getElementById(left_frame_id);
76 var right_frame = document.getElementById(right_frame_id);
77 if (right_frame) {
78 var boundary = this.get_boundary();
79 if (boundary) {
80 right_frame.style.width = boundary.width - left_frame.clientWidth - 20;
81 }
82 }
83 }
84 };
85 function OnLoad() {
86 gframe.resetLeftFrame('left_frame');
87 }
88 </script>
89 </head>
90 <body>
91 <div id="virtual_left_frame">
92 </div>
93 <div class="fixed_div">
94 <div>
95 Left Tree</div>
96 <div>
97 <ul>
98 <li class="tree_node"><a href="#H0">segment 0</a></li>
99 <li class="tree_node"><a href="#H1">segment 1</a></li>
100 <li class="tree_node"><a href="#H2">segment 2</a></li>
101 <li class="tree_node"><a href="#H3">segment 3</a></li>
102 <li class="tree_node"><a href="#H4">segment 4</a></li>
103 <li class="tree_node"><a href="#H5">segment 5</a></li>
104 </ul>
105 </div>
106 </div>
107 <div id="right_frame" class="virtual_body">
108 <div class="warning">
109 <ol>
110 <li>需要实现，onsizechanged事件，并将OnPageStartUp放进去。</li>
111 <li>宽度设置不太好，依照我的测试结果，我减掉了20。比较好的做法应该有一套css机制，保证左侧和右侧两个div占满100%，可是不好意思，我不会。</li>
112 <li>左侧的virtual_left_frame是一个占位符，等价于左侧一个virtual_left_frame，右侧一个right_frame，并且，left_frame的大小与virtual_left_frame一致。这点通过css控制。</li>
113 <li>该代码已经在IE8,firefox,chrome上测试，行为一致。</li>
114 <li>class="virtual_body"的div将取代原始的body</li>
115 </ol>
116 </div>
117 <h3 id="H0">
118 segment 0</h3>
119 <p>
120 </p>
121 <h3 id="H1">
122 segment 1</h3>
123 <p>
124 </p>
125 <h3 id="H2">
126 segment 2</h3>
127 <p>
128 </p>
129 <h3 id="H3">
130 segment 3</h3>
131 <p>
132 </p>
133 <h3 id="H4">
134 segment 4</h3>
135 <p>
136 </p>
137 <h3 id="H5">
138 segment 5</h3>
139 <p>
140 </p>
141 </div>
142 </body>
143 <script language="javascript" type="text/javascript">
144 function OnPageStartUp() {
145 gframe.resetRightFrame('virtual_left_frame', 'right_frame');
146 }
147 OnPageStartUp();
148 </script>
149 </html>
150
2 <head>
3 <title>Virtual frame</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 html, body
7 {
8 overflow: hidden;
9 margin: 0px;
10 width: 100%;
11 height: 100%;
12 }
13
14 .virtual_body
15 {
16 height: 100%;
17 overflow-y: scroll;
18 overflow-x: auto;
19 border: 1px solid #bbbbbb;
20 float: left;
21 width: auto;
22 }
23
24 .fixed_div
25 {
26 position: absolute;
27 z-index: 2010;
28 top: 0px;
29 left: 0px;
30 border: 0px solid #fff;
31 background-color: transparent;
32 width: 200px;
33 height: 100%;
34 float: left;
35 }
36 p
37 {
38 width: 600px;
39 height: 300px;
40 border-bottom: 1px solid #eeeeee;
41 }
42
43 #virtual_left_frame
44 {
45 width: 300px;
46 height: 100%;
47 float: left;
48 }
49
50 .warning
51 {
52 background-color: Yellow;
53 border: 1px solid red;
54 }
55 </style>
56 <script language="javascript" type="text/javascript">
57 var gframe = {
58 init: function () {
59
60 },
61 get_boundary: function () {
62 return {
63 top: 0,
64 left: 0,
65 width: document.body.clientWidth,
66 height: document.body.clientHeight
67 };
68 },
69 resetLeftFrame: function (left_frame_id) {
70 var left_frame = document.getElementById(left_frame_id);
71 left_frame.style.marginTop = document.body.scrollTop;
72 alert(left_frame.style.marginTop);
73 },
74 resetRightFrame: function (left_frame_id, right_frame_id) {
75 var left_frame = document.getElementById(left_frame_id);
76 var right_frame = document.getElementById(right_frame_id);
77 if (right_frame) {
78 var boundary = this.get_boundary();
79 if (boundary) {
80 right_frame.style.width = boundary.width - left_frame.clientWidth - 20;
81 }
82 }
83 }
84 };
85 function OnLoad() {
86 gframe.resetLeftFrame('left_frame');
87 }
88 </script>
89 </head>
90 <body>
91 <div id="virtual_left_frame">
92 </div>
93 <div class="fixed_div">
94 <div>
95 Left Tree</div>
96 <div>
97 <ul>
98 <li class="tree_node"><a href="#H0">segment 0</a></li>
99 <li class="tree_node"><a href="#H1">segment 1</a></li>
100 <li class="tree_node"><a href="#H2">segment 2</a></li>
101 <li class="tree_node"><a href="#H3">segment 3</a></li>
102 <li class="tree_node"><a href="#H4">segment 4</a></li>
103 <li class="tree_node"><a href="#H5">segment 5</a></li>
104 </ul>
105 </div>
106 </div>
107 <div id="right_frame" class="virtual_body">
108 <div class="warning">
109 <ol>
110 <li>需要实现，onsizechanged事件，并将OnPageStartUp放进去。</li>
111 <li>宽度设置不太好，依照我的测试结果，我减掉了20。比较好的做法应该有一套css机制，保证左侧和右侧两个div占满100%，可是不好意思，我不会。</li>
112 <li>左侧的virtual_left_frame是一个占位符，等价于左侧一个virtual_left_frame，右侧一个right_frame，并且，left_frame的大小与virtual_left_frame一致。这点通过css控制。</li>
113 <li>该代码已经在IE8,firefox,chrome上测试，行为一致。</li>
114 <li>class="virtual_body"的div将取代原始的body</li>
115 </ol>
116 </div>
117 <h3 id="H0">
118 segment 0</h3>
119 <p>
120 </p>
121 <h3 id="H1">
122 segment 1</h3>
123 <p>
124 </p>
125 <h3 id="H2">
126 segment 2</h3>
127 <p>
128 </p>
129 <h3 id="H3">
130 segment 3</h3>
131 <p>
132 </p>
133 <h3 id="H4">
134 segment 4</h3>
135 <p>
136 </p>
137 <h3 id="H5">
138 segment 5</h3>
139 <p>
140 </p>
141 </div>
142 </body>
143 <script language="javascript" type="text/javascript">
144 function OnPageStartUp() {
145 gframe.resetRightFrame('virtual_left_frame', 'right_frame');
146 }
147 OnPageStartUp();
148 </script>
149 </html>
150
posted on 2010-04-21 19:34 volnet（可以叫我大V） 阅读(2704) 评论(0) 编辑 收藏 举报
