手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Dreamweaver>列表

DHTML实例解析:用HTC统一定制表单样式

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

  在制作表单的时候,我们往往用CSS来重新定义表单元素(如输入框、按钮等)的样式,以便看起来更加美观。而表单中的很多不同元素(如输入框、提交按钮、单选框)使用的是个标记--Input,这就意味着,我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的。一般的做法是定义几种Class,在写表单的时候,不同的元素使用不同的Class。但是在表单较多的时候,这仍显得不是很方便。

  那么,有没有更省力的办法呢?答案是肯定的,一个简单的HTC就能够解决这个问题。

  实例如下:

  htc代码:

  <script language=javascript>

  switch(type)

  {

  case 'text':

  case 'passWord': //文本输入框和密码输入框的样式

  style.border="1px solid #000000";

  style.backgroundColor="#FFFFFF";

  style.height="18px";

  style.font="normal 12px 宋体";

  style.color="#000000";

  break;

  case 'submit':

  case 'reset':

  case 'button': //按钮类的样式(不包括图片按钮)

  style.border="1px solid #000000";

  style.backgroundColor="#CCCCCC";

  style.height="18px";

  style.font="normal 12px 宋体";

  style.color="#000000";

  break;

  default: ;

  //对于象单选框多选框等上面没有出现过的元素,我们使用默认样式。

  }

  </script>

  把上面这段代码保存成一个HTC文档,比如保存成input.htc。

  简单分析一下代码:事实上这仅仅是一段JS,通过判断type(Input是通过type属性判断是哪种表单域的,注意这里switch语句的使用)来决定使用什么样式。是不是很简单?

  HTC文档写好之后,接下来我们要用CSS的行为(behavior)来调用这个HTC文档,调用的CSS语句如下:

  input { behavior:url('input.htc') } /*这里假设input.htc和网页在同一目录下*/

  我们看到,现在我们是定义了整个Input标记的样式,而具体什么表单元素使用什么样式,则是通过JS在HTC文档中判断并定义的。

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!