如何在最后一个标签附近添加添加新标签的按钮？ [英] How to add button for adding new tabs near last tab?

问题描述

是否有人知道如何添加按钮以添加位于最后创建的标签附近的新标签？如果我不清楚我的情况，只需查看浏览器中的标签和添加新标签的按钮;-)这正是我想要管理的内容。

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.

我正在使用MyFaces + PrimeFaces。

I'm using MyFaces+PrimeFaces.

推荐答案

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

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.

例如

<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;
    }

}

选项卡类在此示例中只是一个普通的javabean，其属性为 title 和 content 。 < p：ajax> 中的 oncomplete 是必要的，因为添加新标签后标签内容会消失（毕竟，它看起来很像一个PF小虫;顺便说一句，我使用的是3.3。

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屋！