Code for Dynamic Menu Control Panel - Javascript

ControlPanel.js

   <script type="text/javascript">
        var globalLinkGridNoMargin = 0;
        var gridnomarginlinnkcounter = 0;
        var inlinelinklistcounter = 0;
        var globalInlineLinkList = 0;
   
        function AddGridNoMargin(t) {
            globalLinkGridNoMargin = globalLinkGridNoMargin + 1;
            var li = "<li class=\"active-container\"><a href=\"#\" class=\"dropdown-toggle active-toggle\"><input type=\"text\" id=\"grid-no-margin-first-row-text" + globalLinkGridNoMargin + "\" name=\"grid-no-margin-first-row-text" + globalLinkGridNoMargin + "\" style=\"border:0px;background-color:bisque;\"></a><div class=\"m-menu-container\" data-role=\"dropdown\" data-no-close=\"true\" style=\"display: block;\"><div class=\"grid no-margin\"><div class=\"row cells4\"><div class=\"cell\"><ul class=\"unstyled-list\" id=\"GridNoMarginList" + globalLinkGridNoMargin + "\" name=\"GridNoMarginList" + globalLinkGridNoMargin + "\"><li><h3 class=\"text-shadow\"><input type=\"text\" id=\"grid-no-margin-second-row-header-title" + globalLinkGridNoMargin + "\" name=\"grid-no-margin-second-row-header-title" + globalLinkGridNoMargin + "\" style=\"border:0px;background-color:bisque\"></h3></li><li id=\"linkaddoptions\"><span style=\"font-family:Arial;font-size:30px;color:deepskyblue;\"><a href=\"#\" style=\"text-decoration:none\" onclick=\"AddLinkToGridNoMargin(" + globalLinkGridNoMargin + ");\">+</a></span><span style=\"font-family:Arial;font-size:30px;color:deepskyblue;\"><a href=\"#\" style=\"text-decoration:none\" onclick=\"RemoveLinkFromGridNoMargin(this);\">-</a></span></li></ul></div></div></div></div></li>";

            $("#mainMenu").append(li);
          
        }

        function RemoveGridNoMargin(t) {
            $('#mainMenu .active-container').last().remove();
        }


        function AddLinkToGridNoMargin(t) {
            var li = "<li>Text:<input type=\"text\" id=\"linkGridNoMarginTEXT" + gridnomarginlinnkcounter + "\" name=\"linkGridNoMarginTEXT" + gridnomarginlinnkcounter + "\"><li>Link:<input type=\"text\" id=\"linkGridNoMarginLINK" + gridnomarginlinnkcounter + "\" name=\"linkGridNoMarginLINK" + gridnomarginlinnkcounter + "\"></li></li>";
            $("#GridNoMarginList" + globalLinkGridNoMargin + "").append(li);
            gridnomarginlinnkcounter = gridnomarginlinnkcounter + 1;
        }
        
        function RemoveLinkFromGridNoMargin(t) {
            if ($("#GridNoMarginList" + globalLinkGridNoMargin + " li").last().attr("id") != "linkaddoptions") {
                $("#GridNoMarginList" + globalLinkGridNoMargin + " li").last().remove();
            }
        }


        function AddInLineList(t) {
            globalInlineLinkList = globalInlineLinkList + 1;
            var li = "<li class=\"inlinelist\"><a href=\"#\" class=\"dropdown-toggle\"><input type=\"text\" id=\"inline-list-first-row-text" + globalInlineLinkList + "\" name=\"inline-list-first-row-text" + globalInlineLinkList + "\" style=\"border:0px;background-color:bisque;\"></a><div class=\"m-menu-container\" data-role=\"dropdown\" data-no-close=\"true\"><div class=\"inline-list\"><ul class=\"unstyled-list\" id=\"InlineListList" + globalInlineLinkList + "\"><li id=\"linkaddoptions\"><span style=\"font-family:Arial;font-size:30px;color:deepskyblue;\"><a href=\"#\" style=\"text-decoration:none\" onclick=\"AddLinkInlineList(" + globalInlineLinkList + ");\">+</a></span><span style=\"font-family:Arial;font-size:30px;color:deepskyblue;\"><a href=\"#\" style=\"text-decoration:none\" onclick=\"RemoveLinkInlineList(this);\">-</a></span></li></ul></div></div></li>";
            $("#mainMenu").append(li);
        }
        function RemoveInlineList(t) {
            $('#mainMenu .inlinelist').last().remove();
        }


        function AddLinkInlineList(t) {
            //alert(globalInlineLinkList);
            var li = "<li>Text:<input type=\"text\" id=\"linkInlineSecondRowListTEXT" + inlinelinklistcounter + "\" name=\"linkInlineSecondRowListTEXT" + inlinelinklistcounter + "\">Link:<input type=\"text\" id=\"linkInlineSecondRowListLINK" + inlinelinklistcounter + "\" name=\"linkInlineSecondRowListLINK" + inlinelinklistcounter + "\"></li>";
            $("#InlineListList" + globalInlineLinkList + "").append(li);
            inlinelinklistcounter = inlinelinklistcounter + 1;
        }

        function RemoveLinkInlineList(t) {
            //alert(globalLinkGridNoMargin);
            
            if ($("#InlineListList" + globalInlineLinkList + " li").last().attr("id") != "linkaddoptions") {
                $("#InlineListList" + globalInlineLinkList + " li").last().remove();
            }
        }

        function SaveEditedForm(t) {
            document.getElementById("frmEditMenu").submit();
        }
    </script>