将对话框定位在由javascript变量定义的位置

时间:2011-07-05 15:29:09

标签: primefaces

如何在javascript变量定义的x,y坐标中动态定位素数dialog

我的尝试: -

我尝试通过javascript本身做到这一点,但我没有通过以下代码设置位置:

        var dialog_x=300;
        var dialog_y=500;

        var s = document.getElementById("dialogId"); 
        s.style.position = "relative";
        s.style.left = dialog_x + "px";
        s.style.top = dialog_y + "px";

请注意,此dialogId是我在对话框的id属性中定义的。当我开始知道父容器的id也附加到这个id时,我也尝试使用结果id(在追加之后),但它不起作用。

修改

我发现对话框容器(包含对话框的标题和内容)我希望通过对话框组件上的id属性分配的id没有分配任何id,这就是为什么我可以不访问对话框。我仍然无法理解如何在未分配任何ID时检索此元素。我定义的id实际上被分配给主对话框容器内的对话框内容容器。

1 个答案:

答案 0 :(得分:2)

使用jQuery,您可以调用javascript方法,该方法将在对话框显示时调整对话框的位置。

    <h:form prependId="false">
        <p:commandButton value="Select Location" oncomplete="TreeDialog.show()" id="selectLocationButton"></p:commandButton>
    </h:form>
    <p:dialog header="Select the location" id="treeDialog"
            widgetVar="TreeDialog"
            modal="true" onShow="adjustPositionning($('#selectLocationButton'), $('#treeDialog'))" width="450">
        <p:tree value="#{myController.root}" var="node" dynamic="true" cache="true">  
        <p:treeNode>  
            <h:outputText value="#{node.name}" />  
        </p:treeNode>  
        </p:tree>  
    </p:dialog>

<script type="text/javascript">
function adjustPositionning(sourceElement, dialog) {
    var x = sourceElement.offset().left;
    var y = sourceElement.offset().top;
    var width = sourceElement.width();
    var padding = 15;
  dialog.parent().offset({ top: y, left: x + width + padding });
}
</script>