|
|
动态HTML初步
| Create Menu Bar |
|
用 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>");
}
|
| |
|