Question

我对JS或jQuery没有深入的了解。我想要实现的是我几乎没有对话可以展示，我想给他们共同的外观和感觉。所以我正在调用一个js函数来显示它们。我知道我可以在<p:dialog ></p:dialog>标签处设置属性。但我不希望这种方法，因为我想要一种模块化的方法来设置属性来处理我的应用程序中的所有对话。

功能定义：

function editPartner(dialog){
      dialog.cfg.height = '500px';
      dialog.cfg.width = '600px';
      dialog.cfg.minHeight = '500px';
      dialog.cfg.minWidth = '600px';
      dialog.show();
}

并从

调用它

 <p:commandButton id="editButton" oncomplete="editPartner(PF('DialogEditPartner'))" />

但宽度和高度设置未反映在对话框中。

只是一个参考，来自Prime-face component.js 我可以看到高度和权重是从cfg对象设置的。

PrimeFaces.widget.Dialog = PrimeFaces.widget.BaseWidget.extend({
init: function(a) {
    this._super(a);
    this.content = this.jq.children(".ui-dialog-content");
    this.titlebar = this.jq.children(".ui-dialog-titlebar");
    this.footer = this.jq.find(".ui-dialog-footer");
    this.icons = this.titlebar.children(".ui-dialog-titlebar-icon");
    this.closeIcon = this.titlebar.children(".ui-dialog-titlebar-close");
    this.minimizeIcon = this.titlebar.children(".ui-dialog-titlebar-minimize");
    this.maximizeIcon = this.titlebar.children(".ui-dialog-titlebar-maximize");
    this.blockEvents = "focus." + this.id + " mousedown." + this.id + " mouseup." + this.id;
    this.resizeNS = "resize." + this.id;
    this.cfg.absolutePositioned = this.jq.hasClass("ui-dialog-absolute");
    this.cfg.width = this.cfg.width || "auto";
    this.cfg.height = this.cfg.height || "auto";
    this.cfg.draggable = this.cfg.draggable === false ? false : true;
    this.cfg.resizable = this.cfg.resizable === false ? false : true;
    this.cfg.minWidth = this.cfg.minWidth || 150;
    this.cfg.minHeight = this.cfg.minHeight || this.titlebar.outerHeight();
    this.cfg.position = this.cfg.position || "center";

Answer 1

根据评论我编辑我的答案并显示我的完整代码：完整代码：

<script type="text/javascript">
function editPartner(dialog){
     alert(dialog);

      dialog.show();

      var myDialog =  document.getElementById(dialog.id);
      myDialog.style.height = '500px';
      myDialog.style.width = "600px";
      myDialog.style.minHeight = '500px';
      myDialog.style.minWidth = '600px';

}
</script>
</h:head>
<h:body>
    <h1>Hello Raaj, this is for you</h1>

    <div style="height: 500px">

<p:growl id="grwl" showDetail="true" />
<p:commandButton id="editButton" value="stackoverflow problem" oncomplete="editPartner(PF('dialogForRaajVar'))" />


    <p:dialog   widgetVar="dialogForRaajVar" draggable="true" id="dialogForRaaj"
                 modal="true" showEffect="fade" showHeader="true"
                hideEffect="fade" resizable="false">
                <p:commandButton value="Close"
                    actionListener="#{dashboardView.addDiklat(actionevent)}"
                    update=":mainForm,grwl" oncomplete="PF('frmDiklat').hide()">
                     </p:commandButton>


                </p:dialog>

从java脚本设置Prime face对话框属性

1 个答案: