HTML Component(HTC) 小应用

在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML（动态 HEML）的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”（Behaviors）。
下面是我做的一个小例子：
font_effect.htc


代码如下:

////////////////////////“行为”文档开始////////////////////////////  
//给“行为”增加四个鼠标事件  
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>  
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>  
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>  
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>  
//给“行为”定义二个方法，注意NAME的值里不能加括号 
<PUBLIC:METHOD NAME="move_down"/>  
<PUBLIC:METHOD NAME="move_right"/>  
<script language ="JScript">  
//定义一个保存字体颜色的变量  
var font_color;  
//定义向下移动文字的方法  
function move_down()  
{  
    element.style.posTop += 10;  
}  
//定义向右移动文字的方法  
function move_right()  
{  
    element.style.posLeft += 10;  
}  
//定义鼠标onmouseup事件的调用函数  
function font2blue() 
{  
    if (event.srcElement == element)  
    {  
        element.style.color = "blue";  
    }  
}  
//定义鼠标onmousedown事件的调用函数  
function font2yellow() 
{  
    if (event.srcElement == element)  
    {  
        element.style.color = "yellow";  
    }  
}  
//定义鼠标onmouseover事件的调用函数  
function glowit()  
{  
    if (event.srcElement == element)  
    {  
        font_color=style.color;  
        element.style.color = "white";  
        element.style.filter = "glow(color=red, strength=2)";  
    }  
}  
//定义鼠标onmouseout事件的调用函数  
function noglow()  
{  
    if (event.srcElement == element)  
    {  
        element.style.filter = "";  
        element.style.color = font_color;  
    }  
}  
</script>  
//////////////////“行为”文档结束///////////////////////////////

htcExample.htm


代码如下:

<html> 
<head> 
    <title>行为效果演示</title> 
    <style> 
      .myfilter{behavior:url(font_effect.htc);position:relative;width:880}  
    </style> 
</head> 
<body> 
    <button onclick="myspan.move_right();">向右移动文字</button>  
    <button onclick="myspan.move_down();">向下移动文字</button> 
    <br /><br /> 
    <span id="myspan" class='myfilter'>鼠标指向后产生辉光，同时文字变白；按下鼠标后文字变黄；抬起鼠标后文字变蓝；鼠标离开后文字恢复原状</span> 
</body> 
</html>

赞 (0)

相关推荐

  • HTML Component(HTC) 小应用

    在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的.这个问题一直困扰着DHTML(动态 HEML)的网页编程者.他们只能不断地重复书写HTML.CSS和javascript的代码,以满足多个页面上的重复或相似的功能.自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地.这个新的技术就是我们要谈到的DHTML

  • 微信小程序自定义导航教程（兼容各种手机）

    微信小程序自定义导航教程（兼容各种手机）

    前言 本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址 (本地下载),其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小米8等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的, 所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statu

  • Springboot使用@RefreshScope注解实现配置文件的动态加载

    Springboot使用@RefreshScope注解实现配置文件的动态加载

    目录 pom.xml properties 启动类 配置类 controller 打包 springcloud对应的springboot版本 参考: spring-boot-starter-actuator提供服务健康检查和暴露内置的url接口. spring-cloud-starter-config提供动态刷新的一些支持和注解. pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xml

  • SpringCloud的@RefreshScope 注解你了解吗

    SpringCloud的@RefreshScope 注解你了解吗

    目录 pom.xml properties 启动类 配置类 controller 打包 springcloud对应的springboot版本 参考: 总结 spring-boot-starter-actuator提供服务健康检查和暴露内置的url接口. spring-cloud-starter-config提供动态刷新的一些支持和注解. pom.xml <?xml version="1.0" encoding="UTF-8"?> <project

  • React组件封装中三大核心属性详细介绍

    目录 1.介绍 2.state 概念 演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件 什么是父子组件 父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局

  • 微信小程序使用component自定义toast弹窗效果

    前言 微信小程序自带的消息提示框有字数限制,而且图标仅仅只有"success","loading","none".当我们在实际开发过程中,面对UI给的设计图稿和微信小程序默认提供的消息提示框具有很大差别的时候,自然就不能再使用微信小程序的消息提示框,而应当使用component自定义消息提示框组件. 效果图 Step1:初始化组件 新建一个components文件夹,这个文件夹用来存放我们以后要开发的所有自定义组件. 然后在components文

  • 微信小程序template模板与component组件的区别和使用详解

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己的业务逻辑,可以看做一个独立的page页面.简单来说,如果只是展示,使用template就足够了,如果涉及到的业务逻辑交互比较多,那就最好使用component组件了. 一. template模板: 1. 模板创建: 建议单独创建template目录,在template目录中创建管理模板文件. 由于

  • 用htc实现进度条控件

    复制代码 代码如下: <PUBLIC:COMPONENT> <PUBLIC:METHOD   NAME ="Init" INTERNALNAME ="fnCreateProgressBar" /> <PUBLIC:METHOD   NAME ="showProgress" INTERNALNAME ="showProgress" /> <PUBLIC:PROPERTY NAME=&qu

  • 用htc实现CHECKBOX控件

    复制代码 代码如下: /* 描述:        CHECKBOX控件 版本:        1.1 备注:        CHECKBOX控件背后跟随的文字             是获取CHECKBOX对象的htc_myLabel来显示的             更新添加indeter属性,用来增加不确定的选择 */ <public:component> <public:attach event="oncontentready" onevent="fnI

  • HTC基础知识

    HTC是HTML Component的缩写,是IE5及后续版本浏览器所支持的客户端组件.据我个人理解,HTC就是一组以DHTML为基础封装了客户端行为的脚本,每HTC以*.htc的文件存储,一个HTC是一个客户端"类".  对象      document                                在给定的浏览器窗口中表现HTML文档.      element                          返回一份主文档中连接行为的标签的参考.      PU

随机推荐