DHTML实例解析:用HTC统一定制表单样式
作者:钟钟 来源:天极设计在线 发布时间:2007-11-04 18:48:00
标签:HTC,DHTML,css,样式
在制作表单的时候,我们往往用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的魅力呢?
0
投稿
猜你喜欢
- [Hack] 意为”劈”、”砍”。 [Hacker] 意为”黑客”CSS Hack 是指针对不同的浏览器写不同的CSS code的过程,简单
- 我们知道,全局临时表的生命周期一直持续到创建会话(不是创建级别)才终止。有时候,你可能想创建一个不属于任何会话的全局临时表。而无论你进行什么
- 以前看到 andy的关于“Quiet Structure”觉的很不错,于是今天到她的个人站点上逛逛,发现不少好的文章,今天介绍的是
- 因为比较简单,我就不说什么了。一看就明白的!1.sql防注入函数Function ChkStr(InString) &
- 前段时间我们部门的粉丝和布林同学都写过关于这个问题的文章。刚好阅读了关于这个问题的其他争论文章。所以顺便在这补充几点。首先说明这里讨论的是在
- 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
- 小的本身是一个平面设计人员,前一阵儿有一些空闲的时间,便在各个站长网上发布了贴子,大意是免费制作logo,以换取网站连接(相信很多人都看过)
- 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。几天
- This is a {t}. {name}是一个很强大的字符串模板解析方法。它接受三个参数,分别是{args.text},{args.obj
- 2009年 6月6日,空间4岁啦!与此同时Qzone月登录用户2亿,同时在线用户也突破了1000万。这是让人欢欣雀跃的数字,在空间同事眼里,
- 秦歌这篇文章总结得很不错,俺挑刺来啦:1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!impo
- 鼠标经过超链时的提示图层源码运行代码框<script>var oPopup = window.createPopup();fun
- 写入:1:把gif图像文件读入内存(一个变量strTemp)。2:写入数据库。Dim binTmp() As ByteDim conn As
- 启动mysql server 失败,查看/var/log/mysqld.err080329 16:01:29 [ERROR] Can'
- 本文介绍了四种asp导出excel数据的方法:1.使用OWC ,2.用Excel的Application组件,3.直接在IE中打开,4.导出
- AJAX应用因为它们的表现力的丰富、更加互动和更加迅速的响应得到了赞扬声;这些优点都是通过使用XMLHttpRequest对象来动态的载入数
- javascript作为一个动态语言,动态解析脚本的方法非常多,如万恶又万能的eval,低调的Function,IE独占的execScrip
- WEB标准化之前的互联网是TABLE布局的天下,但随着互联网的高速发展,TABLE布局已经不能满足千变万化的页面所来来的更新压力和服务器压力
- (下面的代码原来我想用折叠的代码的,但是在google里面老是添加不了折叠的代码,所以就整屏的贴出来了,望大家不要见外。) 朋友的比较好的存
- 请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库.一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据