Question

我有拖动面板和下拉面板，当在下拉面板中放下组件时，我会显示一个新面板并根据render boolean属性隐藏旧面板，如下所示：

1- xhtml：

<p:outputPanel id="oldPanel" rendered=#{myBean.old_panel_rendered}> .... </p:outputPanel>
<p:outputPanel id="newPanel" rendered=#{myBean.new_panel_rendered}> .... </p:outputPanel>

2- bean：

old_panel_rendered=true;
new_panel_rendered=false;

public void onComponentDrop(DragDropEvent ddEvent) { 

        old_panel_rendered=false;
        new_panel_rendered=true;

    }

如何在渲染时为newPanel执行效果，并在oldPanel被渲染时执行效果。

请告知，谢谢。

Answer 1

调用js函数，该函数将在新项目下拉时应用效果：

<p:ajax listener="#{bean.onDrop}" onstart="applyEffects();" update="newPanel" />

功能是：

function applyEffects() {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}

在调用document.getElementById时，不要忘记给出组件的确切客户端ID。您可以通过浏览器的开发人员设置检测它。如果出现问题，您可以放弃update="newPanel"，也可以尝试update="oldpanel newpanel"。

能够将其应用于特定面板：

public void onComponentDrop(DragDropEvent ddEvent) { 
    int id = event.getData();//or sth.similar to getId
    RequestContext.getCurrentInstance().addCallbackParam("index", id);
}

上层代码为ajax响应添加一个参数，可以通过以下方式检索：

function applyEffects(xhr,status,args) {
    var oldPanel = $(document.getElementById('oldPanel'));
    var newPanel = $(document.getElementById('newPanel'));
    if(args.id=='oldPanel') {//oldPanel or whatever which equals to eventID
        oldPanel.css({"display":"none"});//or oldPanel.fadeOut(500) which looks fancy
    }
    newPanel.css({"display":"inline"});
    newPanel.effect("highlight",
            {color:"#87FF7A"}, 1500);
}

您应该从p:ajax oncomplete="applyEffects(xhr,status,args);"拨打此电话。我在这里直接编码，因此可以很容易地在IDE上看到错误。

如何在呈现组件时应用Primefaces效果

1 个答案: