美不胜 Show
Desisn 投稿信箱:design@netfriends com cn
在 网 页 中 很 多 时 候 会 用 到
C h ec k B0 X的 多选 和 反选 .比 如
网 上 调 查 或 是 后 台 管 理 系 统
等 。 现 在 主 流 的 方 法 是 用
Ja VaSC rjPt来 实现 Ch eckB0X的
多 选 和 反 选 , 下 面 笔 者 就 为 大
家 介 绍 一 下 如 何 实 现 这 样 的 网
页 效 果 。
首 先 我 们 看到 如 图
所示 ,上面是 多选 和
选的功能 选项 .下 面
我们要选 择的项 。第
步在 网页 中要设 置一
表单 ,即<f0 rm></
rm>。然后把所 有的
选 项放入 到 表单 里面 去 .多选 和
全选的 CheckBox加入 OnCIick事
件 :onCIick=”selectIt()”。当单击
全选或反选 C h e c k B O X时 .调用
selectit()函数。
这 样页 面 的设置 就完成 了 .现
在的关键就看 JavaScript了。在源文
件 中找到 SelectlT()这个 JavaScript函
数.第一行定义了一个子 Form对象.
把当前网页的Fo rm对象赋给它.然
后通过 F O rm 对象来获取页面中的
CheckBox控 件。f0r(var i=0 ;i<form
elements
.
1ength:i++)这 条语句是获取
页面中所有的 HTML控件 .但我们要
获取的是 CheckBox.所以在 For循 环
里要加 入 if(fO rm .eI ement s[i].
name==”checkbox”)这 条语句 ,把 所
有的 CheckBox控 件筛选 出来。
如何区分是 全选还 是反选 呢?
e checke(action==”selectAI ?(f0rm.
selectAI J checked):(J e checked)这条
语句就是实现的关键。action是上面
定义的一个变量 ,acti on=event.
srcElement.name把页面中 HTML控件
的name属性赋给了acton.e是当前
的 CheckBox。如果当前 CheckBox的
属性为selectAII,当前 CheckBox就选
上了 .否则就 把状 态置为当前状 态
的反状态 .即如果是选上就置 为未
选上 .如 果是 未选 上就
置 为 选 上 。
在 此 笔 者 只 对 关键
性 代 码做 了具 体 说 明 .
详细 代码 读者 朋 友们可
查看 源 文件 .双击 源 文
件还可查看运行效果 (如图 2)。
制作效果请见本期光盘 @
用 CSS实现中英文双语导航菜单
导航菜单 是网站中一个非常重
要的部分 .其功能是 引导用户进入
网站的各个功能版块 。导航菜单的
好坏直接影响 网站的用户体验 ,有
些 网站 为了满足广大 的用户群 ,经
常会要求有 中英文对照 .下面笔者
就通过一个实例来研 究中英文导航
是如何制作 出来的。别担心 ,不用
图片,不用JavaSc ript,更不用动态
脚本 ,就凭我们熟悉的 CSS便能轻
松 实现 。
由于我 们要设计 的是一个完全
用 C S S 实现的 中英文 双语 导航菜
单 ,所 以首 先要把各个菜单项 放入
·
56 ·
页面中的Body中。初始时,菜单语
言是英文的 (如 图 1).当鼠标悬停
在菜单上时 ,其会变成 中文的 (如
图 2),当然你 也可以反过来做 。
<ul id=’’nan”>
<li> <a class-- ”bi’’href=”index
.
『1t州”>Home<span>首 页</span></a>
</li>
</ul>
从上面的代 码 中可以看 到 ,中
800种语 言的 “你好”问候全世 界
http://www .elite.net/ runner/iennifers/he『IO.htm
■文/图 阿发
文放在 span标签里,关键是需要在
初始时 .使 其 的属 性不可见 。 如何
实现<span>初 始化时不可见呢,在
源码文件 中我们可 以找到下面这段
代码 .通过它便可实现<span>初始
化不可见 。而 当鼠标悬停在菜单上
时 ,span元素里的设定变为可见 .覆
盖在英文菜单上 ,从而实现 了语言
文字 的转换 。具体代码 内容如下 :
.
bi span{
position: absolute;
left: - 999em:
visibility: hidden;
}
制作效果请见本期光盘
维普资讯 http://www.cqvip.com