一種多級菜單的實(shí)現(xiàn)方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及WEB技術(shù)領(lǐng)域，尤其涉及一種多級菜單的實(shí)現(xiàn)方法。
【背景技術(shù)】
[0002] 隨著前端web技術(shù)的發(fā)展，人們對前端頁面的訪問速度及性能的要求越來越高； 程序開發(fā)人員也希望在接手項目時，代碼的可讀性及重構(gòu)性好，便于修改及增加功能。
[0003] 在具體的實(shí)現(xiàn)項目中，由于路由器的設(shè)計要求，路由器包含多個模式的功能，每個 功能模式需要顯示的菜單欄內(nèi)容都不一樣，就導(dǎo)致需要針對每個不同的模式，以段落的形 式寫入HTML代碼，然后通過Javascript的顯示和隱藏功能以及不同段落的HTML代碼最外 圍標(biāo)簽的屬性ID來控制在相應(yīng)模式下顯示，代碼量非常大。
[0004] 1、因?yàn)獒槍Σ煌Ｊ蕉夹枰獙慔TML代碼，并通過Javascript控制何時來顯示，所 以代碼量非常大，可讀性差。
[0005] 2、由于點(diǎn)擊不同的菜單項，需要顯示不同的路由器設(shè)置功能頁面，所以在主菜單 和子菜單的HTML標(biāo)簽中，都會設(shè)置ID屬性值，以方便通過Javascript的相應(yīng)方法來進(jìn)行 控制；所以在代碼中會設(shè)置大量的ID值，這些ID值均是以自然數(shù)的順序進(jìn)行排列，所以在 每次需要在中間添加一個子菜單的時候，就需要對其后面的所有菜單ID值進(jìn)行修改，改動 量大，重構(gòu)性差。

【發(fā)明內(nèi)容】

[0006] 本發(fā)明需解決的技術(shù)問題是克服上述的不足，提供一種多級菜單的實(shí)現(xiàn)方法，包 括：
[0007] S1、在主顯示頁面index, asp中引用js文件；
[0008] S2、在js中構(gòu)造一個多維數(shù)組；
[0009] S3、在index, asp頁面中通過Javascript讀取js文件中的數(shù)組項，顯示在index. asp頁面中。
[0010] 進(jìn)一步的，所述多維數(shù)組為三維數(shù)組。
[0011] 進(jìn)一步的，所述多維數(shù)組跟菜單項一一對應(yīng)。
[0012] 進(jìn)一步的，所述菜單項的添加或刪除通過添加或刪除對應(yīng)的數(shù)組實(shí)現(xiàn)。
[0013] 進(jìn)一步的，所述Javascript讀取js文件中的數(shù)組項是通過Javascript的For循 環(huán)讀取。
[0014] 采用本發(fā)明的技術(shù)方案后，修改菜單項時，直接對js文件的多維數(shù)組進(jìn)行操作， 例如添加或刪除菜單項，只需對js文件中的多維數(shù)組對應(yīng)的添加或刪除數(shù)組即可，改動量 小，可讀性強(qiáng)，效率高。
【附圖說明】
[0015]圖1是本發(fā)明提供的多級菜單的實(shí)現(xiàn)方法示意圖。
【具體實(shí)施方式】
[0016] 為了使本領(lǐng)域相關(guān)技術(shù)人員更好地理解本發(fā)明的技術(shù)方案，下面將結(jié)合本發(fā)明實(shí) 施方式的附圖，對本發(fā)明實(shí)施方式中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí) 施方式僅僅是本發(fā)明一部分實(shí)施方式，而不是全部的實(shí)施方式。
[0017] 下面結(jié)合附圖和實(shí)施方式對本發(fā)明作進(jìn)一步說明。
[0018] 參閱圖1，本發(fā)明提供的一種多級菜單的實(shí)現(xiàn)方法，包括下列步驟：
[0019] 步驟S1，在主顯示頁面index, asp中引用js文件；
[0020] js文件是一種腳本語言，可以直接嵌入HTML頁面，但寫成單獨(dú)的js文件有利于結(jié) 構(gòu)和行為的分離。
[0021] 步驟S2,在js中構(gòu)造一個多維數(shù)組；
[0022] 在js文件中構(gòu)造一個多維數(shù)組，對應(yīng)多級菜單，即多少級菜單對應(yīng)多少維數(shù)組。
[0023] 多維數(shù)組跟菜單項一一對應(yīng)。
[0024] 數(shù)組基本結(jié)構(gòu)如下：
[0025] 以二維數(shù)組的第一項為例，menu[0] [0]為一級菜單名稱"基本設(shè)置"
[0026] menu [0] [1] [0]為二級菜單名稱"快速設(shè)置"，menu [0] [1] [1]為二級菜單名所對 應(yīng)的文件名，在腳本語言的點(diǎn)擊事件中需要用到
【主權(quán)項】
1. 一種多級菜單的實(shí)現(xiàn)方法，其特征在于，包括： 51、 在主顯示頁面index, asp中引用js文件； 52、 在js中構(gòu)造一個多維數(shù)組； 53、 在index, asp頁面中通過Javascript讀取js文件中的數(shù)組項，顯示在index, asp 頁面中。
2. 根據(jù)權(quán)利要求1所述的多級菜單的實(shí)現(xiàn)方法，其特征在于，所述多維數(shù)組為=維數(shù) 組。
3. 根據(jù)權(quán)利要求1所述的多級菜單的實(shí)現(xiàn)方法，其特征在于，所述多維數(shù)組跟菜單項 --對應(yīng)。
4. 根據(jù)權(quán)利要求3所述的多級菜單的實(shí)現(xiàn)方法，其特征在于，所述菜單項的添加或刪 除通過添加或刪除對應(yīng)的數(shù)組實(shí)現(xiàn)。
5. 根據(jù)權(quán)利要求1所述的多級菜單的實(shí)現(xiàn)方法，其特征在于，所述化vascript讀取js 文件中的數(shù)組項是通過化vascript的For循環(huán)讀取。
【專利摘要】本發(fā)明提供了一種多級菜單的實(shí)現(xiàn)方法，包括：S1、在主顯示頁面index.asp中引用js文件；S2、在js中構(gòu)造一個多維數(shù)組；S3、在index.asp頁面中通過Javascript讀取js文件中的數(shù)組項，顯示在index.asp頁面中。采用本發(fā)明的技術(shù)方案后，修改菜單項時，直接對js文件的多維數(shù)組進(jìn)行操作，例如添加或刪除菜單項，只需對js文件中的多維數(shù)組對應(yīng)的添加或刪除數(shù)組即可，改動量小，可讀性強(qiáng)，效率高。
【IPC分類】G06F3-0482, G06F9-44
【公開號】CN104536757
【申請?zhí)枴緾N201410848437
【發(fā)明人】王舒恂
【申請人】上海斐訊數(shù)據(jù)通信技術(shù)有限公司
【公開日】2015年4月22日
【申請日】2014年12月26日