需要替代HTML框架(我现在知道他们为什么是邪恶的)

时间:2011-07-20 10:58:49

标签: javascript html css frames

总而言之,我正在尝试制作实时页面渲染(浏览网站),同时具有覆盖功能的菜单。

我可能在设计应用程序时遇到了错误,需要替代框架。任何建议都表示赞赏。

因此,应用程序的目标是分析Web内容。它有一个通常的东西的全局菜单:配置文件,注销,设置。具有标准法律资料的全球页脚,中间是所有功能的所在。

我知道其中一项功能是网站的实时渲染,底部有一个菜单覆盖。有了它,他们可以查看元素并写出有关内容的评论。

每个功能都嵌入在一个框架内,所以如果我点击页面查看按钮,框架将射向框架页面并进行中继。这是问题所在。为了获得一个网站的实时渲染并以这种方式使用它,我不得不在一个框架内放置一个框架,因此重复的滚动条就诞生了。

如果有人对布局的工作原理感到困惑,那么这里有两个镜头。 http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=pageviewlayout.jpg 一个更清洁的设计师模型(主要是全球菜单) http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=globalview.jpg

我有编码和覆盖菜单,我尝试了手风琴和css风格的幻灯片。您可以在这里查看代码。

全球菜单: 将其保存为global.html.erb http://paste.ubuntu.com/648135/

PAGE VIEW: 将其保存为pageview.html.erb http://pastebin.ubuntu.com/648146/ 一旦你完成了这个,它应该按照你的期望工作。

它所做的技术或方式是选择,但设计不是。 现在看,在实时网站底部的页面视图上,但在页脚上方。需要有一个可以滑出的重叠菜单。如果有人对如何实现网站的实时视图和重叠菜单有任何想法,我会全力以赴。

谢谢


快速摘要:

我想要实现的是一个具有全局菜单的应用程序,该菜单在所有页面上保持一致。在这个全局菜单的中间是一个框架,它转到我创建的其他页面,例如列表视图,统计信息和页面视图。

页面视图是我目前正在进行的工作。在页面视图中有2个组件, 网站的实时视图(他们想要的任何页面)和底部的重叠菜单。想想就像页面底部的youtubes播放列表一样。问题是,为了将这个网站的实时渲染放在框架中,你在iframe中有一个iframe而我;我试图解决这个问题。

但是,我不是将其视为一个错误,而是在寻找替代方法来实现上述目标




我在pastebin上提供的最终解决方案: 页面预览: http://paste.ubuntu.com/648246/

全球观点: http://paste.ubuntu.com/648250/

基本上这个     jQuery的( '#iframeWrapper')的高度('61%');

1 个答案:

答案 0 :(得分:2)

这是CSS和div的快速演示 - 您可以使用此方法执行您想要的操作。

<style type="text/css">
#holder {position:absolute;left:0;top:0;width:425px;height:350px;z-index:1;}
#menu {position:absolute; left:0;top:300px;height:50px;background-color:#f0f;width:425px;z-index:10;}
</style>

<div id="holder">

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=firebox&amp;aq=&amp;sll=53.800651,-4.064941&amp;sspn=17.72791,44.736328&amp;ie=UTF8&amp;hq=firebox&amp;hnear=&amp;z=5&amp;iwloc=A&amp;cid=2836054255231781537&amp;ll=51.386465,-0.138487" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

<div id="menu">Nav / whatever goes here</div>

还可以选择使用ajax将内容调用到#holder div而不是使用iFrame