0

我正在使用 primefaces 和 JSF2.0 来构建页面。

在页面中，当我单击“Click-me”按钮时，我有两个面板一个面板，它在同一页面中呈现了第二个面板，我想要的是当我单击“Click-me”按钮时，页面也应该滚动自动向下并应将第二个面板标题带到用户面前，当前用户需要手动向下滚动才能看到第二个面板。代码如下

XHTML 页面

<h:form id="form1">
    <p:panel header="Panel One" id="PanelOne" >
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" >

            <h:outputText value="First Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="" ></h:outputText>
                <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}">
                </p:commandButton>

        </h:panelGrid>
    </p:panel>  

    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}">
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" >

            <h:outputText value="First Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

        </h:panelGrid>
    </p:panel>  

</h:form>

托管Bean如下

@ManagedBean
@ViewScoped
public class AutoScrollBean {

private boolean renderPanelTwo;

public boolean isRenderPanelTwo() {
    return renderPanelTwo;
}

public void setRenderPanelTwo(boolean renderPanelTwo) {
    this.renderPanelTwo = renderPanelTwo;
}

public void clickAction () {
    System.out.println("Inside Method");
    setRenderPanelTwo(true);
}

}

编辑：

<p:focus />

通过使用上述焦点命令，curosr 转到第一个输入字段，并且该输入字段在自动滚动后显示给用户，但我想从面板标题显示用户而不是从第一个输入字段。

4

2 回答 2

2

我是通过使用 JavaScript 完成的，并且仅在 IE 中进行了测试，因为我的要求不需要所有浏览器兼容性，因此我没有测试其他浏览器。

如果您使用 JSF2.0 中的模板结构，则 JavaScript 函数需要放在 header (h:head) 部分

<script type="text/javascript">
    function ScrollPage(location) {
        window.location.hash=location;
    }
</script>

在要滚动或锚定页面的页面中创建锚点

<a id="anchorSecondPanel">

单击命令按钮时，在 oncomplete 事件上调用此函数

oncomplete="ScrollPage('anchorSecondPanel')"

xhtml的完整修改代码如下

<h:form id="form1">
    <p:panel header="Panel One" id="PanelOne" >
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelOneGrid" width="90%" >

            <h:outputText value="First Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel One" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="" ></h:outputText>
                <p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}" oncomplete="ScrollPage('FeatureMainPanel')">
                </p:commandButton>

        </h:panelGrid>
    </p:panel>

    <a id="anchorSecondPanel">
    <p:panel header="Second One" id="PanelTwo" rendered="#{autoScrollBean.renderPanelTwo}">
        <h:panelGrid styleClass="panelGrid" columns="2" id="PanelTwoGrid" width="90%" >

            <h:outputText value="First Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

            <h:outputText value="Second Input Field Panel Two" ></h:outputText>
            <p:inputTextarea rows="20" cols="80"></p:inputTextarea>

        </h:panelGrid>
    </p:panel>  

</h:form>
于 2013-05-17T10:34:25.450 回答
0

好吧，只需在您的 xhtml 中添加一些 javascript。

<script>        
    function scroll()
    {
        var grid = $("#form1\\:PanelTwo .panelGrid");       
        $('html, body').animate({
            scrollTop : grid.offset().top
        },4000);                
    }           
</script>

当你按下按钮时调用它：

<p:commandButton value="Click-me" update="form1" action="#{autoScrollBean.clickAction}"  oncomplete="scroll()" >

这将做滚动技巧

于 2013-05-16T11:52:41.820 回答