如何创建选项卡 – Jquery或JSF

我想用标签创建JSF页面。 像这样的东西。 但是我想知道我是否选择使用Jquery执行此操作可以实现延迟加载 – 当我单击JSF页面上的选项卡时，打开选项卡时会生成内容。 是否可以在纯JSF中实现延迟加载选项卡？ 我想我可以在两种情况下轻松实现AJAX。

最好的祝愿

Answer 1

注意：如果您希望标签bean成为会话范围，那么请阅读答案中的说明…

既然你不想使用任何第三方Libarary，这里是一个PureJSF + jQuery示例

JSF + Jquery + Ajax延迟加载+查看范围豆示例…

顺便说一下BTW最终看起来如何：

当您单击每个选项卡时，您可以查看Web服务器控制台以获取@PostConstruct和@PreDestroy的打印输出…

选项卡的内容 – xhtml页面及其bean将在选项卡单击（延迟加载）时加载，并在单击其他选项卡时销毁，

我建议你创建一个新项目并慢慢将所有文件放在其中并开始播放并查看它…它100％正常工作，但我放置了一些打印输出，只是为了看它真的有用……

这个例子非常简单直接….

首先去jQueryUI并下载它（1.8.18）

并在WebContent\resources\css中的WebContent\resources\js和jquery-ui-1.8.18.custom.css中放置jquery-1.7.1_.min.js和jquery-ui-1.8.18.custom.min.js

现在到其他文件……

myTabs.xhtml

             
  
#{tab.tabid}
     
           

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(); 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 tabs; public List getTabs() { return tabs; } public void setTabs(List 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+"\t@PostConstruct..."); } @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+"\t@PreDestroy..."); } 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完全一样 – 只需替换数字）

并到最后一个文件

mytabs.js（将其放在WebContent \ resources \ js中）

 $(document).ready(function () { $("#tabs").tabs(); }); $(window).load(function() { jsf.ajax.addOnEvent(function (data) { if (data.status === "success") { $("#tabs").tabs(); } }); }); 

为了使用Session Scope Beans：

switchPages中的方法switchPages应该是void ，不会返回任何内容，就像这样

  public void switchPages(String selTab) { selectedTab = selTab; } 

Answer 2

Primefaces Tabview组件支持延迟加载。

从展示报价：

选项卡内容也可以延迟加载ajax，当dynamic属性设置为“true”时，只会显示活动选项卡的内容，单击延迟选项卡将使用ajax获取选项卡内容。 在处理具有大量内容的选项卡时，此行为可以方便地保存带宽并减少页面大小。

展示的快速示例：

   // tabs   

如果在选项卡之间切换，则cache属性用于防止ajax重新加载选项卡内容。

Answer 3

用jQuery UI实现ajax选项卡根本不是问题。

请在此处查看带有ajax的jQuery选项卡文档，然后单击“查看源代码”以查找所需的代码。

Answer 4

您可以查看Core Java Server Faces third edition第339页，了解如何使用h:panelGrid实现简单的选项卡。

输出是这样的：

这是本书中的代码示例：

 ...       #{msgs.jeffersonTab}  ...          ... 

这是描述：

 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   "#{msgs.jeffersonDiscussion}"  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支持。