您的位置：首页 > 其它

如何通过单页实现类似iframe左右侧结构

2010-04-21 19:34 381 查看

如何通过单页实现类似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>

<li class="tree_node"><a href="#H2">segment 2</a></li>

<li class="tree_node"><a href="#H3">segment 3</a></li>

<li class="tree_node"><a href="#H4">segment 4</a></li>

<li class="tree_node"><a href="#H5">segment 5</a></li>

</ul>

</div>

</div>

<div id="right_frame" class="virtual_body">

<div class="warning">

<ol>

<li>需要实现，onsizechanged事件，并将OnPageStartUp放进去。</li>

<li>宽度设置不太好，依照我的测试结果，我减掉了20。比较好的做法应该有一套css机制，保证左侧和右侧两个div占满100%，可是不好意思，我不会。</li>

<li>左侧的virtual_left_frame是一个占位符，等价于左侧一个virtual_left_frame，右侧一个right_frame，并且，left_frame的大小与virtual_left_frame一致。这点通过css控制。</li>

<li>该代码已经在IE8,firefox,chrome上测试，行为一致。</li>

<li>class="virtual_body"的div将取代原始的body</li>

</ol>

</div>

<h3 id="H0">

segment 0</h3>

<p>

</p>

<h3 id="H1">

segment 1</h3>

<p>

</p>

<h3 id="H2">

segment 2</h3>

<p>

</p>

<h3 id="H3">

segment 3</h3>

<p>

</p>

<h3 id="H4">

segment 4</h3>

<p>

</p>

<h3 id="H5">

segment 5</h3>

<p>

</p>

</div>

</body>

<script language="javascript" type="text/javascript">

function OnPageStartUp() {

gframe.resetRightFrame('virtual_left_frame', 'right_frame');

}

OnPageStartUp();

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航