cejs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="generator" content="JsDoc Toolkit" /> <title>JsDoc Reference - CeL.interact.DOM</title> <style type="text/css"> /* default.css */ body { font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; width: 800px; } .header { clear: both; background-color: #ccc; padding: 8px; } h1 { font-size: 150%; font-weight: bold; padding: 0; margin: 1em 0 0 .3em; } hr { border: none 0; border-top: 1px solid #7F8FB1; height: 1px; } pre.code { display: block; padding: 8px; border: 1px dashed #ccc; } #index { margin-top: 24px; float: left; width: 160px; position: absolute; left: 8px; background-color: #F3F3F3; padding: 8px; } #content { margin-left: 190px; width: 600px; } .classList { list-style-type: none; padding: 0; margin: 0 0 0 8px; font-family: arial, sans-serif; font-size: 1em; overflow: auto; } .classList li { padding: 0; margin: 0 0 8px 0; } .summaryTable { width: 100%; } h1.classTitle { font-size:170%; line-height:130%; } h2 { font-size: 110%; } caption, div.sectionTitle { background-color: #7F8FB1; color: #fff; font-size:130%; text-align: left; padding: 2px 6px 2px 6px; border: 1px #7F8FB1 solid; } div.sectionTitle { margin-bottom: 8px; } .summaryTable thead { display: none; } .summaryTable td { vertical-align: top; padding: 4px; border-bottom: 1px #7F8FB1 solid; border-right: 1px #7F8FB1 solid; } /*col#summaryAttributes {}*/ .summaryTable td.attributes { border-left: 1px #7F8FB1 solid; width: 140px; text-align: right; } td.attributes, .fixedFont { line-height: 15px; color: #002EBE; font-family: "Courier New",Courier,monospace; font-size: 13px; } .summaryTable td.nameDescription { text-align: left; font-size: 13px; line-height: 15px; } .summaryTable td.nameDescription, .description { line-height: 15px; padding: 4px; padding-left: 4px; } .summaryTable { margin-bottom: 8px; } ul.inheritsList { list-style: square; margin-left: 20px; padding-left: 0; } .detailList { margin-left: 20px; line-height: 15px; } .detailList dt { margin-left: 20px; } .detailList .heading { font-weight: bold; padding-bottom: 6px; margin-left: 0; } .light, td.attributes, .light a:link, .light a:visited { color: #777; font-style: italic; } .fineprint { text-align: right; font-size: 10px; } </style> </head> <body>   <div id="header"> </div>   <div id="index">  <div align="center"><a href="../index.html">Class Index</a> | <a href="../files.html">File Index</a></div> <hr /> <h2>Classes</h2> <ul class="classList"> <li><i><a href="../symbols/_global_.html">_global_</a></i></li> <li><a href="../symbols/CeL.html">CeL</a></li> <li><a href="../symbols/CeL.application.debug.html">CeL.application.debug</a></li> <li><a href="../symbols/CeL.application.debug.log.html">CeL.application.debug.log</a></li> <li><a href="../symbols/CeL.application.locale.html">CeL.application.locale</a></li> <li><a href="../symbols/CeL.application.net.html">CeL.application.net</a></li> <li><a href="../symbols/CeL.application.net.Ajax.html">CeL.application.net.Ajax</a></li> <li><a href="../symbols/CeL.application.OS.Windows.html">CeL.application.OS.Windows</a></li> <li><a href="../symbols/CeL.application.OS.Windows.file.html">CeL.application.OS.Windows.file</a></li> <li><a href="../symbols/CeL.application.OS.Windows.HTA.html">CeL.application.OS.Windows.HTA</a></li> <li><a href="../symbols/CeL.application.OS.Windows.job.html">CeL.application.OS.Windows.job</a></li> <li><a href="../symbols/CeL.application.OS.Windows.registry.html">CeL.application.OS.Windows.registry</a></li> <li><a href="../symbols/CeL.application.OS.Windows.WMI.html">CeL.application.OS.Windows.WMI</a></li> <li><a href="../symbols/CeL.application.storage.file.html">CeL.application.storage.file</a></li> <li><a href="../symbols/CeL.data.html">CeL.data</a></li> <li><a href="../symbols/CeL.data.check.html">CeL.data.check</a></li> <li><a href="../symbols/CeL.data.code.API.html">CeL.data.code.API</a></li> <li><a href="../symbols/CeL.data.code.compatibility.html">CeL.data.code.compatibility</a></li> <li><a href="../symbols/CeL.data.code.reorganize.html">CeL.data.code.reorganize</a></li> <li><a href="../symbols/CeL.data.CSV.html">CeL.data.CSV</a></li> <li><a href="../symbols/CeL.data.math.html">CeL.data.math</a></li> <li><a href="../symbols/CeL.data.math.Hamming.html">CeL.data.math.Hamming</a></li> <li><a href="../symbols/CeL.data.math.polynomial.html">CeL.data.math.polynomial</a></li> <li><a href="../symbols/CeL.data.math.quotient.html">CeL.data.math.quotient</a></li> <li><a href="../symbols/CeL.data.native.html">CeL.data.native</a></li> <li><a href="../symbols/CeL.data.XML.html">CeL.data.XML</a></li> <li><a href="../symbols/CeL.env.html">CeL.env</a></li> <li><a href="../symbols/CeL.interact.DOM.html">CeL.interact.DOM</a></li> <li><a href="../symbols/CeL.interact.form.address.html">CeL.interact.form.address</a></li> <li><a href="../symbols/CeL.interact.form.select_input.html">CeL.interact.form.select_input</a></li> <li><a href="../symbols/CeL.interact.integrate.map.html">CeL.interact.integrate.map</a></li> <li><a href="../symbols/CeL.interact.integrate.SVG.html">CeL.interact.integrate.SVG</a></li> </ul> <hr />  </div> <div id="content">  <h1 class="classTitle"> Class CeL.interact.DOM </h1>  <p class="description"> web 的 functions <br /><i>Defined in: </i> <a href="../symbols/src/D__USB_cgi-bin_lib_JS_interact_DOM.origin.js.html">DOM.origin.js</a>. </p>  <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class CeL.interact.DOM."> <caption>Class Summary</caption> <thead> <tr> <th scope="col">Constructor Attributes</th> <th scope="col">Constructor Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes"> </td> <td class="nameDescription" > <div class="fixedFont"> <b><a href="../symbols/CeL.interact.DOM.html#constructor">CeL.interact.DOM</a></b>() </div> <div class="description">null module constructor</div> </td> </tr> </tbody> </table>   <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class CeL.interact.DOM."> <caption>Method Summary</caption> <thead> <tr> <th scope="col">Method Attributes</th> <th scope="col">Method Name and Description</th> </tr> </thead> <tbody> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.add_listener">add_listener</a></b>(type, listener, target_element, p_first) </div> <div class="description">bind/add listener.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.add_node">add_node</a></b>(node, child_list) </div> <div class="description">append children node to specified element</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.deal_barcode">deal_barcode</a></b>(callback) </div> <div class="description">條碼器(Barcode Scanner)/雷射讀碼器的輸入可用 onkeypress 取得</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.get_element">get_element</a></b>(id, flag) </div> <div class="description">簡化 document.getElementById 並配合 loadReference()</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.get_node_offset">get_node_offset</a></b>(node) </div> <div class="description">get the actual position [left,top,width,height] of an HTML node object</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.get_query">get_query</a></b>(query_string, add_to) </div> <div class="description">Translate a query string to a native Object contains key/value pair set.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.get_selection">get_selection</a></b>(index) </div> <div class="description">獲取頁面上選中的選取區資訊。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.get_style">get_style</a></b>(element, name, not_computed) </div> <div class="description">get current computed style property of specified HTML element.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.HTML_to_Unicode">HTML_to_Unicode</a></b>(HTML, only_digital) </div> <div class="description">Translate HTML code to Unicode text</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.is_element_node">is_element_node</a></b>(value) </div> <div class="description">判斷為 HTML Element。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.is_HTML_element">is_HTML_element</a></b>(value) </div> <div class="description">判斷是否為 HTML Element。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.is_HTML_element_type">is_HTML_element_type</a></b>(value, type) </div> <div class="description">判斷為指定 nodeType 之 HTML Element。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.on_load">on_load</a></b>() </div> <div class="description">比較好點的 add onload。比起 add_listener()，本函數在已經 load 時依然會執行，而 add_listener 因為是用榜定的方法，因此 load 完就不再觸發(?)。這東西頂多只能擺在 include 的 JS file 中，不能 runtime include。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.parse_URI">parse_URI</a></b>(URI) </div> <div class="description">Parses URI</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.remove_node">remove_node</a></b>(o, tag) </div> <div class="description">移除 node.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.replace_HTML">replace_HTML</a></b>(o, html) </div> <div class="description">replace HTML</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.set_attribute">set_attribute</a></b>(_e, propertyO, ns) </div> <div class="description">set/get/remove attribute of a element<br/> in IE: setAttribute does not work when used with the style attribute (or with event handlers, for that matter).</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.set_class">set_class</a></b>(element, class_name, flag) </div> <div class="description">Sets / adds class of specified element.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.set_cookie">set_cookie</a></b>(name, value, config) </div> <div class="description">設定document.cookie.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.set_text">set_text</a></b>(element, text) </div> <div class="description">設定 HTML element 的 text。對付IE與Moz不同的text取得方法。現階段不應用innerText，應該用此函數來取得或設定內部text。 TODO: DOM: 用.nodeValue</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.stop_event">stop_event</a></b>(e, c) </div> <div class="description">阻止 JavaScript 事件冒泡傳遞，使 event 不傳到 parentNode。</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.table_list">table_list</a></b>(data, table, header, do_clean) </div> <div class="description">fill data to table.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.to_HTML">to_HTML</a></b>(text, mode) </div> <div class="description">Translate Unicode text to HTML</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.to_query_string">to_query_string</a></b>(query_Object) </div> <div class="description">Translate a native Object contains key/value pair set to a query string.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.toggle_display">toggle_display</a></b>(element, type) </div> <div class="description">toggle/swap display and visibility.</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.Unicode_to_HTML">Unicode_to_HTML</a></b>(text, flags, ignore_tags) </div> <div class="description">Translate Unicode text to HTML code</div> </td> </tr> <tr> <td class="attributes"><static>  </td> <td class="nameDescription"> <div class="fixedFont">CeL.interact.DOM.<b><a href="../symbols/CeL.interact.DOM.html#.XML_node">XML_node</a></b>(tag, propertyO, insertBeforeO, innerObj, styleO) </div> <div class="description">create new HTML/XML <a href="https://developer.mozilla.org/en/DOM/node">node</a>(<a href="https://developer.mozilla.org/en/DOM/element">element</a>)</div> </td> </tr> </tbody> </table>   <div class="details"><a name="constructor"> </a> <div class="sectionTitle"> Class Detail </div> <div class="fixedFont"> <b>CeL.interact.DOM</b>() </div> <div class="description"> null module constructor </div> </div>   <div class="sectionTitle"> Method Detail </div> <a name=".add_listener"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>add_listener</b>(type, listener, target_element, p_first) </div> <div class="description"> bind/add listener. register event control, setup code to run. listener 應該加上 try{}catch{}，否則會搞不清楚哪裡出問題。 ** 對同樣的 object，事件本身還是會依照 call add_listener() 的順序跑，不會因為 p_first 而改變。 ** NOT TESTED!! TODO: removeEventListener, remove_listener(), default 'this' 自訂 event </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{string}</span> <b>type</b> </dt> <dd>listen to what event type. event name/action</dd> <dt> <b>listener</b> </dt> <dd>listener function/function array/function string, 須 String 之 recursive function 時可 "(function(){return function f(){f();};})()" function(e){var target=e?e.target:(e=window.event).srcElement;if(e.stopPropagation)e.stopPropagation();else e.cancelBubble=true;if(e.preventDefault)e.preventDefault();else e.returnValue=false;return false;}</dd> <dt> <b>target_element</b> <i>Optional</i> </dt> <dd>bind/attach to what HTML element</dd> <dt> <b>p_first</b> <i>Optional</i> </dt> <dd>parentNode first</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/1/20 23:42:51</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>c.f., GEvent.add_listener()</dd> </dl> <hr /> <a name=".add_node"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>add_node</b>(node, child_list) </div> <div class="description"> append children node to specified element </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>node</b> </dt> <dd>node / node id</dd> <dt> <b>child_list</b> </dt> <dd>children node array</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2007/1/20 14:12</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name=".deal_barcode"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>deal_barcode</b>(callback) </div> <div class="description"> 條碼器(Barcode Scanner)/雷射讀碼器的輸入可用 onkeypress 取得 </div> <pre class="code">// usage: deal_barcode(function(t) { if (t.length > 9 && t.length < 17) document.getElementById("p").value = t, document.forms[0].submit(); });</pre> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>callback</b> </dt> <dd>callback</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2008/8/26 23:10</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name=".get_element"> </a> <div class="fixedFont"><static> <span class="light">{HTML Object}</span> <span class="light">CeL.interact.DOM.</span><b>get_element</b>(id, flag) </div> <div class="description"> 簡化 document.getElementById 並配合 loadReference() </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>id</b> </dt> <dd>所欲找尋之 element id</dd> <dt> <b>flag</b> </dt> <dd>{HTML Object} object: 參考此 document object {Number} flag: 參見 code</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2004/6/25 19:33</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{HTML Object}</span> Object</dd> </dl> <dl class="detailList"> <dt class="heading">Requires:</dt> <dd>referenceDoc,loadReferenceDone,`get_element();`</dd> </dl> <hr /> <a name=".get_node_offset"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>get_node_offset</b>(node) </div> <div class="description"> get the actual position [left,top,width,height] of an HTML node object </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>node</b> </dt> <dd>HTML node object</dd> </dl> <dl class="detailList"> <dt class="heading">Deprecated:</dt> <dt> use get_style(), jQuery.offset(), jQuery.position() </dt> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug, http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K983.aspx, http://msdn.microsoft.com/library/en-us/dndude/html/dude04032000.asp, http://www.mail-archive.com/mochikit@googlegroups.com/msg00584.html, http://hartshorne.ca/2006/01/20/javascript_positioning/, http://www.jb51.net/article/18340.htm, http://blog.csdn.net/wangjj_016/archive/2010/04/09/5467507.aspx</dd> </dl> <hr /> <a name=".get_query"> </a> <div class="fixedFont"><static> <span class="light">{Object}</span> <span class="light">CeL.interact.DOM.</span><b>get_query</b>(query_string, add_to) </div> <div class="description"> Translate a query string to a native Object contains key/value pair set. </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>query_string</b> </dt> <dd>query string. default: location.search</dd> <dt> <span class="light fixedFont">{Object}</span> <b>add_to</b> </dt> <dd>append to this object</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/6/16 15:18:50</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>key/value pairs</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd></dd> </dl> <hr /> <a name=".get_selection"> </a> <div class="fixedFont"><static> <span class="light">{Object, undefined}</span> <span class="light">CeL.interact.DOM.</span><b>get_selection</b>(index) </div> <div class="description"> 獲取頁面上選中的選取區資訊。 </div> <pre class="code">CeL.add_listener('mouseup', function (e) { var s = CeL.get_selection(); if (s && s.text) CeL.debug('select @' + this + '(' + s.element + ')' + ' (' + s.left + '+' + s.width + ',' + s.top + '+' + s.height + '), (' + e.pageX + ',' + e.pageY + '): ' + s.text); }, target_element);</pre> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Number}</span> <b>index</b> <i>Optional</i> </dt> <dd>TODO: 第幾選取區, default: all or 0 if there's only ONE/ZERO selection</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{Object}</span> { left: {Number} in px, top: {Number} in px, width: {Number} in px, height: {Number} in px, text: {String} 文字, element: {HTMLElement}, selection: selection object (browser dependent) }</dd> <dd><span class="light fixedFont">{undefined}</span> error.</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://plugins.jquery.com/project/selectedText, Gecko: https://developer.mozilla.org/en/DOM/Selection</dd> </dl> <hr /> <a name=".get_style"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>get_style</b>(element, name, not_computed) </div> <div class="description"> get current computed style property of specified HTML element. TODO: 整合 get_node_offset, _.set_style </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>element</b> </dt> <dd>HTML element</dd> <dt> <b>name</b> </dt> <dd>W3C style property name (e.g., no '-webkit-background-clip')</dd> <dt> <b>not_computed</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/4/2 00:14:09 rewrite</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug, http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K983.aspx, curCSS @ jQuery, http://api.jquery.com/category/css/, <a href="http://www.quirksmode.org/dom/getstyles.html" accessdate="2010/4/1 15:44">JavaScript - Get Styles</a>, <a href="http://www.javaeye.com/topic/140784?page=2" accessdate="2010/4/1 15:41">style.display取值不对，难道是浏览器bug？讨论第2页: - JavaScript - web - JavaEye论坛</a> 大體上，currentStyle 相當於 getComputedStyle，而 runtimeStyle 相當於 getOverrideStyle。但是它們還是有很重要的區別。那就是，IE的CSS計算步驟其實是不合標準的。 document.defaultView在mozilla中是指向window obj的,但是很有可能在其他broswer中就不指向window obj...因為w3c中沒有強行規定document.defaultView一定是一個global obj. 返回頁內樣式表定義的類，那麼可以使用DOM樣式表對象來訪問： var oCssRulers = document.styleSheets[0].cssRulers || document.styleSheets[0].rulers; (前者是DOM方法，後者是IE私有方法) alert(oCssRulers[0].style.display);</dd> </dl> <hr /> <a name=".HTML_to_Unicode"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>HTML_to_Unicode</b>(HTML, only_digital) </div> <div class="description"> Translate HTML code to Unicode text </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>HTML</b> </dt> <dd>HTML code</dd> <dt> <span class="light fixedFont">{Boolean}</span> <b>only_digital</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name=".is_element_node"> </a> <div class="fixedFont"><static> <span class="light">{Boolean}</span> <span class="light">CeL.interact.DOM.</span><b>is_element_node</b>(value) </div> <div class="description"> 判斷為 HTML Element。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>value</b> </dt> <dd>value to test</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/6/23 02:32:41</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{Boolean}</span> value is HTML Element</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037, http://www.w3.org/DOM/</dd> </dl> <hr /> <a name=".is_HTML_element"> </a> <div class="fixedFont"><static> <span class="light">{Boolean}</span> <span class="light">CeL.interact.DOM.</span><b>is_HTML_element</b>(value) </div> <div class="description"> 判斷是否為 HTML Element。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>value</b> </dt> <dd>value to test</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/6/23 02:32:41</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{Boolean}</span> value is HTML Element</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037, http://www.w3.org/DOM/</dd> </dl> <hr /> <a name=".is_HTML_element_type"> </a> <div class="fixedFont"><static> <span class="light">{Boolean}</span> <span class="light">CeL.interact.DOM.</span><b>is_HTML_element_type</b>(value, type) </div> <div class="description"> 判斷為指定 nodeType 之 HTML Element。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>value</b> </dt> <dd>value to test</dd> <dt> <b>type</b> </dt> <dd>type</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/6/23 02:32:41</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{Boolean}</span> value is the type of HTML Element</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037, http://www.w3.org/DOM/</dd> </dl> <hr /> <a name=".on_load"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>on_load</b>() </div> <div class="description"> 比較好點的 add onload。比起 add_listener()，本函數在已經 load 時依然會執行，而 add_listener 因為是用榜定的方法，因此 load 完就不再觸發(?)。這東西頂多只能擺在 include 的 JS file 中，不能 runtime include。 </div> <pre class="code">CeL.use('net.web'); CeL.on_load(function(){sl(1);},'sl(2);');</pre> <dl class="detailList"> <dt class="heading">Requires:</dt> <dd>_.add_listener,_.DOM_loaded</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>jQuery: $(document).ready(listener); DOMContentLoaded http://webdesign.piipo.com/jquery/jquery_events 可直接參考 SWFObject。 TODO: <a href="http://javascript.nwbox.com/IEContentLoaded/" accessdate="2010/6/3 11:15" title="IEContentLoaded - An alternative for DOMContentLoaded on Internet Explorer">IEContentLoaded</a> DOMContentLoaded是firefox下特有的Event, 當所有DOM解析完以後會觸發這個事件。 DOMContentLoaded與DOM中的onLoad事件與其相近。但onload要等到所有頁面元素加載完成才會觸發, 包括頁面上的圖片等等。 <a href="http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/06/05/jquery-ready-vs-load.aspx" accessdate="2010/6/3 11:17">jQuery ready vs load - 黑暗執行緒</a> $(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，而$(window).load(fn)則會等到"網頁HTML 標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。</dd> </dl> <hr /> <a name=".parse_URI"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>parse_URI</b>(URI) </div> <div class="description"> Parses URI </div> <pre class="code">alert(parse_URI('ftp://user:cgh@dr.fxgv.sfdg:4231/3452/dgh.rar?fg=23#hhh').hostname);</pre> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>URI</b> </dt> <dd>URI to parse</dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/4/13 23:53:14 from parseURI+parseURL</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd>parsed object</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>RFC 1738, RFC 2396, RFC 3986, Uniform Resource Identifier (URI): Generic Syntax, http://tools.ietf.org/html/rfc3987, http://flanders.co.nz/2009/11/08/a-good-url-regular-expression-repost/, http://www.mattfarina.com/2009/01/08/rfc-3986-url-validation, also see batURL.htm</dd> </dl> <hr /> <a name=".remove_node"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>remove_node</b>(o, tag) </div> <div class="description"> 移除 node. TODO: also remove event handlers </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>o</b> </dt> <dd></dd> <dt> <b>tag</b> </dt> <dd>tag===1: only child, undefined: remove only self, others: only <tag> child</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name=".replace_HTML"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>replace_HTML</b>(o, html) </div> <div class="description"> replace HTML </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>o</b> </dt> <dd></dd> <dt> <b>html</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <hr /> <a name=".set_attribute"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>set_attribute</b>(_e, propertyO, ns) </div> <div class="description"> set/get/remove attribute of a element<br/> in IE: setAttribute does not work when used with the style attribute (or with event handlers, for that matter). </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>_e</b> </dt> <dd>element</dd> <dt> <b>propertyO</b> </dt> <dd>attributes object (array if you just want to get)</dd> <dt> <b>ns</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2006/12/10 21:25 分離 separate from XML_node()</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Requires:</dt> <dd>split_String_to_Object</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>setAttribute,getAttribute,removeAttribute http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html</dd> </dl> <hr /> <a name=".set_class"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>set_class</b>(element, class_name, flag) </div> <div class="description"> Sets / adds class of specified element.<br/> TODO:<br/> 1. 一次處理多個 className。<br/> 2. 以字串處理可能較快。<br/> 3. 用 +/- 設定。<br/> 4. https://developer.mozilla.org/en/DOM/element.classList </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>element</b> </dt> <dd>HTML elements</dd> <dt> <b>class_name</b> </dt> <dd>class name || {class name 1:, class name 2:, ..}</dd> <dt> <b>flag</b> </dt> <dd>default: just add the specified className (flag&1)==1: reset className (else just add) (flag&2)==1: return {className1:, className2:, ..} (flag&4)==1: remove className</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176" accessdate="2009/12/14 22:26">className of type DOMString</a>, <a href="https://developer.mozilla.org/En/DOM/Element.className" accessdate="2009/12/14 22:27">element.className - MDC</a></dd> </dl> <hr /> <a name=".set_cookie"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>set_cookie</b>(name, value, config) </div> <div class="description"> 設定document.cookie. You can store up to 20 name=value pairs in a cookie, and the cookie is always returned as a string of all the cookies that apply to the page. TODO: HTML5 localStorage (name/value item pairs). test various values. document.cookie.setPath("/"); </div> <pre class="code"> 範例： // delete domain set_cookie('domain',0); // 一個月(30 days) set_cookie('expires',30); // 設定name之值為jj set_cookie(name,'jj'); // 設定name之值為56 set_cookie(name,56); // 除去name set_cookie(name); // 設給本host全部使用 set_cookie(_.set_cookie.f.set_root); // 設給本domain使用 set_cookie(_.set_cookie.f.set_domain); // 依現有設定除去所有值 set_cookie(_.set_cookie.f.delete_all); // 除去所有值 set_cookie(_.set_cookie.f.delete_all_root); // 永久儲存（千年） set_cookie(_.set_cookie.f.forever); // 準確設定這之後只在這次瀏覽使用這些cookie，也可用set_cookie('expires',-1); set_cookie(_.set_cookie.f.moment); // 將expires設定成forever或moment後再改回來（不加expires設定） set_cookie('expires',0);</pre> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String|Object|_module_.set_cookie.f}</span> <b>name</b> </dt> <dd>set_cookie.f flag | varoius name</dd> <dt> <b>value</b> </dt> <dd>varoius value</dd> <dt> <span class="light fixedFont">{Boolean|Object}</span> <b>config</b> </dt> <dd>若對於特殊設定僅暫時設定時，設定此項。</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>Chrome doesn't support cookies for local files unless you start it with the --enable-file-cookies flag. chrome.exe --allow-file-access-from-files --enable-extension-timeline-api --enable-file-cookies http://stackoverflow.com/questions/335244/why-does-chrome-ignore-local-jquery-cookies http://code.google.com/p/chromium/issues/detail?id=535</dd> </dl> <hr /> <a name=".set_text"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>set_text</b>(element, text) </div> <div class="description"> 設定 HTML element 的 text。對付IE與Moz不同的text取得方法。現階段不應用innerText，應該用此函數來取得或設定內部text。 TODO: DOM: 用.nodeValue </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>element</b> </dt> <dd>HTML element</dd> <dt> <span class="light fixedFont">{String}</span> <b>text</b> </dt> <dd>the text to be set</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.klstudio.com/post/94.html</dd> </dl> <hr /> <a name=".stop_event"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>stop_event</b>(e, c) </div> <div class="description"> 阻止 JavaScript 事件冒泡傳遞，使 event 不傳到 parentNode。 </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <b>e</b> </dt> <dd>event handle</dd> <dt> <b>c</b> </dt> <dd>cancel bubble</dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.jb51.net/html/200705/23/9858.htm</dd> </dl> <hr /> <a name=".table_list"> </a> <div class="fixedFont"><static> <span class="light">CeL.interact.DOM.</span><b>table_list</b>(data, table, header, do_clean) </div> <div class="description"> fill data to table. 增加 table 的列(row) </div> <pre class="code">table_list([list1],[list2],..) e.g., table_list([1,2,3,4],[4,5,3,4]); table_list([[list1],[list2],..]) e.g., table_list( [ [1,2,3,4],[4,5,3,4] ] );</pre> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Array|Object}</span> <b>data</b> </dt> <dd>data list</dd> <dt> <b>table</b> </dt> <dd>table element</dd> <dt> <span class="light fixedFont">{Array}</span> <b>header</b> </dt> <dd>header list</dd> <dt> <b>do_clean</b> </dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">Since:</dt> <dd>2010/05/03 14:13:18</dd> </dl> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd></dd> </dl> <dl class="detailList"> <dt class="heading">See:</dt> <dd>http://www.datatables.net/</dd> </dl> <hr /> <a name=".to_HTML"> </a> <div class="fixedFont"><static> <span class="light">{String}</span> <span class="light">CeL.interact.DOM.</span><b>to_HTML</b>(text, mode) </div> <div class="description"> Translate Unicode text to HTML </div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{String}</span> <b>text</b> </dt> <dd>Unicode text</dd> <dt> <b>mode</b> </dt> <dd>mode='x':&#xhhh;</dd> </dl> <dl class="detailList"> <dt class="heading">Returns:</dt> <dd><span class="light fixedFont">{String}</span> HTML</dd> </dl> <hr /> <a name=".to_query_string"> </a> <div class="fixedFont"><static> <span class="light">{String}</span> <span class="light">CeL.interact.DOM.</span><b>to_query_string</b>(query_Object) </div> <div class="description