正确扩展HTML小部件

HTML和CSS布局对我来说仍然是一种黑色艺术,所以我很欣赏我正在努力实现的任何帮助.

我正在为我们公司的“小部件”创建JavaScript API,以便人们可以将其包含在他们的网站上.如果用户按下该小部件中的按钮,我想增加小部件的大小,例如从300×200到600×400.到目前为止这么好,有点JS,我很高兴.但是有两个限制：

(1)我想在页面上“溢出”大于300×200的任何内容,即我不只是增加主机的大小< 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 });

实际上,我创建了一个与原始未展开窗口小部件(engageHost)大小相同的新占位符图像,隐藏原始窗口小部件,然后将新的connectHost放置到原始父元素的相应角落.

解决方法

我认为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>

正确扩展HTML小部件

解决方法

相关文章