DHTML实例解析:用HTC统一定制表单样式
来源:互联网 发布:实验数据记录表 编辑:程序博客网 时间:2024/04/29 20:32
在制作表单的时候,我们往往用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文件中判断并定义的。
这里,笔者做了一个例子供大家下载并学习使用:点此下载实例
怎么样,我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢?
- DHTML实例解析:用HTC统一定制表单样式
- DHTML实例解析:用HTC统一定制表单样式
- DHTML实例解析:用HTC统一定制表单样式
- DHTML实例解析:用HTC统一定制表单样式
- 用HTC统一定制表单样式
- javascript && DHTML &&HTC
- DHTML实例解析:模拟Windows选项卡
- CRUSH map 定制实例解析
- HTC实例
- DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例
- DHTML技术---------------注册表单
- 修改webkit默认样式及定制漂亮的表单
- 使用动态属性来自定制QT样式表单
- Yii2 定制表单输入字段的标签和样式
- Yii2 定制表单输入字段的标签和样式
- 从DHTML、HTC、XHTML到AJAX
- DHTML动态样式的作用
- DHTML技术:表单验证<form>
- 累!
- Flash 宝典
- 设计模式[2]-旧话重提之-各种工厂模式
- 代码的魔术——CSS滤镜之旅
- 网页常用特效整理
- DHTML实例解析:用HTC统一定制表单样式
- 机器人技术介绍(转载)
- 机器人视觉(Robot Vision)简介
- appfuse的安装
- 我的面试经验谈
- 职场:改变你一生的五句话
- 使用MySQL中文问题
- D语言中的调试、版本控制和静态断言
- 庆祝一下,考研成绩还可以。