0

我有拖放面板和拖放面板，当组件被拖放到拖放面板中时，我会显示一个新面板并根据渲染布尔属性隐藏旧面板，如下所示：

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-豆：

old_panel_rendered=true;
new_panel_rendered=false;

public void onComponentDrop(DragDropEvent ddEvent) { 

        old_panel_rendered=false;
        new_panel_rendered=true;

    }

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

请指教，谢谢。

4

1 回答 1

2

调用 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);
}
  • 调用时不要忘记提供组件的确切客户端 ID document.getElementById。您可以通过浏览器的开发人员设置来检测它。如果有问题，你可以放弃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 上轻松看到一些错误。

于 2013-04-24T11:27:26.137 回答