Make Www.Edu-cn.Com Your Home Page!
用户名: 密码: 验证码: 注册
  当前位置: > 中国教程网>网站建设>Dreamweaver> DHTML实例解析:用HTC统一定制表单样式

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

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

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

  实例如下: 中国论文网

  htc代码:

www.edu4u.com.cn

<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文件写好之后,接下来我们要用的行为(behavior)来调用这个HTC文件,调用的语句如下: edu4u.com.cn

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

中国教育网

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

中国教程网

   怎么样,我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢?
中国教程网

中国论文网

AOE3 STUDIO

edu4u.com.cn

中国教程网



文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   最新文章:
·Dreamweaver制作网页幻灯片效果(04-02)
·Dreamwaver 常见问答解答(04-02)
·Dreamweaver快捷键大全(04-02)
·简单实用的网页表格特效(04-02)
·CourseBuilder For Dreamweaver 3 (1(04-02)
·网页瘦身小技巧---“分割大法”(04-02)
·CourseBuilder For Dreamweaver 3 (3(04-02)
·Dreamweaver技巧50问(04-02)
·Dreamweaver技巧十二招(04-02)
·为你的网页添加背景音乐(04-02)
   相关文章:
·用代码“写”出扫描线效果图片 ·网页瘦身小技巧---“分割大法”
·网页色彩搭配内涵 ·简单实用的网页表格特效
·网页菜单详解(3):样式修饰 ·为你的网页添加背景音乐
·网站更新短平快 ·十“问”DreamWeaver
·快速图片链接批处理 ·为你的站点定做颜色

   文章评论:(0条)
  
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。

 §最新评论:

  责任编辑:中国教程网  

© 2007 Copyright 中国教育网
DesignBy:AOE3 STUDIO & ROCOCO