HTML和CSS布局对我来说仍然是一种黑色艺术,所以我很欣赏我正在努力实现的任何帮助。
我正在为我们公司的“小部件”创建JavaScript API,以便人们可以将其包含在他们的网站上。如果用户按下该小部件中的按钮,我想增加小部件的大小,例如从300x200到600x400。到目前为止这么好,有点JS,我很高兴。但有两个限制因素:
(1)我希望将大于300x200的任何内容“溢出”到页面上,即,我不只是增加主机<div>
标签的大小,以便页面上的其他元素移出办法;我实际上想要覆盖页面中的其他元素。
(2)我想要智能地这样做,这样如果小部件位于页面的左侧,它将向右扩展;如果它在页面的右侧,它应该向左扩展;如果它在顶部,它应该向底部扩展;如果它在底部,它应该向上扩展到顶部。
我认为我需要一些适当的位置/显示/浮动CSS属性组合 - 但我还没有能够围绕所需的精确组合。
提前致谢。
编辑12/8/11 -
为了供将来参考,我最终使用jquery UI position()重载来帮助我完成定位。这是我最终使用的代码:
// Create a placeholder object and then hide the engage display element.
var host = engageObject.getHost();
var engageHost = engageObject.getEngageHost();
var parent = engageObject.getParentElement();
this.mPlaceholder = document.createElement('div');
$(this.mPlaceholder)
.width($(engageHost).width())
.height($(engageHost).height())
.css('float', 'left');
parent.insertBefore(this.mPlaceholder, host);
$(engageHost).hide();
// Update the host's layout
this.mOriginalHostPositioning = $(host).css('position');
this.mOriginalHostWidth = $(host).width();
this.mOriginalHostHeight = $(host).height();
$(host).width($(this.mConnectHost).width());
$(host).height($(this.mConnectHost).height());
$(host).css('position', 'absolute');
// If we would otherwise spill out of the window on the right or the bottom,
// make sure we expand in the correct direction.
var topLeft = $(parent).offset();
var right = topLeft.left + $(this.mConnectHost).width();
var bottom = topLeft.top + $(this.mConnectHost).height();
var posStr;
if (right > $(window).width()) {
posStr = "right ";
} else {
posStr = "left ";
}
if (bottom > $(window).height()) {
posStr += "bottom";
} else {
posStr += "top";
}
$(host).position({ my: posStr, at: posStr, of: parent });
实际上,我创建了一个与原始未展开窗口小部件(placeholder
)大小相同的新engageHost
图片,隐藏原始窗口小部件,然后将新connectHost
置于原始父元素的适当角落。
答案 0 :(得分:3)
我认为CSS的Z-Index属性是你正在寻找的。只需将整个div拉到更高的Z-Index就可以解决您的问题。或者,您可能希望保留小部件后面的空间。使用这样的空div:
<!-- The following div takes up the space behind the floating applet. In your case 300x200 or 600x400 ect -->
<div style="width:300; height:200; float:left;"> </div>
<!-- The following div is where your widget goes (floating above the rest of the page) -->
<div style="position:absolute; left:0px; top:0px; z-index:2;">
Your widget code here
</div>
<div style="clear:both">
Other code on the website here.
</div>
答案 1 :(得分:1)
2)使用javascript - 计算屏幕上的位置并根据该位置应用类。有4个不同的CSS类,每个都会在不同的方向上扩展窗口小部件,只需将它们应用到窗口小部件。