在动态选项卡中显示链接

Question

我正在使用的网站涉及大量的报告查看。设计要求是，每当用户选择打开另一个页面时[从导航窗格]；它不需要替换现有页面，而是需要添加另一个动态选项卡并在新选项卡中显示相同的选项卡。这样用户就可以在选项卡之间来回切换并查看必要的报告。

现在我不是在谈论在新的浏览器选项卡上打开链接，而是在具有动态选项卡的同一页面上，用户可以简单地在打开的动态选项卡[网页]之间快速来回移动。

这之前是使用 Smart GWT Tabs 实现的，但现在我们想取消 Smart GWT，因此寻找更好的替代方案来实现它。它首先从一个选项卡 [主页] 开始，然后添加选项卡，稍后可以在单击链接时切换到 on.The 需要在选项卡中打开的网页内容主要在许多嵌套表格，并且有相当多的 javascript 来对显示的信息执行各种其他功能。

除了 SmartGWT 之外，实现此目标的最佳选择是什么？还是我应该坚持使用它？如果我可以用 javascript

做到这一点，请做 post 一些代码片段

Answer 1

我的建议是将 Bootstrap 与 jQuery 结合使用 - 它们非常适合，因为 Bootstrap 是基于 jQuery 的。 Bootstrap 有非常好的（并且写得很干净）javascript 组件，您可以使用 jQuery 自定义/操作这些组件。

HTML 中的制表符定义：参见 this Bootstrap manual section。

动态添加新标签只是简单的jQuery功能：

function addTab() {

   // add tab navigation element (append li element to section commented as Nav tabs)
   // add tab content (append div element to section commented as Tab panes)

}

就是这样。几行代码。无需实现切换选项卡 - Bootstrap 的 javascript 会为您完成此操作。

如果您需要完整的示例，请告诉我，但我相信您应该明白了，实现是非常基本的 jQuery 练习。

Answer 2

我想你应该看看 jQuery Tabs。它可以做你想做的事。 link 有许多示例说明如何使用它（附有供查看的源代码）。查看名为 "Content via AJAX" 和 "Simple manipulation" 的示例。如果我没理解错的话，它们结合起来就是您想要的。

基于这些，我构建了一个粗略的大纲。它不是用于快速复制粘贴，也没有经过测试。

首先，您需要设置导航 link 的页面，以便它们只有 return 正文的内容 - 没有 <html> 或 <head> 标签。这是 JavaScript:

var tabs;

//When the DOM is ready.
jQuery(function() {

    //Save a reference to the tabs div for future use.
    tabs = jQuery("#tabs");

    //Activate the tabs.
    tabs.tabs();

    //Add the default tab.
    addTab('index.html', 'Welcome!');

    //Add click events for the navigation links.
    jQuery(".navlink").click(function(event) {

        //What page was the link to?
        url = jQuery(this).attr('href');

        //And what is the text of the link?
        title = jQuery(this).html();

        //Add that tab.
        addTab(url, title);

        //Don't actually go to the url of the clicked link.
        event.preventDefault();

    });

});

function addTab(url, title) {

    //Find any tabs with this URL
    open = tabs.find('.ui-tabs-nav a[href=' + url + ']');

    //Is there already one?
    if(open.length) {

        //Get the index of that tab.
        i = open.parent().index()

        //Switch to that tab.
        tabs.tabs("option", "active", i);

    }
    else {

        //Add an item to the list of tabs.
        tabs.find('.ui-tabs-nav').append('<li><a href="' + url + '">' + title + '</a></li>');

        //And update to activate the tab.
        tabs.tabs("refresh");

    }

}

...这里是 HTML:

<a class="navlink" href="one.html">One</a>
<a class="navlink" href="two.html">Two</a>
<div id="tabs">
    <ul>
        <!-- All the tabs will be added here. -->
    </ul>
    <!-- And all the content of the tabs here. -->
</div>

在动态选项卡中显示链接

Display links in dynamic tabs

javascript

jquery

gwt