JSF/Primefaces 页面中的自动滚动答案

【问题标题】：AutoScrolling in the JSF/Primefaces pageJSF/Primefaces 页面中的自动滚动
【发布时间】：2013-05-13 11:08:11
【问题描述】：

我正在使用 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 转到第一个输入字段，并且该输入字段在自动滚动后显示给用户，但我想从面板标题显示用户而不是从第一个输入字段。

【问题讨论】：

标签： javascript jsf-2 primefaces

【解决方案1】：

我是通过使用 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>

【讨论】：

【解决方案2】：

只需在您的 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()" >

这将完成滚动技巧

【讨论】：