Question

我正在使用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>

Managed 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转到第一个输入字段，并在自动滚动后向用户显示该输入字段，但我想从第一个输入字段中显示来自Panel Header NOT的用户。

Answer 1

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

如果在JSF2.0中使用模板结构，则需要将JavaScript函数放在标题（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>

Answer 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()" >

这将执行scrolltrick

在JSF / Primefaces页面中自动滚动

2 个答案: