Question

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

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

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

除了SmartGWT之外，我最好的选择是什么？或者我应该坚持下去？如果我可以用javascript

执行此操作，请发布一些代码snipets

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。它可以完全按照你的意愿行事。该链接有许多示例，说明如何使用它（使用源代码进行查看）。看看名为“通过AJAX的内容”和“简单操作”的示例。如果我理解你的话，它们就是你想要的那种。

基于那些我构建了如何做的粗略轮廓。它不适用于快速复制粘贴，并且尚未经过测试。

首先，您需要设置导航链接到的网页，以便他们只返回正文的内容 - 没有<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>

在动态标签

2 个答案: