Question

有点新的JSP和jQuery，所以这个问题可能看起来有点基础 - 但我搜索并找不到一个好的解决方案。
我试图让一个JSP页面从菜单中动态加载标签 - 在网上找到了很多例子，但是他们只需按一下按钮就可以加载标签。到目前为止我所拥有的是：

Welcome.jsp中

<%@page import="java.util.Iterator"%>
<%@page language="java" contentType="text/html; charset=ISO-8859-1"%>
<%@page import="main.mp2.util.UtilConstants, java.util.LinkedList" %>
<% String jsp = (String) request.getAttribute(UtilConstants.JSP_FILE);

%>
<!DOCTYPE html>
<html>
    <head>
        <title>Main Page</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
        <script type="text/javascript" src='js/jquery-1.10.2.js'></script>
        <script type="text/javascript" src='js/jquery.lightbox_me.js'></script>
        <script type="text/javascript" src='js/jquery-ui.js'></script>
        <script type="text/javascript" src='js/TreeMenu.js'></script>
        <script type="text/javascript" src='js/javascript.js'></script>
    </head>

    <body>
        <div id="body_page">
            <div class="content">
                <div class="content_menu">
                    <ul id="menu">
                        <li class="title">Main menu</li>
                        <li><a href="#!/Welcome" id="add_welcome_tab">Main</a></li>
                        <li><a href="#!/Applications" id="add_applications_tab">Applications</a>
                    </ul>
                    <script type="text/javascript">make_tree_menu('menu');</script>
                </div>
                <div id="content_area">
                    <div id="tabs">
                        <ul>
                            <li>
                                <a href="#tabs-1"><%=jsp.substring(jsp.lastIndexOf("/") + 1, jsp.lastIndexOf("."))%></a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
                            </li>
                        </ul>
                        <div id="tabs-1">
                            <jsp:include page="Welcome.jsp" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

javascrips.js

$(function() {
    var tabTemplate = "<li><a href='\#{href}'>\#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;
    var tabs = $("#tabs").tabs();

    // functions to create tabs for each menu type
    //menu-item Welcome
    $(document).on('click', '#add_welcome_tab', function() {
        var label = "Welcome",
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = "Welcome";
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    });

    //menu-item Applications
    $(document).on('click', '#add_applications_tab', function() {
        var label = "Applications",
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = "Applications";
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    });

    // close icon: removing the tab on click
    tabs.delegate("span.ui-icon-close", "click", function() {
        var panelId = $(this).closest("li").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    });

    tabs.bind("keyup", function(event) {
        if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
            var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        }
    });
});

jQuery选项卡的代码取自http://jqueryui.com/tabs/#manipulation，它在非JSP页面上工作，但在我的页面上，它只在同一个选项卡上加载。我可以猜测问题可能出在我<jsp:include page="<%=jsp%>" />的哪个位置，但我不知道应该把它放在哪里。有什么想法吗？

PS：这里的第一个问题：）

EDIT1：我设法让标签出现，但现在我想在所有这些标签中加载每个JSP文件的内容，而不仅仅是第一个......想法？

从菜单动态创建jQuery选项卡

0 个答案: