main.html
<HTML xmlns:MS>
<?IMPORT namespace = MS implementation = "button.htc" >
<?IMPORT namespace = MS implementation = "input.htc" >
<PUBLIC:COMPONENT tagName=MYPAGE >
<public:defaults viewLinkContent />
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
}
function clicked() {
MyInput.value = "Clicked";
}
</script>
<BODY style="background:cyan">
<h2>View Linked Element Behaviors</h2>
<MS:BUTTON id=MyButton click="clicked()" text="Click Me"/>
<br>
<MS:INPUT id=MyInput />
</BODY>
==================================
input.htc
<PUBLIC:COMPONENT tagName=INPUT >
<public:defaults viewLinkContent />
<public:property name="value" put="setValue" get="getValue"/>
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
}
function setValue(v) {
TheInput.value = v;
}
function getValue() {
return text;
}
</script>
<BODY style="width:100%; height:100%">
<input type=text id=TheInput>
</BODY>
================================================
button.htc
<PUBLIC:COMPONENT tagName=BUTTON >
<public:defaults viewLinkContent />
<public:property name="text" put="setText" get="getText"/>
<public:event id=MyClick name="click" />
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
TheButton.attachEvent("onclick", doOnclick);
}
function doOnclick() {
MyClick.fire();
}
function setText(v) {
TheButton.innerHTML = v;
}
function getText() {
return text;
}
</script>
<BODY style="width:100%; height:100%">
<button id=TheButton></button>
</BODY>

Tidak ada komentar:
Posting Komentar