发信人: neagle()
整理人: eagle(2000-10-10 15:35:36), 站内信件
|
用客户端的JavaScript脚本语言,对HTML语言的、<SPAN></SPAN>和<D IV></DIV>标记进行编程,可以在Internet Explore中实现网页中的菜单、树形结 构目录、滚动条、列表框、下拉列表框及其它控件。
<SPAN></SPAN>标记定义了HTML文档中的一个行内间隔,可以给这个间隔赋一个i d属性,给整个间隔一个统一的颜色、字体、边框、背景等属性,使整个间隔响应 相同的事件,可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的 某一项。多个<SPAN></SPAN>标记可以放在同一行内,组成下拉式菜单的菜单条。
<DIV></DIV>标记定义了HTML文档中的一个矩形区域,可以给这个区域赋一个 id,给整个区域一个统一的颜色、字体、边框、背景等属性,使整个区域响应相 同的事件,通过设置<DIV></DIV>标记的style.display属性为block或none可以在 运行时动态的显示或隐藏这个区域,可以用这个标记制作树形结构目录的子目录 、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。通过程序代码 设置<DIV></DIV>标记的style.posLeft、style.posTop、style.posWidth、styl e.posHeight属性,可以在运行时动态的改变<DIV></DIV>区域的位置和大小,用 来设计滚动条。
列表框和下拉列表框
在一个<DIV></DIV>标记中放置一组<SPAN></SPAN>标记,不同的<SPAN></SP AN>标记间用<BR>标记换行,形成一个列表框。给<SPAN></SPAN>标记添加事件, 使其能根据鼠标的位置改变颜色。在<SPAN></SPAN>标记的onclick事件中,完成 指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中,以 便检索所选择的项目。
在网页中放置一个<SPAN></SPAN>标记作为下拉列表框。
在下拉列表框的右边放置另外一个<SPAN></SPAN>标记,设置这个<SPAN></SPAN> 标记的背景图片,形成下拉箭头。在下拉列表框的下边放置一个<DIV></DIV>标记 制作的列表框作为下拉列表,设置下拉列表的style.display属性为none,然后根 据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序,将所选择的 项目文本放在下拉列表框中。
弹出式菜单
由于网页不能响应鼠标右键,因此,在网页中只能用鼠标左键的click事件实 现弹出式菜单。按照列表框的设计方法设计弹出式菜单,将弹出式菜单<DIV></D IV>标记的style.display属性设置为none。在document的click事件中,通过设置 <DIV></DIV>标记的style.posLeft和style.posTop属性,将弹出式菜单移动到光 标所在的位置,将<DIV></DIV>标记的style.display属性设置为block,显示菜单 。当鼠标离开菜单时,隐藏菜单。
下拉式菜单
用一个<SPAN></SPAN>标记制作菜单条,菜单条<SPAN></SPAN>标记中嵌
套几个<SPAN></SPAN>标记作为子菜单。按照弹出式菜单的设计方法,分别为每一 个子菜单设计下拉菜单。通过响应子菜单的鼠标事件,显示或隐藏下拉式菜单。
为了方便程序移植,可以将菜单数据放在数组里,在程序中通过document对 象的write方法动态生成菜单。
滚动条
在网页中放置一个<DIV></DIV>标记作为滚动条的背景,设置背景的颜色和图 片,背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个<DIV ></DIV>标记作为滚动条的左右箭头,设置左右箭头的背景颜色和背景图片。在背 景区域的中间放置一个<DIV></DIV>标记作为滚动条的滑块,设置滑块的背景颜色 和背景图片,背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事 件<DIV></DIV>标记用来响应鼠标事件,不设置这个标记的背景颜色和背景图片属 性,使其透明。为了能正确的看到滚动条的各个部分并使事件<DIV></DIV>区域能 截获鼠标事件,应使事件<DIV></DIV>标记的Z-INDEX属性最大,背景<DIV></DIV >标记的Z-INDEX属性最小。在事件<DIV></DIV>标记的鼠标事件中,通过比较鼠标 window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。
在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条 各个部件的大小和位置。在网页中放置一个<DIV></DIV>标记,将网页中需要滚动 的部分都放在这个<DIV></DIV>区域中。在滚动条的滚动事件中通过改变这个标记 的style.posLeft和style.posTop属性,实现网页的滚动。
用以上方法实现的滚动条,可以设计成任意的大小和颜色,放置在网页的任意位 置,选择任意的图片作为箭头和滑块的背景,极大的满足艺术化设计网页的需求 。
-- 欢迎访问我的主页
http://nfe.pcchina.net
好的网站也许你见得多了
可是你见过最烂的网址吗
不看不知道
一看
※ 来源:.月光软件站 http://www.moon-soft.com.[FROM: 202.103.237.30]
|
|