您的 JavaScript 动态菜单栏组件

• 下载源代码文件 - 37.1 KB

引言

创建了 comMenuBar 组件，旨在创建一个可重用的客户端组件，易于适应任何类型的网站，允许用户通过修改参数文件来更改其内容。

参数文件使用图中所示的变量创建，但可以轻松更改，从而实现更动态的对象。 此文件中描述了两个主要变量，名为 comMenuBarP.js

• 通用设计变量（例如，PARAM2）
• 菜单内容变量（例如，MENU2）

// JavaScript Document
var PARAM2 = new Array;

PARAM2['ID'] = "BAR";

PARAM2['widthbar'] = "120px";
PARAM2['heightbar'] = "355px";
PARAM2['posxbar'] = "10px";
PARAM2['posybar'] = "120px";
PARAM2['bordercolor'] = "#000000";
PARAM2['bordersize'] = "1px";

PARAM2['widthbutton'] = "120px";
PARAM2['heightbutton'] = "25px";

PARAM2['heightitemimage'] = "50px";
PARAM2['heightitemtext'] = "20px";

PARAM2['font'] = "Verdana";
PARAM2['fontsize'] = "10";
PARAM2['fontcolor'] = "#FFFFFF";

PARAM2['font2'] = "Verdana";
PARAM2['fontsize2'] = "10";
PARAM2['fontcolor2'] = "#000000";

PARAM2['bgcolor'] = "#0F70A0";
PARAM2['bgcolor2'] = "#A0D0F0";
PARAM2['bgcolorover'] = "#A0D000";
PARAM2['colorover'] = "#0000f0";

PARAM2['margin'] = "2px";

var MENU2 = [
              ["Fishes,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,link.htm"],
                 ["Smelt,1,images/smelt_2b.gif,link2.htm"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"]
              ],
              ["Cats,0,open,link.htm",
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"]
              ],
              ["Birds,0,open,link.htm",
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"]
              ],
              ["Frogs,0,open,link.htm",
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ],
              ["All Animals,0,close,",
                 ["Bullhead Black,1,images/bullhead_black_2b.gif,link.htm"],
                 ["SheepShead,1,images/sheepshead_2b.gif,link.htm"],
                 ["SkipJack,1,images/skipjack_2b.gif,"],
                 ["Smelt,1,images/smelt_2b.gif,"],
                 ["Snapper Lane,1,images/snapper_lane_2b.gif,link2.htm"],
                 ["African Golden,1,images/african_golden_2b.gif,link2.htm"],
                 ["Asian Golden,1,images/asian_golden_2b.gif,link2.htm"],
                 ["Bengal Cat,1,images/bengal_cat_2b.gif,link2.htm"],
                 ["Black-footed Cat,1,images/black-footed_cat_2b.gif,link2.htm"],
                 ["Yellowthroat,1,images/yellowthroat_2b.gif,link2.htm"],
                 ["Wren Carolina,1,images/wren_carolina_2b.gif,link2.htm"],
                 ["Whip-poor-will,1,images/whip-poor-will_2b.gif,link2.htm"],
                 ["Warbler Pronothary,1,images/warbler_pronothary_2b.gif,link2.htm"],
                 ["Warbler Yellow,1,images/warbler_yellow_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog1_2b.gif,link2.htm"],
                 ["Bullfrog,1,images/bullfrog2_2b.gif,link2.htm"],
                 ["Frog Chorus,1,images/frog_chorus_2b.gif,link2.htm"],
                 ["Frog Crawfish,1,images/frog_crawfish_2b.gif,link2.htm"],
                 ["Frog Cricket,1,images/frog_cricket_southern_2b.gif,link2.htm"],
                 ["Frog Edible,1,images/frog_edible2_2b.gif,link2.htm"],
                 ["Frog Green,1,images/frog_green1_2b.gif,link2.htm"]
              ]
           ]

创建了绘图文件以构建组件并设置一系列绘制菜单并使其运行的事件。 comMenuBarD.js 文件中的代码专为 IE 设计，无法在其他浏览器上运行。

用户剩下的唯一操作是从页面调用该组件。 如 comMenuBarx.htm 文件所示，需要执行两个操作。

• 包含文件 comMenuBarP.js 和 comMenuBarD.js
• 使用正确的参数调用绘图函数

有关此组件的更多详细信息，请访问我的网站：http://www.webrickco.com/comMenuBarInstall.php

解决方案的缺点

• 参数化需要手动填充 .js 文件：我的下一个实现将创建一个简短的 C# 可视参数化工具。

历史

• 2007-01-24：发布第一个版本。
• 2007-01-29：已更正之前的缺点：现在它可以在 Firefox 和 IE 上运行。 现在它使用标准的 W3 编码。