3
我想用選項卡創建JSF頁面。像this。但我不知道是否選擇使用Jquery執行此操作，是否可以實現延遲加載 - 當我單擊JSF頁面上的選項卡時，打開選項卡時會生成內容。是否可以在純JSF中實現惰性加載選項卡？我想我可以在兩種情況下輕鬆實現AJAX。如何創建選項卡 - jquery或JSF
最佳希望
A
回答
4
注意：如果你希望你的標籤豆是那麼會話範圍在應答的BUTTOM讀取指令...
既然你不想使用任何第三方Libarary這裏是一個PureJSF + jQuery的例子
JSF + jQuery的阿賈克斯+延遲加載+搜索範圍豆類例...
BTw ^這裏是如何看起來像最終：
你可以看一下爲@PostConstruct的打印輸出，當你點擊每個選項卡上的@PreDestroy web服務器控制檯...
內容的選項卡 - xhtml頁面和它的bean將在選項卡單擊（延遲加載）時加載，並在點擊其他選項卡時被銷燬，
我建議您創建一個新項目，並慢慢將所有文件放入其中並開始玩和看着它...它的100％工作，但我把一些打印出來只是爲了看看它是真正的工作......
這個例子是非常簡單和直接的....
首先是去jQueryUI and download it(1.8.18)
，並把jquery-1.7.1_.min.js和jquery-ui-1.8.18.custom.min.js在WebContent\resources\js和jquery-ui-1.8.18.custom.css在WebContent\resources\css
我們其他文件...
myTabs.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputScript library="js" name="jquery-1.7.1_.min.js" target="head" />
<h:outputScript library="js" name="jquery-ui-1.8.18.custom.min.js" target="head" />
<h:outputStylesheet library="css" name="jquery-ui-1.8.18.custom.css" target="head" />
<h:outputScript library="js" name="mytabs.js" target="head" />
</h:head>
<h:body>
<f:view>
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{myTabs.tabs}" var="tab">
<li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{myTabs.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{myTabs.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq myTabs.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</f:view>
</h:body>
</html>
MyTabs.java
package pack;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class MyTabs{
@PostConstruct
public void init(){
tabs = new ArrayList<MyTabObject>();
tabs.add(new MyTabObject("tab1.xhtml", "tab1"));
tabs.add(new MyTabObject("tab2.xhtml", "tab2"));
tabs.add(new MyTabObject("tab3.xhtml", "tab3"));
}
String selectedTab="tab1";
public String getSelectedTab() {
return selectedTab;
}
public void setSelectedTab(String selectedTab) {
this.selectedTab = selectedTab;
}
public String switchPages(String selTab) {
selectedTab = selTab;
return "myTabs.xhtml";
}
List<MyTabObject> tabs;
public List<MyTabObject> getTabs() {
return tabs;
}
public void setTabs(List<MyTabObject> tabs) {
this.tabs = tabs;
}
}
MyTabObject
package pack;
public class MyTabObject{
String tabfilename;
String tabid;
public String getTabfilename() {
return tabfilename;
}
public void setTabfilename(String tabfilename) {
this.tabfilename = tabfilename;
}
public String getTabid() {
return tabid;
}
public void setTabid(String tabid) {
this.tabid = tabid;
}
public MyTabObject(String tabfilename, String tabid) {
super();
this.tabfilename = tabfilename;
this.tabid = tabid;
}
}
Tab1Page，（Tab2Page和Tab3Page是完全一樣的，只是更改號碼在所有地方）
package pack;
import java.io.Serializable;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean
@ViewScoped
public class Tab1Page implements Serializable{
/**
*
*/
private static final long serialVersionUID = 254415216070877770L;
// Constants
public final static String hashKey = "tab1PageTab";
public String actionString = "";
@PostConstruct
public void post(){
Format formatter;
Date date = new Date();
// Time formate 01:12:53 AM
formatter = new SimpleDateFormat("hh:mm:ss a");
tabName = formatter.format(date);
System.out.println("Tab1Page\t"+tabName+"\[email protected]");
}
@PreDestroy
public void destroy(){
Format formatter;
Date date = new Date();
// Time formate 01:12:53 AM
formatter = new SimpleDateFormat("hh:mm:ss a");
tabName = formatter.format(date);
System.out.println("Tab1Page\t"+tabName+"\[email protected]");
}
String tabName;
public String getTabName() {
return this.getClass().getName().substring(this.getClass().getName().lastIndexOf("."))+"\t"+tabName;
}
public void setTabName(String tabName) {
this.tabName = tabName;
}
public String getActionString() {
return actionString;
}
public void setActionString(String actionString) {
this.actionString = actionString;
}
}
tab1.xhtml（tab2.xhtml和tab3.xhtml是完全一樣的 - 只需更換數字）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:panelGroup>
<h:form>
<h:outputText value="#{tab1Page.tabName}" />
</h:form>
</h:panelGroup>
</ui:composition>
，並在最後一個文件
mytabs.js （將它放在WebContent \ resources \ js中）
$(document).ready(function() {
$("#tabs").tabs();
});
$(window).load(function() {
jsf.ajax.addOnEvent(function (data) {
if (data.status === "success") {
$("#tabs").tabs();
}
});
});
爲了使用會話範圍豆：
的方法switchPages在MyTabs.java應該是void，不返回任何東西，這樣
public void switchPages(String selTab) {
selectedTab = selTab;
}
7
的Primefaces Tabview組件支持遲緩裝載。從陳列櫃
報價：
標籤內容可以延遲加載與AJAX以及，當動態 屬性設置爲「真」僅在活動選項卡的內容會呈現 並點擊一個懶惰標籤將獲取標籤的內容與 ajax。處理帶有大量內容的製表符時，此行爲可以方便地保存帶寬並減少頁面大小 。從陳列櫃
簡單的例子：
<h:form id="form">
<p:tabView id="tabView" dynamic="true" cache="true">
// tabs
</p:tabView>
</h:form>
的cache屬性是用來防止標籤內容阿賈克斯重新加載，如果你的選項卡之間進行切換。
+0
是的，這是一個可能的解決方案。但是，純粹的JSF可以達到相同的結果嗎？ – 2012-04-11 13:31:37
+0
不需要您至少需要一些額外的javascript和css。 – 2012-04-11 13:40:52
+0
好的，我可以在JSF和Lazy加載中使用JQuery嗎？這兩種解決方案中的哪一種需要較少的資源。例如，我將擁有8個選項卡的JSF頁面。每個選項卡將包含具有分頁的JSF數據表等。哪兩個更適合JSF頁面，有很多行代碼？ – 2012-04-11 14:00:16
3
這並不是一個問題，所有的jQuery UI都實現了ajax選項卡。
請參閱jQuery標籤的文檔與ajax here並點擊「查看源代碼」找到您需要的代碼。
0
您可以查看Core Java Server Faces third edition第339頁書籍，瞭解如何使用h:panelGrid實現簡單的選項卡。
輸出是這樣的：
這是一本書的代碼示例：
...
<h:form>
<h:panelGrid styleClass="tabbedPane" columnClasses="displayPanel">
<!-- Tabs -->
<f:facet name="header">
<h:panelGrid columns="4" styleClass="tabbedPaneHeader">
<h:commandLink tabindex="1"
title="#{msgs.jeffersonTooltip}"
styleClass="#{tp.jeffersonStyle}"
actionListener="#{tp.jeffersonAction}">
#{msgs.jeffersonTab}
</h:commandLink>
...
</h:panelGrid>
</f:facet>
<!-- Tabbed pane content -->
<ui:include src="washington.xhtml" />
<ui:include src="roosevelt.xhtml" />
<ui:include src="lincoln.xhtml" />
<ui:include src="jefferson.xhtml" />
</h:panelGrid>
</h:form>
...
這是說明：
The tabbed pane is implemented with h:panelGrid. Because we do not specify
the columns attribute, the panel has one column. The panel’s header—defined
with an f:facet tag—contains the tabs, which are implemented with another
h:panelGrid that contains h:commandLink tags for each tab. The only row in the panel
contains the content associated with the selected tab.
When a user selects a tab, the associated action listener for the command link is
invoked and modifies the data stored in the backing bean. Because we use a
different CSS style for the selected tab, the styleClass attribute of each h:commandLink
tag is pulled from the backing bean with a value reference expression.
As you can see from the top picture in Figure 8–11, we have used the title
attribute to associate a tooltip with each tab. Another accessibility feature is the
ability to move from one tab to another with the keyboard instead of the
mouse. We implemented that feature by specifying the tabindex attribute for
each h:commandLink.
The content associated with each tab is statically included with the JSP include
directive. For our application, that content is a picture and some text, but
you could modify the included JSF pages to contain any set of appropriate
components. Notice that even though all the JSF pages representing content are
included, only the content associated with the current tab is rendered. That is
achieved with the rendered attribute—for example, jefferson.xhtml looks like this:
Putting It All Together
<h:panelGrid columns="2" columnClasses="presidentDiscussionColumn"
rendered="#{tp.jeffersonCurrent}">
<h:graphicImage value="/images/jefferson.jpg"/>
<span class="tabbedPaneContent">"#{msgs.jeffersonDiscussion}"</span>
</h:panelGrid>
Figure 8–12 shows the directory structure for the tabbed pane application and
Listings 8–14 through 8–17 show the most important files.
不幸的是我不知道如何添加延遲加載和AJAX支持是代碼。
相關問題
- 1. 使用JQuery或Javascript創建選項卡
- 2. 如何在jquery中創建選項卡？
- 3. 如何在JSF中創建選項卡部分？
- 4. 如何在angularjs中創建選項卡
- 5. JQuery垂直選項卡 - 創建額外鏈接到選項卡
- 6. jQuery選項卡：如何創建指向特定選項卡的鏈接？
- 7. 如何在Android中的選項卡內創建選項卡？
- 8. 如何選擇創建的jQuery UI選項卡？
- 9. 創建CSS和JQuery選項卡
- 10. jQuery UI選項卡 - 無創建事件
- 11. 創建jquery-ui選項卡的問題
- 12. 使用jquery創建選項卡
- 13. 循環創建jQuery選項卡
- 14. 如何在CMD中創建％選項卡％
- 15. 如何創建幻燈片選項卡
- 16. 我如何創建與選項卡infowindow
- 17. ReactJS - 如何動態創建選項卡？
- 18. 如何創建此4type或3type選項卡列表？
- 19. 如何創建一個類似IE9或Chrome的Dockable選項卡
- 20. 如何爲jQuery UI手風琴或選項卡創建透明背景？
- 21. 如何使用jQuery UI在codeIgniter中創建選項卡式UI？
- 22. 如何在jQuery中爲每個選項卡創建會話
- 23. 如何使用CSS和jQuery創建簡單的選項卡？
- 24. 如何創建自定義jquery選項卡？
- 25. 如何將id添加到動態創建的jquery選項卡
- 26. 如何使用jquery mobile創建選項卡？
- 27. 如何創建基於jquery的子菜單選項卡？
- 28. 如何使用JQuery UI創建垂直選項卡？
- 29. 僅在HTML中創建選項卡
- 30. 我如何從選項卡中刷新另一個選項卡jQuery或javascript
非常好的例子。謝謝你的回答。查看「核心Java服務器面臨的問題」一書，我發現可以在純JSF中創建選項卡。但是有可能創建帶有延遲加載和AJAX的JSF選項卡嗎？ – 2012-04-15 12:13:21
@PeterPenzov還沒有嘗試......這是你如何使用純JSF＆Jquery＆Ajax惰性加載 – Daniel 2012-04-15 12:21:52
@PeterPenzov是不是我的解決方案完全符合您的要求？ – Daniel 2012-04-16 12:57:46