发信人: 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]
|
|