Dynamically add new tabs while selecting menu - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 3 voices, and was last updated by tobey_murphy 10 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Dynamically add new tabs while selecting menu Posts

February 6, 2014 at 8:32 am Dynamically add new tabs while selecting menu #49068

selva

Participant

Hi,

I want to add new tab dynamically while i am selecting menu.That tab is like a another JSP page.
Here is my code.
<%@page import="java.util.Date"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/welcome.css"/>
        <title>EMS-Home</title>
        <script type="text/javascript">
            function setIframeSrc(id, url) {
                document.getElementById(id).src = url;
            }
        </script>
        <%Date d = new Date();%>
    </head>
    <body>
        <div id="header">
            <div id="vendor_logo">
                <img src="images/e-media.png" width="150" height="60" />
            </div>
            <div id="menu_div">
                <%@include file="menu.jsp"%>
            </div>
            <div id="profile_div">
                <img src="images/user-icon.png" width="30" height="30" />
                <p style="font-size: .75em; margin-left: 40px;margin-top: -30px;">
                    <font color="#fff" style="font:bold 12px Arial, Helvetica;">
                    Username<span><font style="color: #CCCC00;">&nbsp;|&nbsp;</font></span> 
                    <a href="index.jsp">Logout</a><br/>
                    <span> <font style="color: #000;">Last Logged in:20-12-2014</font></span> 
                    </font>
                </p>
            </div>
        </div>
        <div id="content">
            <iframe id="ifrm" frameBorder="0" height="560" width="100%" style="overflow: hidden;overflow-y: hidden;"></iframe>
        </div>
        <div id="footer">
            
        </div>
    </body>
</html>

menu.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/jqx.base.css"/>
        <link rel="stylesheet" type="text/css" href="css/jqx.darkblue.css"/>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jqx/jqxcore.js"></script>
        <script type="text/javascript" src="js/jqx/jqxmenu.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#jqxMenu").jqxMenu({width: '670',
                    height: '30px',
                    animationShowDuration: 300,
                    animationHideDuration: 200,
                    enableHover: true,
                    autoOpen: true,
                    theme: "darkblue",
                    animationShowDelay: 200,
                    showTopLevelArrows: true});
                $("#jqxMenu").css('visibility', 'visible');
                $("#jqxMenu").css('border','none');
            });
        </script>
        <style type="text/css">
            #jqxMenu{
                background: #708090;
            }
        </style>
    </head>
    <body>
        <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
            <ul>
                <li><a href="#">Home</a></li>
                <li>Program Master
                    <ul style='width: 250px;'>
                        </li><li>Program Master
                            <ul style='width: 220px;'>
                                </li><li><a href="CommercialType.jsp">Production Type</a></li>
                                <li><a href="#">Generic Type</a></li>
                                <li><a href="#">Target Group</a></li>
                                <li><a href="#">Program Type</a></li>
                                <li><a href="#">Marketing Class</a></li>
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Channel Details</a></li>
                                <li><a href="#">Break Format</a></li>
                                <li><a href="#">Break Relativity</a></li>
                                <li><a href="#">Break Pattern</a></li>
                                <li><a href="#">Program Details</a></li>
                            </ul>   
                        
                        <li><a href="#">Movie List</a></li>
                    
                
            
        </div 
    </body>
</html>

February 6, 2014 at 8:54 am Dynamically add new tabs while selecting menu #49070

Peter Stoev

Keymaster

Hi selva,

To learn how to dynamically add Tabs, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/settings.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 20, 2014 at 4:46 pm Dynamically add new tabs while selecting menu #58588

tobey_murphy

Participant

It seems like you are going to use AJAX to get tabs dynamically. I can suggest you to read this article: JavaScript menu using jQuery for beginners. There is en example on how to create a dynamical menu, taking its dynamical content from AJAX response. jQuery solves this problem easily!

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.