HTML Componentメモ

methodの追加

hoge.htc

<public:component>
    <public:method name="doFoo"  />
    <script type="text/javascript">
        function doFoo(){
             alert("FooFooFoo");
        };
    </script>
</public:component>

JavaScript

var hoge = document.getElementById('hoge');
hoge.doFoo(); // FooFooFoo

補足

name属性はJavaScriptの関数名と同じにしてあげる必要があります。

setter/getterの追加

hoge.htc

<public:component>
    <public:property name="foo" get="getFoo" put="setFoo" />
    <script type="text/javascript">
        var value;
        function getFoo(){
            return value + value;
        }
        function setFoo(){
            value = arguments[0];
        }
    </script>
</public:component>

JavaScript

var hoge = document.getElementById('hoge');
hoge.foo = "Hello";
alert(hoge.foo); // HelloHello

eventの定義

hoge.htc

<public:component>
    <public:attach event="onclick" onevent="onClickHandler();"  />
    <script type="text/javascript">
        function onClickHandler(){
            alert("クリックされたよ");
        }
    </script>
</public:component>

補足

    <public:attach event="onclick" handler="onClickHandler"  />

でも可。

前提

<style type="text/css">
#hoge{ behavior:url(hoge.htc); }
</style>

は記載されているという前提です。