[align=center]htc学习心得[转][/align]
element:
使用当前htc控件的引用，利用它可以访问当前的使用对象；在htc代码中可以不使用element而直接访问其属性和方法。如：alert(tagName);//alert(element.tagName);其实element可以看作是一个通向Html文档对象的一个入口点，通过element.ownerDocument可以访问到Html文档对象，通过element.parentElement可以访问到该元素的父对象等。2. document:返回当前的文档对象，指的是当前的htc文档对象，并不是Html页面的文档对象，但是仍然可以通过它来创建新的控件，然后添加到原Html对象属的层次结构中。如：var divContainer = document.createElement(“Div”);ownerDocument.body.appendChild(divContainer);3. 获取使用htc的Html页面文档对象有两种方式可以用来获取使用该htc的Html页面文档对象：l var winDom = element.ownerDocument;l var winDom = window.document;4. 如何实现在多个htc中操作同一个变量你在其中的一个htc中定义的全局变量，在另一个的htc中是访问不到的，为了使两个htc操作同一个变量，我们可以在element上打主意，我们可以给element添加一个自定义的属性，然后可以在这两个htc中实现变量的共享。如：<table myCustomProperty=”one” style=”behavior:url…..”>…..</table>在htc中可以利用element.myCustomProperty进行操作，注意区分大小写。或者在任何一个的htc中使用下面的语句来实现：if(element.myShareVariable == null) element.myShareVariable = “new value”;这样就可在两个htc中共享了。5. 如何在一个元素上使用多个htc控件可以采用如下方式：Style="behavior: url(loveTable/tableTree.htc) url(loveTable/lovetable.htc);"在实际运行的时候，将会触发第一个htc控件的oncontentready事件处理程序，然后才是第二个的oncontentready事件处理程序。但是如果一个控件使用了多个样式，在每一个样式中都分别有引用htc，实际的运行效果是离控件较远的样式中的htc不会起作用，但是该样式中的其他的除了htc的样式设定都能工作，只有离控件最近的样式中的htc会正确运行。如：<style type="text/css"> input { border:none; width:100%; font-size:20; behavior: url(htc/editableTextbox.htc); } .smartInfo { behavior: url(htc/smartTextBox.htc);/**/ }</style><input class="money" />上面的代码中，第一个样式中的editableTextbox.htc不会起作用，但其他的样式设定像border,width等可以工作，只有离控件最近的样式即第二个样式中的smartTextbox.htc才会发挥作用。但如果我们屏蔽了smartInfo中的behavior，第一个样式表中的editableTextbox.htc就可以起作用了。解决这种问题的方法就是采用上面的方式，重新定义smartInfo如下： .smartInfo { behavior: url(htc/smartTextBox.htc) url(htc/editableTextbox.htc);/**/ }6. 如何在Htc中添加所附属元素的事件处理程序这里我们就要用到了Htc的另一个对象：<public attach event=”eventName” onevent=”eventHandler” />，其中的事件名称可以是元素的事件：onclick，onfocus，ondbclick等，也可以是htc自身所提供的事件：oncontentready，ondocumentready，ondetach，oncontentsave等。邦定事件处理程序；如：<public:attach event="oncontentready" onevent="init()" /><public:attach event="ondocumentready" onevent="docInit()" /><public:attach event="onclick" onevent="clickHandler()" /><public:attach event="onchange" onevent="changeHandler()" /><script language="javascript"> function init() { alert('element parse finished.'); } function docInit() { alert('document parse finished.'); } function clickHandler() { alert('this is a click handler in htc.'); } function changeHandler() { alert('this is a onchange handler in htc.'); }</script>可以在htc中捕获在element上发生的事件，从而对其进行对应的处理。但如果我们同时也在控件元素标签中设定了同样的事件处理程序，则会先触发这个事件，然后才是htc中该事件的处理程序。如：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>event handler</title></head><body> <input οnclick="alert('this is a click handler in html page.')" οnchange="alert('this is a onchange handler in html page')" style="behavior: url(eventHandler.htc)" /></body></html>在单击该控件时会先提示“INPUT”，然后才是该控件的值。7. 扩展的对象属性：扩展对象的属性我们有三种方式：l 第一种是通过在htc文件中通过下面的语句指定：<public:property name="customAttributeName" />;l 第二种是直接在页面控件元素上采用：<span myCustomAttrName=”myCustomAttValue”>this is a span</span>;l 第三种是在我们的js代码中直接在与苏对象上指定，然后可以进行读写访问：var spanObj = document.getElementById(“showSpan”);spanObj.content = “this is span content”;//content is a custom attribute which unexsits.alert(spanObj.content);对于这三种自定义的属性，只有第一种大小写不敏感，在使用时不需要考虑自定义属性的大小写问题，这也许是<public:property …./>所起的作用吧。第二种和第三种在js代码方式要注意大小写，大写和小写对应的是不同的自定义属性。8. 如何消除下载进度条页面的某一控件使用了包含有htc文件的样式表，如果创建了一个同样类型的新控件，为了使新创建的控件具有和上一个控件相同的属性，我们常会采用newControl.mergeAttributes(oldControl)方法来设定，但这时，如果浏览器的“internet文件夹---设置---检查所存网页的较新版本”设定为“每次访问此页时检查”，则会导致出现一个下载的进度条，如果快速的连续的添加新的控件，可能会导致由于htc没有及时的下载到客户端而出现运行时错误，但是对于样式表中指定了背景图片，则不会出现下载进度条，更不会出现错误。为了消除采用了htc样式表属性拷贝出现的下载进度条及其可能带来的错误，不要将浏览器的设置设定为“每次访问此页时检查”，就可以避免这个问题了。但这样同样会带来另一个问题，就是在做页面开发的调试时，可能不会很方便，因为每次运行的页面可能不是最新的页面，而是缓存里的数据。运行时的页面可能显示的并不是最新修改后的页面，如果不设置为“每次访问此页时检查”，你也许还以为是IDE或者IIS出现了什么问题呢。这也映证“鱼和熊掌不可兼得”这句名言吧。尝试代码如下：<style type="text/css"> .firstStyle { behavior: url(htc/editableTextbox.htc); /*background:url(htc/images/blue.gif);*/ }</style><input id="firstOne" class="firstStyle" /><input type="button" οnclick="copy()" value="copy" /><script language="javascript" type="text/javascript"> function copy() { var newTextbox = document.createElement("input"); var sourceTextbox = document.getElementById("firstOne"); newTextbox.mergeAttributes(sourceTextbox); document.body.appendChild(newTextbox); }</script>9. 如何对外公布Htc提供的方法利用Htc的<public:method…./>对象我们可以向使用该Htc的Html文档暴露内部的方法，供外部使用。因为在实际的开发中，我们会在Htc中设定了许多变量，这些变量只能通过Htc内部的方法才能进行访问，外部的Html文档对象无法进行访问和控制，如果提供了对外的方法，则可以实现在Html文档对象环境中访问和控制Htc内部的变量了。调用Htc的方法是通过Htc所附加的元素对象来直接调用，就像该元素对象实现了该方法一样。例如下面例子中的通过highlightTb.enableEditableHighlight()来直接调用。editableHighlight.htc:<public:component name="editableHighlight"><public:method name="enableEditableHighlight" /><public:attach event="oncontentready" onevent="init()" /><SCRIPT LANGUAGE="javascript" > var enableHighlight = true; function init() { attachEvent("onfocus",focusHandler); attachEvent("onblur",blurHandler); } function enableEditableHighlight() { enableHighlight = ! enableHighlight; return enableHighlight; } function focusHandler() { if(enableHighlight) style.backgroundColor = "lightyellow"; } function blurHandler() { if(enableHighlight) style.backgroundColor = ""; }</SCRIPT></public:component>caller.htm<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>exposed method</title> <style type="text/css"> .editableHighlight { behavior:url(editableHighlight.htc); } </style> <script language="javascript" type="text/javascript"> function changeHighlight() { var curBtn = event.srcElement; var highlight = highlightTb.enableEditableHighlight(); if(highlight) curBtn.value = "禁用编辑框高亮显示"; else curBtn.value = "启用编辑框高亮显示"; } </script></head><body> <input id="highlightTb" class="editableHighlight" /> <input type="button" value="禁用编辑框高亮显示" οnclick="changeHighlight()" /></body></html>10.如何实现Htc的Get、Set属性对于在htc中定义的变量，可以通过Htc所依附的对象直接进行操作。如在smartTextbox.htc中定义了codeValue值，我们可以在页面的Js代码中直接通过该Textbox对象直接操纵codeValue值。<input id=myMoney style=”behavior:url(moneyTextbox.htc)”>可以通过如下方式来更改codeValue：var money = document.getElementById(“myMoney”);money.codeValue=”2343”;.....
element:
使用当前htc控件的引用，利用它可以访问当前的使用对象；在htc代码中可以不使用element而直接访问其属性和方法。如：alert(tagName);//alert(element.tagName);其实element可以看作是一个通向Html文档对象的一个入口点，通过element.ownerDocument可以访问到Html文档对象，通过element.parentElement可以访问到该元素的父对象等。2. document:返回当前的文档对象，指的是当前的htc文档对象，并不是Html页面的文档对象，但是仍然可以通过它来创建新的控件，然后添加到原Html对象属的层次结构中。如：var divContainer = document.createElement(“Div”);ownerDocument.body.appendChild(divContainer);3. 获取使用htc的Html页面文档对象有两种方式可以用来获取使用该htc的Html页面文档对象：l var winDom = element.ownerDocument;l var winDom = window.document;4. 如何实现在多个htc中操作同一个变量你在其中的一个htc中定义的全局变量，在另一个的htc中是访问不到的，为了使两个htc操作同一个变量，我们可以在element上打主意，我们可以给element添加一个自定义的属性，然后可以在这两个htc中实现变量的共享。如：<table myCustomProperty=”one” style=”behavior:url…..”>…..</table>在htc中可以利用element.myCustomProperty进行操作，注意区分大小写。或者在任何一个的htc中使用下面的语句来实现：if(element.myShareVariable == null) element.myShareVariable = “new value”;这样就可在两个htc中共享了。5. 如何在一个元素上使用多个htc控件可以采用如下方式：Style="behavior: url(loveTable/tableTree.htc) url(loveTable/lovetable.htc);"在实际运行的时候，将会触发第一个htc控件的oncontentready事件处理程序，然后才是第二个的oncontentready事件处理程序。但是如果一个控件使用了多个样式，在每一个样式中都分别有引用htc，实际的运行效果是离控件较远的样式中的htc不会起作用，但是该样式中的其他的除了htc的样式设定都能工作，只有离控件最近的样式中的htc会正确运行。如：<style type="text/css"> input { border:none; width:100%; font-size:20; behavior: url(htc/editableTextbox.htc); } .smartInfo { behavior: url(htc/smartTextBox.htc);/**/ }</style><input class="money" />上面的代码中，第一个样式中的editableTextbox.htc不会起作用，但其他的样式设定像border,width等可以工作，只有离控件最近的样式即第二个样式中的smartTextbox.htc才会发挥作用。但如果我们屏蔽了smartInfo中的behavior，第一个样式表中的editableTextbox.htc就可以起作用了。解决这种问题的方法就是采用上面的方式，重新定义smartInfo如下： .smartInfo { behavior: url(htc/smartTextBox.htc) url(htc/editableTextbox.htc);/**/ }6. 如何在Htc中添加所附属元素的事件处理程序这里我们就要用到了Htc的另一个对象：<public attach event=”eventName” onevent=”eventHandler” />，其中的事件名称可以是元素的事件：onclick，onfocus，ondbclick等，也可以是htc自身所提供的事件：oncontentready，ondocumentready，ondetach，oncontentsave等。邦定事件处理程序；如：<public:attach event="oncontentready" onevent="init()" /><public:attach event="ondocumentready" onevent="docInit()" /><public:attach event="onclick" onevent="clickHandler()" /><public:attach event="onchange" onevent="changeHandler()" /><script language="javascript"> function init() { alert('element parse finished.'); } function docInit() { alert('document parse finished.'); } function clickHandler() { alert('this is a click handler in htc.'); } function changeHandler() { alert('this is a onchange handler in htc.'); }</script>可以在htc中捕获在element上发生的事件，从而对其进行对应的处理。但如果我们同时也在控件元素标签中设定了同样的事件处理程序，则会先触发这个事件，然后才是htc中该事件的处理程序。如：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>event handler</title></head><body> <input οnclick="alert('this is a click handler in html page.')" οnchange="alert('this is a onchange handler in html page')" style="behavior: url(eventHandler.htc)" /></body></html>在单击该控件时会先提示“INPUT”，然后才是该控件的值。7. 扩展的对象属性：扩展对象的属性我们有三种方式：l 第一种是通过在htc文件中通过下面的语句指定：<public:property name="customAttributeName" />;l 第二种是直接在页面控件元素上采用：<span myCustomAttrName=”myCustomAttValue”>this is a span</span>;l 第三种是在我们的js代码中直接在与苏对象上指定，然后可以进行读写访问：var spanObj = document.getElementById(“showSpan”);spanObj.content = “this is span content”;//content is a custom attribute which unexsits.alert(spanObj.content);对于这三种自定义的属性，只有第一种大小写不敏感，在使用时不需要考虑自定义属性的大小写问题，这也许是<public:property …./>所起的作用吧。第二种和第三种在js代码方式要注意大小写，大写和小写对应的是不同的自定义属性。8. 如何消除下载进度条页面的某一控件使用了包含有htc文件的样式表，如果创建了一个同样类型的新控件，为了使新创建的控件具有和上一个控件相同的属性，我们常会采用newControl.mergeAttributes(oldControl)方法来设定，但这时，如果浏览器的“internet文件夹---设置---检查所存网页的较新版本”设定为“每次访问此页时检查”，则会导致出现一个下载的进度条，如果快速的连续的添加新的控件，可能会导致由于htc没有及时的下载到客户端而出现运行时错误，但是对于样式表中指定了背景图片，则不会出现下载进度条，更不会出现错误。为了消除采用了htc样式表属性拷贝出现的下载进度条及其可能带来的错误，不要将浏览器的设置设定为“每次访问此页时检查”，就可以避免这个问题了。但这样同样会带来另一个问题，就是在做页面开发的调试时，可能不会很方便，因为每次运行的页面可能不是最新的页面，而是缓存里的数据。运行时的页面可能显示的并不是最新修改后的页面，如果不设置为“每次访问此页时检查”，你也许还以为是IDE或者IIS出现了什么问题呢。这也映证“鱼和熊掌不可兼得”这句名言吧。尝试代码如下：<style type="text/css"> .firstStyle { behavior: url(htc/editableTextbox.htc); /*background:url(htc/images/blue.gif);*/ }</style><input id="firstOne" class="firstStyle" /><input type="button" οnclick="copy()" value="copy" /><script language="javascript" type="text/javascript"> function copy() { var newTextbox = document.createElement("input"); var sourceTextbox = document.getElementById("firstOne"); newTextbox.mergeAttributes(sourceTextbox); document.body.appendChild(newTextbox); }</script>9. 如何对外公布Htc提供的方法利用Htc的<public:method…./>对象我们可以向使用该Htc的Html文档暴露内部的方法，供外部使用。因为在实际的开发中，我们会在Htc中设定了许多变量，这些变量只能通过Htc内部的方法才能进行访问，外部的Html文档对象无法进行访问和控制，如果提供了对外的方法，则可以实现在Html文档对象环境中访问和控制Htc内部的变量了。调用Htc的方法是通过Htc所附加的元素对象来直接调用，就像该元素对象实现了该方法一样。例如下面例子中的通过highlightTb.enableEditableHighlight()来直接调用。editableHighlight.htc:<public:component name="editableHighlight"><public:method name="enableEditableHighlight" /><public:attach event="oncontentready" onevent="init()" /><SCRIPT LANGUAGE="javascript" > var enableHighlight = true; function init() { attachEvent("onfocus",focusHandler); attachEvent("onblur",blurHandler); } function enableEditableHighlight() { enableHighlight = ! enableHighlight; return enableHighlight; } function focusHandler() { if(enableHighlight) style.backgroundColor = "lightyellow"; } function blurHandler() { if(enableHighlight) style.backgroundColor = ""; }</SCRIPT></public:component>caller.htm<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>exposed method</title> <style type="text/css"> .editableHighlight { behavior:url(editableHighlight.htc); } </style> <script language="javascript" type="text/javascript"> function changeHighlight() { var curBtn = event.srcElement; var highlight = highlightTb.enableEditableHighlight(); if(highlight) curBtn.value = "禁用编辑框高亮显示"; else curBtn.value = "启用编辑框高亮显示"; } </script></head><body> <input id="highlightTb" class="editableHighlight" /> <input type="button" value="禁用编辑框高亮显示" οnclick="changeHighlight()" /></body></html>10.如何实现Htc的Get、Set属性对于在htc中定义的变量，可以通过Htc所依附的对象直接进行操作。如在smartTextbox.htc中定义了codeValue值，我们可以在页面的Js代码中直接通过该Textbox对象直接操纵codeValue值。<input id=myMoney style=”behavior:url(moneyTextbox.htc)”>可以通过如下方式来更改codeValue：var money = document.getElementById(“myMoney”);money.codeValue=”2343”;.....
扫一扫
3834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
