[发明专利]一种多级菜单的实现方法

说明书

技术领域

本发明涉及WEB技术领域，尤其涉及一种多级菜单的实现方法。

背景技术

随着前端web技术的发展，人们对前端页面的访问速度及性能的要求越来越高；程序开发人员也希望在接手项目时，代码的可读性及重构性好，便于修改及增加功能。

在具体的实现项目中，由于路由器的设计要求，路由器包含多个模式的功能，每个功能模式需要显示的菜单栏内容都不一样，就导致需要针对每个不同的模式，以段落的形式写入HTML代码，然后通过Javascript的显示和隐藏功能以及不同段落的HTML代码最外围标签的属性ID来控制在相应模式下显示，代码量非常大。

1、因为针对不同模式都需要写HTML代码，并通过Javascript控制何时来显示，所以代码量非常大，可读性差。

2、由于点击不同的菜单项，需要显示不同的路由器设置功能页面，所以在主菜单和子菜单的HTML标签中，都会设置ID属性值，以方便通过Javascript的相应方法来进行控制；所以在代码中会设置大量的ID值，这些ID值均是以自然数的顺序进行排列，所以在每次需要在中间添加一个子菜单的时候，就需要对其后面的所有菜单ID值进行修改，改动量大，重构性差。

发明内容

本发明需解决的技术问题是克服上述的不足，提供一种多级菜单的实现方法，包括：

S1、在主显示页面index.asp中引用js文件；

S2、在js中构造一个多维数组；

S3、在index.asp页面中通过Javascript读取js文件中的数组项，显示在index.asp页面中。

进一步的，所述多维数组为三维数组。

进一步的，所述多维数组跟菜单项一一对应。

进一步的，所述菜单项的添加或删除通过添加或删除对应的数组实现。

进一步的，所述Javascript读取js文件中的数组项是通过Javascript的For循环读取。

采用本发明的技术方案后，修改菜单项时，直接对js文件的多维数组进行操作，例如添加或删除菜单项，只需对js文件中的多维数组对应的添加或删除数组即可，改动量小，可读性强，效率高。

附图说明

图1是本发明提供的多级菜单的实现方法示意图。

具体实施方式

为了使本领域相关技术人员更好地理解本发明的技术方案，下面将结合本发明实施方式的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本发明一部分实施方式，而不是全部的实施方式。

下面结合附图和实施方式对本发明作进一步说明。

参阅图1，本发明提供的一种多级菜单的实现方法，包括下列步骤：

步骤S1，在主显示页面index.asp中引用js文件；

js文件是一种脚本语言，可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

步骤S2，在js中构造一个多维数组；

在js文件中构造一个多维数组，对应多级菜单，即多少级菜单对应多少维数组。

多维数组跟菜单项一一对应。

数组基本结构如下：

以二维数组的第一项为例，menu[0][0]为一级菜单名称“基本设置“

menu[0][1][0]为二级菜单名称”快速设置“，menu[0][1][1]为二级菜单名所对应的文件名，在脚本语言的点击事件中需要用到

上述二维数组对应一个具有二级菜单的菜单项，“基本设置”和“高级设置”为一级菜单项，对应一级菜单项“基本设置”的二级菜单项有“快速设置”和“系统状态”两个菜单项，对应一级菜单项“高级设置”的二级菜单项有“无线设置”和“无线密码设置”两个菜单项。依次类推，多级菜单对应多维数组。由于三级菜单应用比较多，本实施例中多采用三级菜单，故对应的js文件为三维数组。

步骤S3、在index.asp页面中通过Javascript读取js文件中的数组项，显示在index.asp页面中。

js文件中的数组项需要在index.asp页面中显示成菜单项，就需要在index.asp页面中通过Javascript把js文件中的数组项读取出来，一般采用Javascript的For循环读取。

js文件构造完成后，总是会有修改，例如需要添加或删除菜单项，这时，只需在对应的多维数组中对应的位置添加或删除对应的数组就可以实现。