正确扩展HTML小部件

时间:2011-12-06 19:50:58

标签: html css css-float

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置于原始父元素的适当角落。

2 个答案:

答案 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;">&nbsp;</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>

相关的W3学校: http://www.w3schools.com/cssref/pr_pos_z-index.asp

答案 1 :(得分:1)

2)使用javascript - 计算屏幕上的位置并根据该位置应用类。有4个不同的CSS类,每个都会在不同的方向上扩展窗口小部件,只需将它们应用到窗口小部件。