• html component(htc)入门(转)


    http://docs.oracle.com/javame/dev-tools/lwuit-1.4/LWUIT_Developer_Guide_HTML/bbjidhgf.html  官方文档

     

    初识HTC

    HTC是HTML Component的缩写,是IE5及后续版本浏览器所支持的客户端组件。HTC就是一组以DHTML为基础封装了客户端行为的脚本,每HTC以*.htc的文件存储,一个HTC是一个客户端“类”。

    编写HTC最重要的一点是知道element对象的意思,它代表了当前的HTC,类似于C#类中的this。例如element.innerHTML可以访问当前HTC对象在document中所包含的html代码。既然HTC是“类”,它当然有属性、方法、事件,下面简要说明其定义方式:

    l         <PUBLIC:COMPONENT></PUBLIC:COMPONENT>:定义HTC,这个标签是其他定义的父元素。

    2         <PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” />: 定义HTC的属性,里面三个定义分别代表属性名、读取属性、设置属性时HTC所调用的方法。

    3         <PUBLIC:METHOD NAME=”mName” />:定义HTC的方法,NAME定义了方法名。

    4         <PUBLIC:EVENT NAME=”eName” ID=”eId” />:定义了HTC的事件,NAME定义了事件名,ID是个可选属性,在HTC中唯一标识这个事件。

    5         <PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />:定义了浏览器传给HTC事件的相应方法,其中EVENT是浏览器传入的事件,ONEVENT是处理事件的方法。

    常用的HTC定义就这么多,嘿嘿。

    我们经常看到某些网页上有这样的效果:用户点击一个按钮,文本显示,再次点击这个按钮,文本消失,但浏览器并不刷新。下面我就用HTC来实现这个简单效果。编程思路是这样的:用HTC模拟一个开关,它有”on”和”off”两种状态(可读/写属性status);用户可以设置这两种状态下开关所显示的文本(设置属性 turnOffText和turnOnText);用户点击开关时,开关状态被反置,并触发一个事件(onStatusChanged)通知用户,用户可以自己写代码来响应这个事件;该HTC还定义了一个方法(reverseStatus),用来反置开关的状态。下面是这个HTC的代码:

    <!—switch.htc定义 -->

    <PUBLIC:COMPONENT TAGNAME="Switch">

        <!--属性定义-->

        <PUBLIC:PROPERTY NAME="turnOnText" PUT="setTurnOnText" VALUE="Turn on" />

        <PUBLIC:PROPERTY NAME="turnOffText" PUT="setTurnOffText" VALUE="Turn off" />

        <PUBLIC:PROPERTY NAME="status" GET="getStatus" PUT="setStatus" VALUE="on" />

        <!--定义事件-->

        <PUBLIC:EVENT NAME="onStatusChanged" ID="changedEvent" />

        <!--定义方法-->

        <PUBLIC:METHOD NAME="reverseStatus" />

        <!--关联客户端事件-->

        <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="initialize()"/>

        <PUBLIC:ATTACH EVENT="onclick" ONEVENT="expandCollapse()"/>

    </PUBLIC:COMPONENT>

    <!-- htc脚本 -->

    <script language="javascript">

        var sTurnOnText;    //关闭状态所显示的文本

        var sTurnOffText;   //开启状态所显示的文本

        var sStatus;    //开关状态

        var innerHTML   //使用开关时包含在开关中的HTML

       

        //设置开关关闭状态所显示的文本

        function setTurnOnText(value)

        {

            sTurnOnText = value;

        }

     

        //设置开关开启状态所显示的文本

        function setTurnOffText(value)

        {

            sTurnOffText = value;

        }

       

        //设置开关状态

        function setStatus(value)

        {

            sStatus = value;

        }

     

         //读取开关状态

        function getStatus()

        {

            return sStatus;

        }

       

        //反向开关的状态

        function reverseStatus()

        {

        sStatus = (sStatus == "on") ? "off" : "on";

        }

        //获取htc控制界面html文本

        function getTitle()

        {

            var text = (sStatus == "on") ? sTurnOffText : sTurnOnText;

        text = "<div id='innerDiv'>" + text + "</div>";

        return text;

        }

     

        //htc初始化代码

        function initialize()

        {

        //back up innerHTML

        innerHTML = element.innerHTML;

        element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();

        }

     

        //响应用户鼠标事件的方法

        function expandCollapse()

        {

        reverseStatus();

        //触发事件

        var oEvent = createEventObject();

        changedEvent.fire(oEvent);

       

        var srcElem = element.document.parentWindow.event.srcElement;

        if(srcElem.id == "innerDiv")

        {

            element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();

        }

        }

    </script>

    下面是如何使用这个HTC,注释写的比较清楚了,不再多解释了!

     

    <!--learnhtc.html-->

    <html xmlns:frogone><!--定义一个新的命名空间-->

    <head>

        <!--告诉浏览器命名空间是由哪个HTC实现的-->

        <?IMPORT namespace="frogone" implementation="switch.htc">

    </head>

    <body>

       <!--设置开关的各个属性及内部包含的内容-->

       <frogone:Switch id="mySwitch"

                        TurnOffText="off"

                        TurnOnText="on"

                        status="off"

                        onStatusChanged="confirmChange()">

            <div id="dBody">文本内容...... </div>

        </frogone:Switch>

    </body>

    <script language="javascript">

        //相应开关事件

        function confirmChange()

        {

            if(!confirm("是否改变开关状态?"))

                mySwitch.reverseStatus();

        }

    </script>

    </html>

     

  • 相关阅读:
    listen and translation exercise 52
    中译英20
    listen and translation exercise 51
    中译英19
    listen and translation exercise 49
    PyQt(Python+Qt)学习随笔:QTableView的showGrid属性
    PyQt(Python+Qt)学习随笔:视图中类QAbstractItemView的dragDropOverwriteMode属性
    PyQt(Python+Qt)学习随笔:视图中的dragDropMode属性对dragEnabled和acceptDrops属性的影响
    PyQt(Python+Qt)学习随笔:QAbstractItemView的dragEnabled和dragDropMode属性的关系
    PyQt(Python+Qt)学习随笔:QAbstractItemView的verticalScrollMode和horizontalScrollMode属性
  • 原文地址:https://www.cnblogs.com/ethelhao/p/3783433.html
Copyright © 2020-2023  润新知