Den automatischen Bildlauf in der JSF/Primefaces Seite
Ich bin mit primefaces und JSF2.0-Seite gebaut.
In die Seite, ich habe zwei Platten, wenn ich auf den button "Klick-mich" - panel, es machte die zweite Platte in der selben Seite, was ich will, ist, wenn ich auf den button "Klick-mich" - Seite sollte auch nach unten scrollen automatisch und bringen die Zweite Kopfzeile in front des Benutzers, der Derzeit Nutzer müssen manuell nach unten scrollen, um zu sehen, das zweite panel. Code ist wie folgt
XHTML-Seite
<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>
Verwaltete Bean ist als unten
@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);
}
}
EDIT:
<p:focus />
Durch die Verwendung von oben genannten Fokus-Befehl, curosr geht in das erste Eingabefeld und das input-Feld angezeigt, um den Benutzer nach dem automatischen Bildlauf, Aber ich will zeigen, der Benutzer aus dem Panel-Header NICHT aus dem ersten Eingabefeld.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich es per JavaScript und getestet im IE nur, da meine Anforderung nicht erforderlich, alle browser-Kompatibilität damit ich nicht getestet für andere browser.
Die JavaScript-Funktion müssen platziert in der Kopfzeile (h:head) Abschnitt, wenn Sie mit Vorlage Struktur in der JSF2.0
Erstellen der Anker in der Seite, wo Sie wollen, um zu Blättern oder Anker die Seite
Während Sie auf den Befehl Schaltfläche rufen Sie diese Funktion auf oncomplete event
Die komplette geänderte code für xhtml ist als unten
Nur zu gut, fügen Sie einige javascript in Ihrem xhtml.
Bezeichnen, wenn Sie drücken Sie die Taste:
Wird dies tun, die scrolltrick