`
shaohan126448
  • 浏览: 116272 次
  • 来自: 北京
社区版块
存档分类
最新评论

使用htc对CSS样式进行封装

 
阅读更多

昨天一直在想 css只能对静态的属性进行封装 但是有些事件直接写道标签里还是太复杂了 只能<img onmouseover="....">这种方式还是比较落后的 如果能够很好的把这些事件进行封装了 那就更加完整了

遇到冰云 提示用htc 找了一下相关资料 很好用 首先表示感谢

首先建立test.htc
---------------------------------------------------------------------------------------------------------------------------
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">
var normalColor, normalSpacing;

function Hilite()
{
// save original values
normalColor = runtimeStyle.color;
normalSpacing= runtimeStyle.letterSpacing;

runtimeStyle.color = "red";
runtimeStyle.letterSpacing = 2;
}

function Restore()
{
// restore original values
runtimeStyle.color = normalColor;
runtimeStyle.letterSpacing = normalSpacing;
}
</SCRIPT>
</PUBLIC:COMPONENT>

这个文件把事件和函数进行绑定 然后再函数里面给出具体的处理方法

================================================================

然后是test.css,作为样式表,他把LI标签(可以使其他的标签或者样式名称)进行绑定
-------------------------------------------------------------------------------------------------------------------
/* CSS Document */
LI {behavior:url(test.htc)}

====================================================================

最后是调用css的htm文件,它引入了样式表文件test.css
------------------------------------------------------------------------------------------------------------------
<HEAD>
<link href="./test.css" rel="stylesheet" type="text/css"></link>
</HEAD>
<P>Mouse over the two list items below to see this effect.
<a href="http://blog.csdn.net/overmind/">overmind</a>
<UL>
<LI>HTML Authoring</LI>
<LI>Dynamic HTML</LI>
</UL>

可以对img进行样式的封装了,不只是静态的样式,而且是包括事件和方法的样式---------帅

分享到:
评论

相关推荐

    一款非常好看下拉框样式(select)

    由于IE特有的HTC行为,这些CSS样式和JavaScript代码被封装在`selectBox.htc` 文件中,通过CSS的`behavior`属性应用到`&lt;select&gt;`元素上。 此外,`index.htm`可能是项目的主页面,展示了这个美化后的下拉框样式;`...

    CSS+HTC日历选择控件

    标题“CSS+HTC日历选择控件”所指的是一种使用CSS样式和HTC(HTML Component)技术实现的交互式日历选择工具。这种控件主要用于网页设计,为用户提供一个方便的方式来选择日期,尤其适用于需要用户输入特定日期的...

    使用HTC技术调用jQuery datequicker

    - 使用HTC,你可以将DateQuicker的JavaScript逻辑封装到一个组件中,然后在HTML标记中声明这个组件,使得页面加载时自动应用日期选择器。 4. **实现步骤**: - 首先,确保引入jQuery库和DateQuicker的JavaScript...

    JS+HTC语法加亮支持多语言

    文件名为"star-light"可能是指一个具体的语法高亮样式库或主题,这种库通常包含一系列预定义的CSS样式,用于给不同类型的代码元素赋予不同的颜色和样式。在JS+HTC的实现中,"star-light"可能被引用为一个CSS资源,...

    ASP.NET模仿HTC做的时间显示和天气预报

    此外,为了实现这些功能,开发者可能还使用了HTML和CSS来构建页面布局和样式。HTML用于定义网页结构,而CSS则用于控制页面的外观和布局。考虑到"表"这一标签,可能有表格元素用于展示天气数据,如每天的最高温度、...

    HTML Component(HTC)简介.docx

    开发者可以通过CSS样式表、HTML和JavaScript来创建和使用行为。使用HTC文件(扩展名为.htc)作为行为组件的容器,开发者可以定义事件响应和方法,进一步定制元素的行为。 创建HTC组件的基本步骤如下: 1. **定义...

    HTML Component(HTC)简介.pdf

    这些行为允许开发者将JavaScript函数和CSS样式封装成可重用的组件,以增强HTML元素的功能,而无需在每个页面上重复编写相同的代码。 DHTML行为的概念是为了解决网页编程中的一个关键问题,即代码的复用性。在IE 5.0...

    web下的listview控件

    第三步,htc在开发web控件时,非常灵活和功能强大,可以采用客户端脚本如js,可以对控件进行封装,使之有自己的属性、方法和事件等。利用htc封装的listview控件中对外有两个属性CfgXMLSrc(配置文件,设置listview的...

    js mootools仿htc手机时钟表翻页时钟效果

    本项目是关于使用 JavaScript 和 Mootools 框架实现一个类似于 HTC 手机上的翻页时钟效果。这个效果以数字翻转的形式展示时间,既具有科技感,又富有视觉吸引力。 首先,我们要理解 JavaScript 是一种轻量级的编程...

    radio组件

    3. **React等库的使用**:在React等现代前端框架中,Radio组件通常被封装成自定义组件,如`&lt;RadioButton&gt;`或`&lt;RadioGroup&gt;`,它们提供了更高级别的抽象,简化了状态管理和事件处理。 4. **Android RadioGroup**:在...

    EAS控件培训

    色彩方案的定制通过CSS类实现,如`class="WebTagNameClass"`,并在外部样式表中定义对应属性,如`WebTagNameClass { foreColor: #ffffff; }`。更换皮肤仅需替换相应样式文件,实现外观的快速变换。 #### 使用注意...

    《浩海网络多格式播放器》V3.9.4.1

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    《OceanX》播放器 Prv0.3

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    《OceanX》播放器 Prv0.33

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    《浩海网络多格式播放器》V3.9.4.4

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    《浩海网络多格式播放器》V3.9.4.5

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    《OceanX》播放器 Prv0.34

    7,最新加入CSS.JS的设置文件,来方便设定播放器的一些样式表现上的系统设置,例如新的按钮切换采用的技术,如果要制作皮肤就需要改动这的数值!8,修正了更换网站页面功能的一个严重BUG!V3.94:1,解决了浏览器插件...

    java开源包8

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

    java开源包1

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

    java开源包11

    JCaptcha4Struts2 是一个 Struts2的插件,用来增加验证码的支持,使用时只需要用一个 JSP 标签 (&lt;jcaptcha:image label="Type the text "/&gt; ) 即可,直接在 struts.xml 中进行配置,使用强大的 JCaptcha来生成验证码...

Global site tag (gtag.js) - Google Analytics