快捷搜索:

HTMLCSS教程

假如你卖力涉猎了本教程并做了留给你的家庭功课的话,你心中肯定还存在这样一个疑问:这个动画是很有趣,然则你做的网站仍旧是对照朴实无华的那种,以是动态HTML对你来说可能没有太大年夜的代价。

不要紧,本日的教程便是针对你这样的问题制作的。本日我们将建立几个用户界面元素,处置惩罚用户事故,动态改变背景,自动变换网页内容以及显示或暗藏某些页面工具。 所有这些内容都有很强的实用性。

你最好能先涉猎Javascript教程中关于链接事故的课程,以便对用户事故具备初步的懂得。在本日的课程中将常常用到链接事故。

让我们编写一些我们所认识的用户界面元素--下拉菜单,子菜单。这些元素和你现在正在浏览的窗口顶部的菜单条很类似。大年夜多半都有一个类属专用接口对象集,当你必要利用下拉菜单时就可调用该对象集。然后你可以设定当选项目的的名称和履行的行径。

因为HTML不包孕这样的专用接口对象集,以是你必须建立自己的对象集。首先你必须描述它的外不雅。我们在菜单条上加入必然的颜色以及描述各项功能的名称,例如file、edit、view等等。当你点击该翰墨时,就会显示该菜单项下的子菜单。在子菜单框中点击响应的菜单项目就可触发某个履行法度榜样的行径。让我们在HTML中编写这样的菜单。

首先,你必要天生一个DIV作为顶部的菜单条:

现在将该菜单条放在页面顶部,加上特定的颜色:

则天生这样一个DIV:

你可能会对着末一条CSS规范不知以是然,这项是Netscape 对CSS的扩展,它指的是绝对定位了的元素的背景致。因为边框设置为border: 1px solid #99ffff;,以是有需要加入这一条使背景致延伸到DIV的边框。否则背景致只能在DIV所包孕的内容底下显示。

下面我们插入一个菜单目录。我们将标题设置为"Webmonkey" 。

...

Webmonkey

显示结果如下:

Webmonkey

下面在webmonkey菜单项下加入子菜单:

...

Aaron

Captain Cursor

Cassandra

Chris

Courtney

Jeff

Joanne

Jean Pierre

Klug

Kristin

Nadav

Taylor

Thau

Tim

Wendy

同其他菜单项结合后显示结果如下:

Webmonkey

Aaron

Captain Cursor

Cassandra

Chris

Courtney

Jeff

Joanne

Jean Pierre

Klug

Kristin

Nadav

Taylor

Thau

Tim

Wendy

下面我们为菜单项设定功能。首先要做的是选择moreMenu类,并将其暗藏。由于平日环境下,假如你不点击菜单项,它不会显示子菜单目录。以是,你应该加入下面的代码:

.moreMenu {position: absolute;

width: 100px;

border: 1px solid red;

background-color: red;

layer-background-color: red;

visibility: hidden;

top: 22px;

}

现在这个DIV仍旧在页面中,但浏览器不将它显示出来。

现在给菜单条加入脚本使其能相应鼠标的行径并履行响应的功能。我们使用visibility属性暗藏子菜单项目并在菜单项目被点击时显示子菜单。

处置惩罚visibility时,你会立即碰到DOM不兼容的问题。Netscape的DOM更多地受其LAYER标签和属性的影响。以是纵然在DOM中你将一个工具的visibility属性设置为hidden(暗藏),Netscape也会将其显示出来。假如你加入下面这条:

if (daMenu.visibility == 'hidden')

你所获得的不是样式表语法的参数值,而是LAYERS语法的参数值。

以是假如你设置document.foo.visibility = 'visible', 则代码将会按照你预想的那样履行,工具foo在屏幕中可以被看到。假如你用alert(document.foo.visibility)反省参数值, 则返回的数值是show。办理法子是设置一些变量,用标准的前提并设定一个名为visible的变量用于Netscape中的'show',在Internet Elorer中则设置'visible'。在Netscape中设置一个名为'hide' 的变量,在InternetElorer'则用hidden'。在响应的字符串位置放入这些变量,则问题就办理了。

barTog函数所做 的是设置标准的前提语句,假如在被传送的变量菜单中设定的工具是visible,则暗藏该工具,否则就显示该工具。然后将对该工具的引用通报给名为lastMenu的全局变量(这样以来,今后你可以再关闭它)。 接下来你要做的便是调用这个函数,以是在菜单条中你将"Webmonkey"设定一个anchor(锚区),并设定被点击是履行的行径。

Webmonkey

这段代码履行barTog函数,并将应该被打开或关闭的DIV 的名称通报给它。

下面要做的是给每个菜单条设定一个行径。你可以设定任何一种行径,不必然非得是动态HTML。但因为本教程讲的是动态HTML,而我们的课题是将若何改变layers的visibility(可视性)属性 。以是我们为每一个菜单项目设定暗藏和显示包孕响应的网猴图象的层(layer)。

这段脚本仍旧用我们的老同伙--前提语句调用两个工具,现调用item,然后是着末被打开的lastitem(lastItem的缺省设置是'aaron' ),并且该语句还要影象被打开的着末一个菜单(我们在barTog中设置的lastMenu)。设置完所有visibility后还影象lastItem。

下面必要给每个菜单项目加上响应的anchor调用。

这条代码调用menuItem函数,并唆使其显示ID为"captCursor"的DIV。现在将anchor锚定每个菜单项目并将每个DIV指向响应的网猴的名称。

现在你可以制作你自己的菜单并在此中加入自己的菜单项目,暗藏及显示DIV,并在DIV中加入表单元素。翌日的课程中我们将结合前面所学的常识作一个完备的展示。

您可能还会对下面的文章感兴趣: