总而言之,我正在尝试制作实时页面渲染(浏览网站),同时具有覆盖功能的菜单。
我可能在设计应用程序时遇到了错误,需要替代框架。任何建议都表示赞赏。
因此,应用程序的目标是分析Web内容。它有一个通常的东西的全局菜单:配置文件,注销,设置。具有标准法律资料的全球页脚,中间是所有功能的所在。
我知道其中一项功能是网站的实时渲染,底部有一个菜单覆盖。有了它,他们可以查看元素并写出有关内容的评论。
每个功能都嵌入在一个框架内,所以如果我点击页面查看按钮,框架将射向框架页面并进行中继。这是问题所在。为了获得一个网站的实时渲染并以这种方式使用它,我不得不在一个框架内放置一个框架,因此重复的滚动条就诞生了。
如果有人对布局的工作原理感到困惑,那么这里有两个镜头。 http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=pageviewlayout.jpg 一个更清洁的设计师模型(主要是全球菜单) http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=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%');
答案 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&source=s_q&hl=en&geocode=&q=firebox&aq=&sll=53.800651,-4.064941&sspn=17.72791,44.736328&ie=UTF8&hq=firebox&hnear=&z=5&iwloc=A&cid=2836054255231781537&ll=51.386465,-0.138487&output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=firebox&aq=&sll=53.800651,-4.064941&sspn=17.72791,44.736328&ie=UTF8&hq=firebox&hnear=&z=5&iwloc=A&cid=2836054255231781537&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