如何仅使用JavaScript代码创建菜单 [英] How to create a menu using only javascript code

问题描述

自从我开始在NetBeans上编程以来，我必须为我使用的每个页面创建一个HTML菜单，这开始非常耗时，因为如果我有很多页面，则必须返回并重新编辑每个页面以被更新.这是目前使用HTML的菜单的外观:

Ever since I started programming on NetBeans, I had to create a HTML menu for every page that I used which is starting to be very time-consuming because if I have many pages, I have to go back and edit back each to be updated. This is how my menu looks at the moment with HTML:

            <ul class="sidebar-menu">
            <li class="header">MAIN NAVIGATION</li>
            <li class="treeview active">
            <a href="#">
                <i class="fa fa-edit"></i> <span>Projects</span>
                <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu">
                <li class="active"><a href="offers.html"><i class="fa fa-circle-o"></i>Offers</a></li>
                <li class="active"><a href="mobilecarriers.html"><i class="fa fa-circle-o"></i>Mobile Carriers</a></li>
                <li class="active"><a href="affiliatepixel.html"><i class="fa fa-circle-o"></i>Affiliate Pixel Tracking</a></li>
                <li class="active"><a href="carrierip.html"><i class="fa fa-circle-o"></i>Carrier IP</a></li>
                <li class="active"><a href="UpdtConvStats.html"><i class="fa fa-circle-o"></i>Update Conversion Status</a></li>
                <li class="active"><a href="GetConvData.html"><i class="fa fa-circle-o"></i>Get Conversions Data</a></li>
                <li class="active"><a href="UpdtConv.html"><i class="fa fa-circle-o"></i>Update Conversions P/R</a></li>
            </ul>
            </li>
        </ul>

现在，为了避免在所有页面上都有重复的菜单，我想仅使用Javascript代码创建菜单.我已经尝试构建，但是并不能完全达到我的目标.例如:我需要在文本之前有图标，并且所有图标都显示为DOT，我还需要创建子菜单，但我还没有完全找到一种方法.谁能告诉我这段代码是否符合我的目的?如果没有，有人可以帮我吗?

Now in order to avoid having a repeated menu on all pages, I want to create a menu using only Javascript code. I have already tried to build but it doesn't exactly reach the objective that I am aiming; for example: I need to have icons before the text and all it shows is a DOT for all of them, I also need to create sub-menus but I haven't exactly found a way to do it. Can anyone tell me if this code works for my purpose? If not, can anyone help me please?

(function(){

var dirs=window.location.href.split('/'),
cdir=dirs[dirs.length-2];

var dir_ofertas = "";
var dir_teste = "";

if (cdir === "Ofertas") {
    dir_teste = '../teste/';      
}

else if (cdir === "teste") {
    dir_ofertas = '../Ofertas/';        
}
var navItems = [
    {href: dir_ofertas + 'offers.html', text: 'Offers'},
    {href: dir_ofertas + 'mobilecarriers.html', text: 'Mobile Carriers'},
    {href: dir_teste + 'index.html', text: 'Test'}
];

var navElem = document.createElement("nav"),
    navList = document.createElement("ul"), 
    navItem, navLink;

navElem.appendChild(navList);

for (var i = 0; i < navItems.length; i++) {
    navItem = document.createElement("li");
    navLink = document.createElement("a");
    navLink.href = navItems[i].href;
    navLink.innerHTML = navItems[i].text;
    navItem.appendChild(navLink);
    navList.appendChild(navItem);
}
navList.children[0].className = "current";

window.onload = function () {
    document.getElementById('leftNav').appendChild(navElem);
};

}());

推荐答案

我建议您使用jquery；它使所有由javascript生成的Web内容更加容易阅读，而且不难学习.例如，您可以创建一个包含所有DOM元素的对象，然后再将它们存在于DOM中

I recommend you to use jquery; it makes all the javascript generated web content much easier and readable, plus is not hard to learn. As an example, you could create an object that contains all the DOM elements before they exist in the DOM

var myButton=$('<div class="button">ventas</div>');

您可以使用此功能进行任何所需的jQuery操作，例如

You can make whatever jQuery operation you want with this, such as

myButton.addClass('red');
myButton.append('myMenu');

因此，您可以创建一个将json转换为菜单的函数

therefore, you could make a function that converts a json into a menu

menu=[
   {
     name:"inicio",
     url:"http://www.cl"
   }
]

，依此类推.只是一个主意.然后您的对象结构看起来像

and so on. Just an idea. Then your object structure could look like

myMenu=[
   {
      name:"inicio",
      $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>');
   },
   {
      name:"cuenta",
      $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'),
      children=[

          {
           name:"password",
           $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'),
        },
        {...}

      ]
   }
]

在jquery中，您甚至可以在将其添加到DOM之前，将点击侦听器添加到每个元素中(仅当您通过使用该元素的携带变量来引用该元素，而没有Id或Class调用时)

In jquery, you can add click listeners to each element, as said, even before added to DOM (only if you refer to the element by using it's carrying variable, no Id or Class calls)

for each button{
   $thisButton.on("click",function(){
      showSubMenuOrFollowLink();
   });
}

您可以使用香草javascript采取类似的方法，但是当然要困难得多.总体而言，我建议您探索每个按钮具有DOM元素作为变量的对象的可能性，以便您可以轻松地引用它们.

You can take a similar approach with vanilla javascript, but of course that is much harder. Over all, I recommend you to explore the possibility of having objects for each button, that have the DOM element as a variable, so you can refer to them easily.

希望这会有所帮助！

这篇关于如何仅使用JavaScript代码创建菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！