如何添加按钮以在最后一个选项卡附近添加新选项卡? [英] How to add button for adding new tabs near last tab?

问题描述

有谁知道如何添加一个按钮来添加位于上次创建的标签附近的新标签?如果不清楚我在做什么，只需查看浏览器中的选项卡和添加新选项卡的按钮；-) 这正是我想要管理的.

我正在使用 MyFaces+PrimeFaces.

解决方案

您可以使用 来显示基于某些 bean 集合的动态标签集.您可以将添加"选项卡显示为选项卡集的最后一个选项卡.如有必要，您甚至可以对其进行不同的设计.您可以使用 <p:ajax event="tabChange"> 挂钩选项卡更改侦听器，您可以在其中检查添加"选项卡是否已打开，然后添加新选项卡.>

例如

<p:tabView id="tabs" value="#{bean.tabs}" var="tab" widgetVar="w_tabs"><p:ajax event="tabChange" listener="#{bean.changeTab}" oncomplete="if (args.newTabIndex) w_tabs.select(args.newTabIndex)"/><p:tab title="#{tab.title}"><p>#{tab.content}</p></p:tab></p:tabView></h:form>

与

@ManagedBean@ViewScoped公共类 Bean 实现了 Serializable {私人列表<标签>标签；@PostConstruct公共无效初始化(){//只是一个存根.做你的事来填充标签.//确保最后一个选项卡是添加"选项卡.tabs = new ArrayList();tabs.add(new Tab("tab1", "content1"));tabs.add(new Tab("tab2", "content2"));tabs.add(new Tab("添加...", null));}公共无效changeTab(TabChangeEvent事件){int currentTabIndex = ((TabView) event.getComponent()).getActiveIndex();int lastTabIndex = tabs.size() - 1;//添加"选项卡.如果(currentTabIndex == lastTabIndex){tabs.add(lastTabIndex, new Tab("tab" + tabs.size(), "content" + tabs.size()));//只是一个存根.做你的事来添加一个新标签.RequestContext requestContext = RequestContext.getCurrentInstance();requestContext.update("form:tabs");//更新 p:tabView 以显示新选项卡.requestContext.addCallbackParam("newTabIndex", lastTabIndex);//触发 oncomplete.}}公共列表获取标签(){返回标签；}}

Tab 类在这个例子中只是一个带有 title 和 content 属性的普通 javabean.<p:ajax> 中的 oncomplete 是必要的，因为添加新标签后标签内容会消失(毕竟这看起来很像 PF 错误；我顺便说一下，我使用的是 3.3).

Does anybody know how to add a button for adding new tabs that is positioned near the last created tab? If it is not clear what I am about, just look at tabs in your browser and the button to add new tab;-) that's exactly what I want to manage.

I'm using MyFaces+PrimeFaces.

解决方案

You can use <p:tabView> to show a dynamic tabset based on some collection of beans. You can present the "Add" tab as the last tab of the tabset. You can if necessary even style it differently. You can use <p:ajax event="tabChange"> to hook a tab change listener wherein you can check if the "Add" tab has been opened and then add the new tab.

E.g.

<h:form id="form">
    <p:tabView id="tabs" value="#{bean.tabs}" var="tab" widgetVar="w_tabs">
        <p:ajax event="tabChange" listener="#{bean.changeTab}" oncomplete="if (args.newTabIndex) w_tabs.select(args.newTabIndex)" />
        <p:tab title="#{tab.title}">
            <p>#{tab.content}</p>
        </p:tab>
    </p:tabView>
</h:form>

with

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Tab> tabs;

    @PostConstruct
    public void init() {
        // Just a stub. Do your thing to populate tabs.
        // Make sure that the last tab is the "Add" tab.
        tabs = new ArrayList<Tab>();
        tabs.add(new Tab("tab1", "content1"));
        tabs.add(new Tab("tab2", "content2"));
        tabs.add(new Tab("Add...", null));
    }

    public void changeTab(TabChangeEvent event) {
        int currentTabIndex = ((TabView) event.getComponent()).getActiveIndex();
        int lastTabIndex = tabs.size() - 1; // The "Add" tab.

        if (currentTabIndex == lastTabIndex) {
            tabs.add(lastTabIndex, new Tab("tab" + tabs.size(), "content" + tabs.size())); // Just a stub. Do your thing to add a new tab.
            RequestContext requestContext = RequestContext.getCurrentInstance();
            requestContext.update("form:tabs"); // Update the p:tabView to show new tab.
            requestContext.addCallbackParam("newTabIndex", lastTabIndex); // Triggers the oncomplete.
        }
    }

    public List<Tab> getTabs() {
        return tabs;
    }

}

The Tab class is in this example just a plain javabean with properties title and content. The oncomplete in <p:ajax> is necessary because the tab content would otherwise disappear after adding the new tab (which look much like a PF bug, after all; I was using 3.3 by the way).

这篇关于如何添加按钮以在最后一个选项卡附近添加新选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！