中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

自动产生菜单


用 JavaScript 来产生菜单可给你省很多事。比如你有好几个网页 但都用一样的菜单。另外改动的时候也很方便。只要改一个地方就 行了。

这个教程另外一个目的是给你展示如何运用数组和如何用JavaScript 来产生HTML。

数组


JavaScript 的数组很灵活,你可用下面的命令产生它

var yourArray = new Array();

这个数组是可以任意扩张的。 也就是说, 它里面的元素可以随时 添加。 比如

yourArray[0] = "first element";

其他的 JavaScript code

yourArray[1] = "second element"

你可注意到数组的第一个元素从零开始。这个规则和 C 里面的数组 一样。当你想要知道到底有多少元素在这个数组里的时候,你可以用
yourArray.length

document.writeln


document.writeln() 是用来把字串写到网页上。但它另外一个很 重要的功能是它可以动态的产生HTML。请看下面的原码

document.writeln("<H1>DHTML Builder</H>");

就是把一个题目写在网页上。 你可能觉得干吗不直接写就行了呢。 用JavaScript来写HTML的优点是你可以动态的来产生HTML。

菜单原码


下面就是自动产生菜单的原码。你可把它拷贝到一个文件中比如

menubar.js

然后修改menuName 和 menuUrl 数组里的元素内容根据你自己的 需要。你可以增加或减少元素。

你如果要改底色,只要修改 bgcolor 就行了。 而宽度可以用 width 来改变。

在你调用他的时候,只要写下面的语句就行了

<SCRIPT src="menubar.js"></SCRIPT>
<SCRIPT>createMenuBar("DHTML Home");</SCRIPT>
 


// Background color of menu bar
var bgcolor = "#FFFFCC"
var width = 500

// Link names
var menuName = new Array();
menuName[0] = "DHTML Home";
menuName[1] = "Book";
menuName[2] = "Daily";
menuName[3] = "Emacs";
menuName[4] = "Photoshop";

// Links
var menuUrl = new Array();
menuUrl[0] = "index.html";
menuUrl[1] = "book.html";
menuUrl[2] = "daily.html";
menuUrl[3] = "emacs.html";
menuUrl[4] = "photoshop.html";

// Produce menu bar
function createMenuBar(pageName) {
document.writeln("<style> H3 {font-size:16pt} </style>");
document.writeln("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=" + width + ">");
document.writeln("<tr><td bgcolor=#669900>");
document.writeln("<table border=0 cellspacing=1 cellpadding=1 width=100% ");
document.writeln("bgcolor=" + bgcolor + "><TR>");
for (i = 0; i < menuName.length; i++) {
if (pageName == menuName[i]) {
document.writeln(" <TD align=center><FONT color=FF9900><B>");
document.writeln(menuName[i] + "</B></FONT></TD>");
}
else {
document.writeln("<TD align=center><a href=" + menuUrl[i] + ">"
document.writeln(menuName[i] + "</A></TD>");
}
}
document.writeln("</TR></TABLE></TD></TR></TABLE>");
}

  《DHTML Builder》 Jie/文

  
相关报道




本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱