| 1 | <?xml version="1.0" encoding="utf-8" ?> |
| 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 3 | |
| 4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| 5 | <head> |
| 6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 7 | <meta name="generator" content="Docutils 0.4: http://docutils.sourceforge.net/" /> |
| 8 | <title>MochiKit.DOM - painless DOM manipulation API</title> |
| 9 | |
| 10 | <link rel="stylesheet" href="../../../include/css/documentation.css" type="text/css" /> |
| 11 | <script type="text/javascript" src="../../../packed/MochiKit/MochiKit.js"></script> |
| 12 | <script type="text/javascript" src="../../js/toc.js"></script> |
| 13 | </head> |
| 14 | <body> |
| 15 | <div class="document"> |
| 16 | <div class="section"> |
| 17 | <h1><a id="name" name="name">Name</a></h1> |
| 18 | <p>MochiKit.DOM - painless DOM manipulation API</p> |
| 19 | </div> |
| 20 | <div class="section"> |
| 21 | <h1><a id="synopsis" name="synopsis">Synopsis</a></h1> |
| 22 | <pre class="literal-block"> |
| 23 | var rows = [ |
| 24 | ["dataA1", "dataA2", "dataA3"], |
| 25 | ["dataB1", "dataB2", "dataB3"] |
| 26 | ]; |
| 27 | row_display = function (row) { |
| 28 | return TR(null, map(partial(TD, null), row)); |
| 29 | } |
| 30 | var newTable = TABLE({'class': 'prettytable'}, |
| 31 | THEAD(null, |
| 32 | row_display(["head1", "head2", "head3"])), |
| 33 | TFOOT(null, |
| 34 | row_display(["foot1", "foot2", "foot3"])), |
| 35 | TBODY(null, |
| 36 | map(row_display, rows))); |
| 37 | // put that in your document.createElement and smoke it! |
| 38 | swapDOM(oldTable, newTable); |
| 39 | </pre> |
| 40 | </div> |
| 41 | <div class="section"> |
| 42 | <h1><a id="description" name="description">Description</a></h1> |
| 43 | <p>As you probably know, the DOM APIs are some of the most painful |
| 44 | Java-inspired APIs you'll run across from a highly dynamic |
| 45 | language. Don't worry about that though, because they provide a |
| 46 | reasonable basis to build something that sucks a lot less.</p> |
| 47 | <p>MochiKit.DOM takes much of its inspiration from Nevow's <a class="footnote-reference" href="#id5" id="id1" name="id1">[1]</a> stan |
| 48 | <a class="footnote-reference" href="#id6" id="id2" name="id2">[2]</a>. This means you choose a tag, give it some attributes, then |
| 49 | stuff it full of <em>whatever objects you want</em>. MochiKit.DOM isn't |
| 50 | stupid, it knows that a string should be a text node, and that you |
| 51 | want functions to be called, and that <tt class="docutils literal"><span class="pre">Array</span></tt>-like objects should be |
| 52 | expanded, and stupid <tt class="docutils literal"><span class="pre">null</span></tt> values should be skipped.</p> |
| 53 | <p>Hell, it will let you return strings from functions, and use iterators |
| 54 | from <a class="mochiref reference" href="Iter.html">MochiKit.Iter</a>. If that's not enough, just teach it |
| 55 | new tricks with <a class="mochiref reference" href="#fn-registerdomconverter">registerDOMConverter</a>. If you have never |
| 56 | used an API like this for creating DOM elements, you've been wasting |
| 57 | your damn time. Get with it!</p> |
| 58 | </div> |
| 59 | <div class="section"> |
| 60 | <h1><a id="dependencies" name="dependencies">Dependencies</a></h1> |
| 61 | <ul class="simple"> |
| 62 | <li><a class="mochiref reference" href="Base.html">MochiKit.Base</a></li> |
| 63 | <li><a class="mochiref reference" href="Style.html">MochiKit.Style</a> (optional since MochiKit 1.4 for |
| 64 | backwards-compatibility)</li> |
| 65 | <li><a class="mochiref reference" href="Iter.html">MochiKit.Iter</a> (optional since MochiKit 1.4)</li> |
| 66 | </ul> |
| 67 | </div> |
| 68 | <div class="section"> |
| 69 | <h1><a id="overview" name="overview">Overview</a></h1> |
| 70 | <div class="section"> |
| 71 | <h2><a id="dom-coercion-rules" name="dom-coercion-rules">DOM Coercion Rules</a></h2> |
| 72 | <p>In order of precedence, <a class="mochiref reference" href="#fn-createdom">createDOM</a> coerces given arguments |
| 73 | to DOM nodes using the following rules:</p> |
| 74 | <ol class="arabic simple"> |
| 75 | <li>Functions are called with a <tt class="docutils literal"><span class="pre">this</span></tt> and first argument of the |
| 76 | parent node and their return value is subject to the following |
| 77 | rules (even this one).</li> |
| 78 | <li><tt class="docutils literal"><span class="pre">undefined</span></tt> and <tt class="docutils literal"><span class="pre">null</span></tt> are ignored.</li> |
| 79 | <li>If <a class="mochiref reference" href="Iter.html">MochiKit.Iter</a> is loaded, iterables are flattened |
| 80 | (as if they were passed in-line as nodes) and each return value is |
| 81 | subject to these rules.</li> |
| 82 | <li>Values that look like DOM nodes (objects with a <tt class="docutils literal"><span class="pre">.nodeType</span> <span class="pre">></span> <span class="pre">0</span></tt>) |
| 83 | are <tt class="docutils literal"><span class="pre">.appendChild</span></tt>'ed to the created DOM fragment.</li> |
| 84 | <li>Strings are wrapped up with <tt class="docutils literal"><span class="pre">document.createTextNode</span></tt></li> |
| 85 | <li>Objects that have a <tt class="docutils literal"><span class="pre">.dom(node)</span></tt> or <tt class="docutils literal"><span class="pre">.__dom__(node)</span></tt> method |
| 86 | are called with the parent node and their result is coerced using |
| 87 | these rules. (MochiKit 1.4+).</li> |
| 88 | <li>Objects that are not strings are run through the <tt class="docutils literal"><span class="pre">domConverters</span></tt> |
| 89 | <a class="mochiref reference" href="Base.html#fn-adapterregistry">MochiKit.Base.AdapterRegistry</a> (see |
| 90 | <a class="mochiref reference" href="#fn-registerdomconverter">registerDOMConverter</a>). The adapted value is subject |
| 91 | to these same rules (e.g. if the adapter returns a string, it |
| 92 | will be coerced to a text node).</li> |
| 93 | <li>If no adapter is available, <tt class="docutils literal"><span class="pre">.toString()</span></tt> is used to create a |
| 94 | text node.</li> |
| 95 | </ol> |
| 96 | </div> |
| 97 | <div class="section"> |
| 98 | <h2><a id="creating-dom-element-trees" name="creating-dom-element-trees">Creating DOM Element Trees</a></h2> |
| 99 | <p><a class="mochiref reference" href="#fn-createdom">createDOM</a> provides you with an excellent facility for |
| 100 | creating DOM trees that is easy on the wrists. One of the best ways to |
| 101 | understand how to use it is to take a look at an example:</p> |
| 102 | <pre class="literal-block"> |
| 103 | var rows = [ |
| 104 | ["dataA1", "dataA2", "dataA3"], |
| 105 | ["dataB1", "dataB2", "dataB3"] |
| 106 | ]; |
| 107 | row_display = function (row) { |
| 108 | return TR(null, map(partial(TD, null), row)); |
| 109 | } |
| 110 | var newTable = TABLE({'class': 'prettytable'}, |
| 111 | THEAD(null, |
| 112 | row_display(["head1", "head2", "head3"])), |
| 113 | TFOOT(null, |
| 114 | row_display(["foot1", "foot2", "foot3"])), |
| 115 | TBODY(null, |
| 116 | map(row_display, rows))); |
| 117 | </pre> |
| 118 | <p>This will create a table with the following visual layout (if it were |
| 119 | inserted into the document DOM):</p> |
| 120 | <blockquote> |
| 121 | <table border="1" class="docutils"> |
| 122 | <colgroup> |
| 123 | <col width="33%" /> |
| 124 | <col width="33%" /> |
| 125 | <col width="33%" /> |
| 126 | </colgroup> |
| 127 | <thead valign="bottom"> |
| 128 | <tr><th class="head">head1</th> |
| 129 | <th class="head">head2</th> |
| 130 | <th class="head">head3</th> |
| 131 | </tr> |
| 132 | </thead> |
| 133 | <tbody valign="top"> |
| 134 | <tr><td>dataA1</td> |
| 135 | <td>dataA2</td> |
| 136 | <td>dataA3</td> |
| 137 | </tr> |
| 138 | <tr><td>dataB1</td> |
| 139 | <td>dataB2</td> |
| 140 | <td>dataB3</td> |
| 141 | </tr> |
| 142 | <tr><td>foot1</td> |
| 143 | <td>foot2</td> |
| 144 | <td>foot3</td> |
| 145 | </tr> |
| 146 | </tbody> |
| 147 | </table> |
| 148 | </blockquote> |
| 149 | <p>Corresponding to the following HTML:</p> |
| 150 | <pre class="literal-block"> |
| 151 | <table class="prettytable"> |
| 152 | <thead> |
| 153 | <tr> |
| 154 | <td>head1</td> |
| 155 | <td>head2</td> |
| 156 | <td>head3</td> |
| 157 | </tr> |
| 158 | </thead> |
| 159 | <tfoot> |
| 160 | <tr> |
| 161 | <td>foot1</td> |
| 162 | <td>foot2</td> |
| 163 | <td>foot3</td> |
| 164 | </tr> |
| 165 | </tfoot> |
| 166 | <tbody> |
| 167 | <tr> |
| 168 | <td>dataA1</td> |
| 169 | <td>dataA2</td> |
| 170 | <td>dataA3</td> |
| 171 | </tr> |
| 172 | <tr> |
| 173 | <td>dataB1</td> |
| 174 | <td>dataB2</td> |
| 175 | <td>dataB3</td> |
| 176 | </tr> |
| 177 | </tbody> |
| 178 | </table> |
| 179 | </pre> |
| 180 | </div> |
| 181 | <div class="section"> |
| 182 | <h2><a id="dom-context" name="dom-context">DOM Context</a></h2> |
| 183 | <p>In order to prevent having to pass a <tt class="docutils literal"><span class="pre">window</span></tt> and/or <tt class="docutils literal"><span class="pre">document</span></tt> |
| 184 | variable to every MochiKit.DOM function (e.g. when working with a |
| 185 | child window), MochiKit.DOM maintains a context variable for each of |
| 186 | them. They are managed with the <a class="mochiref reference" href="#fn-withwindow">withWindow</a> and |
| 187 | <a class="mochiref reference" href="#fn-withdocument">withDocument</a> functions, and can be acquired with |
| 188 | <a class="mochiref reference" href="#fn-currentwindow">currentWindow()</a> and <a class="mochiref reference" href="#fn-currentdocument">currentDocument()</a></p> |
| 189 | <p>For example, if you are creating DOM nodes in a child window, you |
| 190 | could do something like this:</p> |
| 191 | <pre class="literal-block"> |
| 192 | withWindow(child, function () { |
| 193 | var doc = currentDocument(); |
| 194 | appendChildNodes(doc.body, H1(null, "This is in the child!")); |
| 195 | }); |
| 196 | </pre> |
| 197 | <p>Note that <a class="mochiref reference" href="#fn-withwindow">withWindow(win, ...)</a> also implies |
| 198 | <a class="mochiref reference" href="#fn-withdocument">withDocument(win.document, ...)</a>.</p> |
| 199 | </div> |
| 200 | <div class="section"> |
| 201 | <h2><a id="dom-gotchas" name="dom-gotchas">DOM Gotchas</a></h2> |
| 202 | <dl class="docutils"> |
| 203 | <dt>Performance Tradeoff:</dt> |
| 204 | <dd>DOM is much easier to get correct and more flexible than working |
| 205 | directly with markup as strings. Modifying <tt class="docutils literal"><span class="pre">innerHTML</span></tt> is still |
| 206 | the fastest way to make document changes.</dd> |
| 207 | <dt>Internet Explorer:</dt> |
| 208 | <dd>Internet Explorer's DOM implementation is quite poor in comparison |
| 209 | to the other popular implementations. In order to avoid memory |
| 210 | leaks due to circular references, you should use |
| 211 | <a class="mochiref reference" href="Signal.html#fn-connect">MochiKit.Signal.connect</a> for all of your event handling |
| 212 | needs. Additionally, when creating tables with DOM, it is required |
| 213 | to use a <tt class="docutils literal"><span class="pre">TBODY</span></tt> tag (see <a class="reference" href="#creating-dom-element-trees">Creating DOM Element Trees</a> for an |
| 214 | example of this).</dd> |
| 215 | </dl> |
| 216 | </div> |
| 217 | </div> |
| 218 | <div class="section"> |
| 219 | <h1><a id="api-reference" name="api-reference">API Reference</a></h1> |
| 220 | <div class="section"> |
| 221 | <h2><a id="functions" name="functions">Functions</a></h2> |
| 222 | <p> |
| 223 | <a name="fn-$"></a> |
| 224 | <a class="mochidef reference" href="#fn-$">$(id[, ...])</a>:</p> |
| 225 | <blockquote> |
| 226 | <p>An alias for <a class="mochiref reference" href="#fn-getelement">getElement(id[, ...])</a></p> |
| 227 | <dl class="docutils"> |
| 228 | <dt><em>Availability</em>:</dt> |
| 229 | <dd>Available in MochiKit 1.3.1+</dd> |
| 230 | </dl> |
| 231 | </blockquote> |
| 232 | <p> |
| 233 | <a name="fn-addelementclass"></a> |
| 234 | <a class="mochidef reference" href="#fn-addelementclass">addElementClass(element, className)</a>:</p> |
| 235 | <blockquote> |
| 236 | <p>Ensure that the given <tt class="docutils literal"><span class="pre">element</span></tt> has <tt class="docutils literal"><span class="pre">className</span></tt> set as part of |
| 237 | its class attribute. This will not disturb other class names. |
| 238 | <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string |
| 239 | identifiers are also acceptable.</p> |
| 240 | <dl class="docutils"> |
| 241 | <dt><em>Availability</em>:</dt> |
| 242 | <dd>Available in MochiKit 1.3.1+</dd> |
| 243 | </dl> |
| 244 | </blockquote> |
| 245 | <p> |
| 246 | <a name="fn-addloadevent"></a> |
| 247 | <a class="mochidef reference" href="#fn-addloadevent">addLoadEvent(func)</a>:</p> |
| 248 | <blockquote> |
| 249 | <p>Note that <a class="mochiref reference" href="#fn-addloadevent">addLoadEvent</a> can not be used in combination |
| 250 | with <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a> if the <tt class="docutils literal"><span class="pre">onload</span></tt> event is |
| 251 | connected. Once an event is connected with |
| 252 | <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a>, no other APIs may be used for that |
| 253 | same event.</p> |
| 254 | <p>This will stack <tt class="docutils literal"><span class="pre">window.onload</span></tt> functions on top of each other. |
| 255 | Each function added will be called after <tt class="docutils literal"><span class="pre">onload</span></tt> in the order |
| 256 | that they were added.</p> |
| 257 | <dl class="docutils"> |
| 258 | <dt><em>Availability</em>:</dt> |
| 259 | <dd>Available in MochiKit 1.3.1+</dd> |
| 260 | </dl> |
| 261 | </blockquote> |
| 262 | <p> |
| 263 | <a name="fn-addtocallstack"></a> |
| 264 | <a class="mochidef reference" href="#fn-addtocallstack">addToCallStack(target, path, func[, once])</a>:</p> |
| 265 | <blockquote> |
| 266 | <p>Note that <a class="mochiref reference" href="#fn-addtocallstack">addToCallStack</a> is not compatible with |
| 267 | <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a>. Once an event is connected with |
| 268 | <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a>, no other APIs may be used for that |
| 269 | same event.</p> |
| 270 | <p>Set the property <tt class="docutils literal"><span class="pre">path</span></tt> of <tt class="docutils literal"><span class="pre">target</span></tt> to a function that calls |
| 271 | the existing function at that property (if any), then calls |
| 272 | <tt class="docutils literal"><span class="pre">func</span></tt>.</p> |
| 273 | <p>If <tt class="docutils literal"><span class="pre">target[path]()</span></tt> returns exactly <tt class="docutils literal"><span class="pre">false</span></tt>, then <tt class="docutils literal"><span class="pre">func</span></tt> |
| 274 | will not be called.</p> |
| 275 | <p>If <tt class="docutils literal"><span class="pre">once</span></tt> is <tt class="docutils literal"><span class="pre">true</span></tt>, then <tt class="docutils literal"><span class="pre">target[path]</span></tt> is set to <tt class="docutils literal"><span class="pre">null</span></tt> |
| 276 | after the function call stack has completed.</p> |
| 277 | <p>If called several times for the same <tt class="docutils literal"><span class="pre">target[path]</span></tt>, it will |
| 278 | create a stack of functions (instead of just a pair).</p> |
| 279 | <dl class="docutils"> |
| 280 | <dt><em>Availability</em>:</dt> |
| 281 | <dd>Available in MochiKit 1.3.1+</dd> |
| 282 | </dl> |
| 283 | </blockquote> |
| 284 | <p> |
| 285 | <a name="fn-appendchildnodes"></a> |
| 286 | <a class="mochidef reference" href="#fn-appendchildnodes">appendChildNodes(node[, childNode[, ...]])</a>:</p> |
| 287 | <blockquote> |
| 288 | <p>Append children to a DOM element using the <a class="reference" href="#dom-coercion-rules">DOM Coercion Rules</a>.</p> |
| 289 | <dl class="docutils"> |
| 290 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 291 | <dd>A reference to the DOM element to add children to (if a string |
| 292 | is given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate |
| 293 | the node)</dd> |
| 294 | <dt><tt class="docutils literal"><span class="pre">childNode</span></tt>...:</dt> |
| 295 | <dd>All additional arguments, if any, will be coerced into DOM |
| 296 | nodes that are appended as children using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 297 | Rules</a>.</dd> |
| 298 | <dt><em>returns</em>:</dt> |
| 299 | <dd>The given DOM element</dd> |
| 300 | <dt><em>Availability</em>:</dt> |
| 301 | <dd>Available in MochiKit 1.3.1+</dd> |
| 302 | </dl> |
| 303 | </blockquote> |
| 304 | <p> |
| 305 | <a name="fn-insertsiblingnodesbefore"></a> |
| 306 | <a class="mochidef reference" href="#fn-insertsiblingnodesbefore">insertSiblingNodesBefore(node[, siblingNode[, ...]])</a>:</p> |
| 307 | <blockquote> |
| 308 | <p>Insert children into the DOM structure using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 309 | Rules</a>.</p> |
| 310 | <dl class="docutils"> |
| 311 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 312 | <dd>A reference to the DOM element you want to insert children |
| 313 | before (if a string is given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> |
| 314 | will be used to locate the node)</dd> |
| 315 | <dt><tt class="docutils literal"><span class="pre">siblingNode</span></tt>...:</dt> |
| 316 | <dd>All additional arguments, if any, will be coerced into DOM |
| 317 | nodes that are inserted as siblings using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 318 | Rules</a>.</dd> |
| 319 | <dt><em>returns</em>:</dt> |
| 320 | <dd>The parent of the given DOM element</dd> |
| 321 | <dt><em>Availability</em>:</dt> |
| 322 | <dd>Available in MochiKit 1.4+</dd> |
| 323 | </dl> |
| 324 | </blockquote> |
| 325 | <p> |
| 326 | <a name="fn-insertsiblingnodesafter"></a> |
| 327 | <a class="mochidef reference" href="#fn-insertsiblingnodesafter">insertSiblingNodesAfter(node[, siblingNode[, ...]])</a>:</p> |
| 328 | <blockquote> |
| 329 | <p>Insert children into the DOM structure using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 330 | Rules</a>.</p> |
| 331 | <dl class="docutils"> |
| 332 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 333 | <dd>A reference to the DOM element you want to insert children |
| 334 | after (if a string is given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> |
| 335 | will be used to locate the node)</dd> |
| 336 | <dt><tt class="docutils literal"><span class="pre">siblingNode</span></tt>...:</dt> |
| 337 | <dd>All additional arguments, if any, will be coerced into DOM |
| 338 | nodes that are inserted as siblings using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 339 | Rules</a>.</dd> |
| 340 | <dt><em>returns</em>:</dt> |
| 341 | <dd>The parent of the given DOM element</dd> |
| 342 | <dt><em>Availability</em>:</dt> |
| 343 | <dd>Available in MochiKit 1.4+</dd> |
| 344 | </dl> |
| 345 | </blockquote> |
| 346 | <p> |
| 347 | <a name="fn-createdom"></a> |
| 348 | <a class="mochidef reference" href="#fn-createdom">createDOM(name[, attrs[, node[, ...]]])</a>:</p> |
| 349 | <blockquote> |
| 350 | <p>Create a DOM fragment in a really convenient manner, much like |
| 351 | Nevow`s <a class="footnote-reference" href="#id5" id="id3" name="id3">[1]</a> stan <a class="footnote-reference" href="#id6" id="id4" name="id4">[2]</a>.</p> |
| 352 | <p>Partially applied versions of this function for common tags are |
| 353 | available as aliases:</p> |
| 354 | <ul class="simple"> |
| 355 | <li><tt class="docutils literal"><span class="pre">A</span></tt></li> |
| 356 | <li><tt class="docutils literal"><span class="pre">BUTTON</span></tt></li> |
| 357 | <li><tt class="docutils literal"><span class="pre">BR</span></tt></li> |
| 358 | <li><tt class="docutils literal"><span class="pre">CANVAS</span></tt></li> |
| 359 | <li><tt class="docutils literal"><span class="pre">DIV</span></tt></li> |
| 360 | <li><tt class="docutils literal"><span class="pre">FIELDSET</span></tt></li> |
| 361 | <li><tt class="docutils literal"><span class="pre">FORM</span></tt></li> |
| 362 | <li><tt class="docutils literal"><span class="pre">H1</span></tt></li> |
| 363 | <li><tt class="docutils literal"><span class="pre">H2</span></tt></li> |
| 364 | <li><tt class="docutils literal"><span class="pre">H3</span></tt></li> |
| 365 | <li><tt class="docutils literal"><span class="pre">HR</span></tt></li> |
| 366 | <li><tt class="docutils literal"><span class="pre">IMG</span></tt></li> |
| 367 | <li><tt class="docutils literal"><span class="pre">INPUT</span></tt></li> |
| 368 | <li><tt class="docutils literal"><span class="pre">LABEL</span></tt></li> |
| 369 | <li><tt class="docutils literal"><span class="pre">LEGEND</span></tt></li> |
| 370 | <li><tt class="docutils literal"><span class="pre">LI</span></tt></li> |
| 371 | <li><tt class="docutils literal"><span class="pre">OL</span></tt></li> |
| 372 | <li><tt class="docutils literal"><span class="pre">OPTGROUP</span></tt></li> |
| 373 | <li><tt class="docutils literal"><span class="pre">OPTION</span></tt></li> |
| 374 | <li><tt class="docutils literal"><span class="pre">P</span></tt></li> |
| 375 | <li><tt class="docutils literal"><span class="pre">PRE</span></tt></li> |
| 376 | <li><tt class="docutils literal"><span class="pre">SELECT</span></tt></li> |
| 377 | <li><tt class="docutils literal"><span class="pre">SPAN</span></tt></li> |
| 378 | <li><tt class="docutils literal"><span class="pre">STRONG</span></tt></li> |
| 379 | <li><tt class="docutils literal"><span class="pre">TABLE</span></tt></li> |
| 380 | <li><tt class="docutils literal"><span class="pre">TBODY</span></tt></li> |
| 381 | <li><tt class="docutils literal"><span class="pre">TD</span></tt></li> |
| 382 | <li><tt class="docutils literal"><span class="pre">TEXTAREA</span></tt></li> |
| 383 | <li><tt class="docutils literal"><span class="pre">TFOOT</span></tt></li> |
| 384 | <li><tt class="docutils literal"><span class="pre">TH</span></tt></li> |
| 385 | <li><tt class="docutils literal"><span class="pre">THEAD</span></tt></li> |
| 386 | <li><tt class="docutils literal"><span class="pre">TR</span></tt></li> |
| 387 | <li><tt class="docutils literal"><span class="pre">TT</span></tt></li> |
| 388 | <li><tt class="docutils literal"><span class="pre">UL</span></tt></li> |
| 389 | </ul> |
| 390 | <p>See <a class="reference" href="#creating-dom-element-trees">Creating DOM Element Trees</a> for a comprehensive example.</p> |
| 391 | <dl class="docutils"> |
| 392 | <dt><tt class="docutils literal"><span class="pre">name</span></tt>:</dt> |
| 393 | <dd>The kind of fragment to create (e.g. 'span'), such as you |
| 394 | would pass to <tt class="docutils literal"><span class="pre">document.createElement</span></tt>.</dd> |
| 395 | <dt><tt class="docutils literal"><span class="pre">attrs</span></tt>:</dt> |
| 396 | <dd><p class="first">An object whose properties will be used as the attributes |
| 397 | (e.g. <tt class="docutils literal"><span class="pre">{'style':</span> <span class="pre">'display:block'}</span></tt>), or <tt class="docutils literal"><span class="pre">null</span></tt> if no |
| 398 | attributes need to be set.</p> |
| 399 | <p>See <a class="mochiref reference" href="#fn-updatenodeattributes">updateNodeAttributes</a> for more information.</p> |
| 400 | <p class="last">For convenience, if <tt class="docutils literal"><span class="pre">attrs</span></tt> is a string, <tt class="docutils literal"><span class="pre">null</span></tt> is used |
| 401 | and the string will be considered the first <tt class="docutils literal"><span class="pre">node</span></tt>.</p> |
| 402 | </dd> |
| 403 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>...:</dt> |
| 404 | <dd>All additional arguments, if any, will be coerced into DOM |
| 405 | nodes that are appended as children using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 406 | Rules</a>.</dd> |
| 407 | <dt><em>returns</em>:</dt> |
| 408 | <dd>A DOM element</dd> |
| 409 | <dt><em>Availability</em>:</dt> |
| 410 | <dd>Available in MochiKit 1.3.1+</dd> |
| 411 | </dl> |
| 412 | </blockquote> |
| 413 | <p> |
| 414 | <a name="fn-createdomfunc"></a> |
| 415 | <a class="mochidef reference" href="#fn-createdomfunc">createDOMFunc(tag[, attrs[, node[, ...]]])</a>:</p> |
| 416 | <blockquote> |
| 417 | <p>Convenience function to create a partially applied createDOM |
| 418 | function. You'd want to use this if you add additional convenience |
| 419 | functions for creating tags, or if you find yourself creating a |
| 420 | lot of tags with a bunch of the same attributes or contents.</p> |
| 421 | <p>See <a class="mochiref reference" href="#fn-createdom">createDOM</a> for more detailed descriptions of the |
| 422 | arguments.</p> |
| 423 | <dl class="docutils"> |
| 424 | <dt><tt class="docutils literal"><span class="pre">tag</span></tt>:</dt> |
| 425 | <dd>The name of the tag</dd> |
| 426 | <dt><tt class="docutils literal"><span class="pre">attrs</span></tt>:</dt> |
| 427 | <dd>Optionally specify the attributes to apply</dd> |
| 428 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>...:</dt> |
| 429 | <dd>Optionally specify any children nodes it should have</dd> |
| 430 | <dt><em>returns</em>:</dt> |
| 431 | <dd>function that takes additional arguments and calls |
| 432 | <a class="mochiref reference" href="#fn-createdom">createDOM</a></dd> |
| 433 | <dt><em>Availability</em>:</dt> |
| 434 | <dd>Available in MochiKit 1.3.1+</dd> |
| 435 | </dl> |
| 436 | </blockquote> |
| 437 | <p> |
| 438 | <a name="fn-currentdocument"></a> |
| 439 | <a class="mochidef reference" href="#fn-currentdocument">currentDocument()</a>:</p> |
| 440 | <blockquote> |
| 441 | <p>Return the current <tt class="docutils literal"><span class="pre">document</span></tt> <a class="reference" href="#dom-context">DOM Context</a>. This will always |
| 442 | be the same as the global <tt class="docutils literal"><span class="pre">document</span></tt> unless |
| 443 | <a class="mochiref reference" href="#fn-withdocument">withDocument</a> or <a class="mochiref reference" href="#fn-withwindow">withWindow</a> is currently |
| 444 | executing.</p> |
| 445 | <dl class="docutils"> |
| 446 | <dt><em>Availability</em>:</dt> |
| 447 | <dd>Available in MochiKit 1.3.1+</dd> |
| 448 | </dl> |
| 449 | </blockquote> |
| 450 | <p> |
| 451 | <a name="fn-currentwindow"></a> |
| 452 | <a class="mochidef reference" href="#fn-currentwindow">currentWindow()</a>:</p> |
| 453 | <blockquote> |
| 454 | <p>Return the current <tt class="docutils literal"><span class="pre">window</span></tt> <a class="reference" href="#dom-context">DOM Context</a>. This will always be |
| 455 | the same as the global <tt class="docutils literal"><span class="pre">window</span></tt> unless <a class="mochiref reference" href="#fn-withwindow">withWindow</a> is |
| 456 | currently executing.</p> |
| 457 | <dl class="docutils"> |
| 458 | <dt><em>Availability</em>:</dt> |
| 459 | <dd>Available in MochiKit 1.3.1+</dd> |
| 460 | </dl> |
| 461 | </blockquote> |
| 462 | <p> |
| 463 | <a name="fn-emithtml"></a> |
| 464 | <a class="mochidef reference" href="#fn-emithtml">emitHTML(dom[, lst])</a>:</p> |
| 465 | <blockquote> |
| 466 | <p>Convert a DOM tree to an <tt class="docutils literal"><span class="pre">Array</span></tt> of HTML string fragments. This should |
| 467 | be used for debugging/testing purposes only.</p> |
| 468 | <p>The DOM property <tt class="docutils literal"><span class="pre">innerHTML</span></tt> or <tt class="docutils literal"><span class="pre">cloneNode(true)</span></tt> method should |
| 469 | be used for most purposes.</p> |
| 470 | <dl class="docutils"> |
| 471 | <dt><em>Availability</em>:</dt> |
| 472 | <dd>Available in MochiKit 1.3.1+</dd> |
| 473 | </dl> |
| 474 | </blockquote> |
| 475 | <p> |
| 476 | <a name="fn-escapehtml"></a> |
| 477 | <a class="mochidef reference" href="#fn-escapehtml">escapeHTML(s)</a>:</p> |
| 478 | <blockquote> |
| 479 | <p>Make a string safe for HTML, converting the usual suspects (lt, |
| 480 | gt, quot, amp)</p> |
| 481 | <dl class="docutils"> |
| 482 | <dt><em>Availability</em>:</dt> |
| 483 | <dd>Available in MochiKit 1.3.1+</dd> |
| 484 | </dl> |
| 485 | </blockquote> |
| 486 | <p> |
| 487 | <a name="fn-focusonload"></a> |
| 488 | <a class="mochidef reference" href="#fn-focusonload">focusOnLoad(element)</a>:</p> |
| 489 | <blockquote> |
| 490 | <p>Note that <a class="mochiref reference" href="#fn-focusonload">focusOnLoad</a> can not be used in combination |
| 491 | with <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a> if the <tt class="docutils literal"><span class="pre">onload</span></tt> event is |
| 492 | connected. Once an event is connected with |
| 493 | <a class="mochiref reference" href="Signal.html">MochiKit.Signal</a>, no other APIs may be used for that |
| 494 | same event.</p> |
| 495 | <p>This adds an onload event to focus the given element.</p> |
| 496 | <dl class="docutils"> |
| 497 | <dt><em>Availability</em>:</dt> |
| 498 | <dd>Available in MochiKit 1.3.1+</dd> |
| 499 | </dl> |
| 500 | </blockquote> |
| 501 | <p> |
| 502 | <a name="fn-formcontents"></a> |
| 503 | <a class="mochidef reference" href="#fn-formcontents">formContents(elem=document.body)</a>:</p> |
| 504 | <blockquote> |
| 505 | <p>Search the DOM tree, starting at <tt class="docutils literal"><span class="pre">elem</span></tt>, for any elements with a |
| 506 | <tt class="docutils literal"><span class="pre">name</span></tt> and <tt class="docutils literal"><span class="pre">value</span></tt> attribute. Return a 2-element <tt class="docutils literal"><span class="pre">Array</span></tt> of |
| 507 | <tt class="docutils literal"><span class="pre">names</span></tt> and <tt class="docutils literal"><span class="pre">values</span></tt> suitable for use with |
| 508 | <a class="mochiref reference" href="Base.html#fn-querystring">MochiKit.Base.queryString</a>.</p> |
| 509 | <dl class="docutils"> |
| 510 | <dt><em>Availability</em>:</dt> |
| 511 | <dd>Available in MochiKit 1.3.1+</dd> |
| 512 | </dl> |
| 513 | </blockquote> |
| 514 | <p> |
| 515 | <a name="fn-getelement"></a> |
| 516 | <a class="mochidef reference" href="#fn-getelement">getElement(id[, ...])</a>:</p> |
| 517 | <blockquote> |
| 518 | <p>A small quick little function to encapsulate the |
| 519 | <tt class="docutils literal"><span class="pre">getElementById</span></tt> method. It includes a check to ensure we can |
| 520 | use that method.</p> |
| 521 | <p>If the id isn't a string, it will be returned as-is.</p> |
| 522 | <p>Also available as <a class="mochiref reference" href="#fn-$">$(...)</a> for convenience and |
| 523 | compatibility with other JavaScript frameworks.</p> |
| 524 | <p>If multiple arguments are given, an <tt class="docutils literal"><span class="pre">Array</span></tt> will be returned.</p> |
| 525 | <dl class="docutils"> |
| 526 | <dt><em>Availability</em>:</dt> |
| 527 | <dd>Available in MochiKit 1.3.1+</dd> |
| 528 | </dl> |
| 529 | </blockquote> |
| 530 | <p> |
| 531 | <a name="fn-getelementsbytagandclassname"></a> |
| 532 | <a class="mochidef reference" href="#fn-getelementsbytagandclassname">getElementsByTagAndClassName(tagName, className, parent=document)</a>:</p> |
| 533 | <blockquote> |
| 534 | <p>Returns an array of elements in <tt class="docutils literal"><span class="pre">parent</span></tt> that match the tag name |
| 535 | and class name provided. If <tt class="docutils literal"><span class="pre">parent</span></tt> is a string, it will be |
| 536 | looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 537 | <p>If <tt class="docutils literal"><span class="pre">tagName</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt> or <tt class="docutils literal"><span class="pre">"*"</span></tt>, all elements will be |
| 538 | searched for the matching class.</p> |
| 539 | <p>If <tt class="docutils literal"><span class="pre">className</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt>, all elements matching the provided |
| 540 | tag are returned.</p> |
| 541 | <dl class="docutils"> |
| 542 | <dt><em>Availability</em>:</dt> |
| 543 | <dd>Available in MochiKit 1.3.1+</dd> |
| 544 | </dl> |
| 545 | </blockquote> |
| 546 | <p> |
| 547 | <a name="fn-getfirstelementbytagandclassname"></a> |
| 548 | <a class="mochidef reference" href="#fn-getfirstelementbytagandclassname">getFirstElementByTagAndClassName(tagName, className, parent=document)</a>:</p> |
| 549 | <blockquote> |
| 550 | <p>Return the first element in <tt class="docutils literal"><span class="pre">parent</span></tt> that matches the tag name |
| 551 | and class name provided. If <tt class="docutils literal"><span class="pre">parent</span></tt> is a string, it will be |
| 552 | looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 553 | <p>If <tt class="docutils literal"><span class="pre">tagName</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt> or <tt class="docutils literal"><span class="pre">"*"</span></tt>, all elements will be searched |
| 554 | for the matching class.</p> |
| 555 | <p>If <tt class="docutils literal"><span class="pre">className</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt>, the first element matching the provided |
| 556 | tag will be returned.</p> |
| 557 | <dl class="docutils"> |
| 558 | <dt><em>Availability</em>:</dt> |
| 559 | <dd>Available in MochiKit 1.4+</dd> |
| 560 | </dl> |
| 561 | </blockquote> |
| 562 | <p> |
| 563 | <a name="fn-getfirstparentbytagandclassname"></a> |
| 564 | <a class="mochidef reference" href="#fn-getfirstparentbytagandclassname">getFirstParentByTagAndClassName(elem, tagName='*', className=null)</a>:</p> |
| 565 | <blockquote> |
| 566 | <p>Returns the first parent of <tt class="docutils literal"><span class="pre">elem</span></tt> matches the tag name and class name |
| 567 | provided. If parent is a string, it will be looked up using |
| 568 | <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 569 | <p>If <tt class="docutils literal"><span class="pre">tagName</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt> or <tt class="docutils literal"><span class="pre">"*"</span></tt>, all elements will be searched |
| 570 | for the matching class.</p> |
| 571 | <p>If <tt class="docutils literal"><span class="pre">className</span></tt> is <tt class="docutils literal"><span class="pre">null</span></tt>, the first element matching the provided |
| 572 | tag will be returned.</p> |
| 573 | <dl class="docutils"> |
| 574 | <dt><em>Availability</em>:</dt> |
| 575 | <dd>Available in MochiKit 1.4+</dd> |
| 576 | </dl> |
| 577 | </blockquote> |
| 578 | <p> |
| 579 | <a name="fn-getnodeattribute"></a> |
| 580 | <a class="mochidef reference" href="#fn-getnodeattribute">getNodeAttribute(node, attr)</a>:</p> |
| 581 | <blockquote> |
| 582 | <p>Get the value of the given attribute for a DOM element without |
| 583 | ever raising an exception (will return <tt class="docutils literal"><span class="pre">null</span></tt> on exception).</p> |
| 584 | <dl class="docutils"> |
| 585 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 586 | <dd>A reference to the DOM element to update (if a string is |
| 587 | given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate the |
| 588 | node)</dd> |
| 589 | <dt><tt class="docutils literal"><span class="pre">attr</span></tt>:</dt> |
| 590 | <dd><p class="first">The name of the attribute</p> |
| 591 | <p class="last">Note that it will do the right thing for IE, so don't do |
| 592 | the <tt class="docutils literal"><span class="pre">class</span></tt> -> <tt class="docutils literal"><span class="pre">className</span></tt> hack yourself.</p> |
| 593 | </dd> |
| 594 | <dt><em>returns</em>:</dt> |
| 595 | <dd>The attribute's value, or <tt class="docutils literal"><span class="pre">null</span></tt></dd> |
| 596 | <dt><em>Availability</em>:</dt> |
| 597 | <dd>Available in MochiKit 1.3.1+</dd> |
| 598 | </dl> |
| 599 | </blockquote> |
| 600 | <p> |
| 601 | <a name="fn-haselementclass"></a> |
| 602 | <a class="mochidef reference" href="#fn-haselementclass">hasElementClass(element, className[, ...])</a>:</p> |
| 603 | <blockquote> |
| 604 | <p>Return <tt class="docutils literal"><span class="pre">true</span></tt> if <tt class="docutils literal"><span class="pre">className</span></tt> is found on the <tt class="docutils literal"><span class="pre">element</span></tt>. |
| 605 | <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string |
| 606 | identifiers are also acceptable.</p> |
| 607 | <dl class="docutils"> |
| 608 | <dt><em>Availability</em>:</dt> |
| 609 | <dd>Available in MochiKit 1.3.1+</dd> |
| 610 | </dl> |
| 611 | </blockquote> |
| 612 | <p> |
| 613 | <a name="fn-ischildnode"></a> |
| 614 | <a class="mochidef reference" href="#fn-ischildnode">isChildNode(node, maybeParent)</a>:</p> |
| 615 | <blockquote> |
| 616 | <p>Determine whether <tt class="docutils literal"><span class="pre">node</span></tt> is a child node of <tt class="docutils literal"><span class="pre">maybeParent</span></tt>. |
| 617 | Returns <tt class="docutils literal"><span class="pre">true</span></tt> if so, and <tt class="docutils literal"><span class="pre">false</span></tt> if not. A node is considered |
| 618 | a child node of itself for the purposes of this function.</p> |
| 619 | <p>If either <tt class="docutils literal"><span class="pre">node</span></tt> or <tt class="docutils literal"><span class="pre">maybeParent</span></tt> are strings, the related |
| 620 | nodes will be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 621 | <dl class="docutils"> |
| 622 | <dt><em>Availability</em>:</dt> |
| 623 | <dd>Available in MochiKit 1.4+</dd> |
| 624 | </dl> |
| 625 | </blockquote> |
| 626 | <p> |
| 627 | <a name="fn-isparent"></a> |
| 628 | <a class="mochidef reference" href="#fn-isparent">isParent(child, element)</a>:</p> |
| 629 | <blockquote> |
| 630 | <p>Returns <tt class="docutils literal"><span class="pre">true</span></tt> if <tt class="docutils literal"><span class="pre">element</span></tt> contains <tt class="docutils literal"><span class="pre">child</span></tt>. Returns <tt class="docutils literal"><span class="pre">false</span></tt> |
| 631 | if <tt class="docutils literal"><span class="pre">element</span> <span class="pre">==</span> <span class="pre">child</span></tt> or <tt class="docutils literal"><span class="pre">child</span></tt> is not contained in <tt class="docutils literal"><span class="pre">element</span></tt>. |
| 632 | If <tt class="docutils literal"><span class="pre">child</span></tt> or <tt class="docutils literal"><span class="pre">element</span></tt> are strings, they will be looked up with |
| 633 | <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 634 | <dl class="docutils"> |
| 635 | <dt><em>Availability</em>:</dt> |
| 636 | <dd>Available in MochiKit 1.4+</dd> |
| 637 | </dl> |
| 638 | </blockquote> |
| 639 | <p> |
| 640 | <a name="fn-makeclipping"></a> |
| 641 | <a class="mochidef reference" href="#fn-makeclipping">makeClipping(element)</a>:</p> |
| 642 | <blockquote> |
| 643 | <p>Ensure that <tt class="docutils literal"><span class="pre">element.style.overflow</span> <span class="pre">=</span> <span class="pre">'hidden'</span></tt>. If <tt class="docutils literal"><span class="pre">element</span></tt> is a |
| 644 | string, then it will be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 645 | <p>Returns the original value of <tt class="docutils literal"><span class="pre">element.style.overflow</span></tt>, so that it |
| 646 | may be restored with <a class="mochiref reference" href="#fn-undoclipping">undoClipping(element, overflow)</a>.</p> |
| 647 | <dl class="docutils"> |
| 648 | <dt><em>Availability</em>:</dt> |
| 649 | <dd>Available in MochiKit 1.4+</dd> |
| 650 | </dl> |
| 651 | </blockquote> |
| 652 | <p> |
| 653 | <a name="fn-makepositioned"></a> |
| 654 | <a class="mochidef reference" href="#fn-makepositioned">makePositioned(element)</a>:</p> |
| 655 | <blockquote> |
| 656 | <p>Ensure that <tt class="docutils literal"><span class="pre">element.style.position</span></tt> is set to <tt class="docutils literal"><span class="pre">"relative"</span></tt> if it |
| 657 | is not set or is <tt class="docutils literal"><span class="pre">"static"</span></tt>. If <tt class="docutils literal"><span class="pre">element</span></tt> is a |
| 658 | string, then it will be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 659 | <p>Returns the original value of <tt class="docutils literal"><span class="pre">element.style.position</span></tt>, so that it |
| 660 | may be restored with <a class="mochiref reference" href="#fn-undopositioned">undoPositioned(element, position)</a>.</p> |
| 661 | <dl class="docutils"> |
| 662 | <dt><em>Availability</em>:</dt> |
| 663 | <dd>Available in MochiKit 1.4+</dd> |
| 664 | </dl> |
| 665 | </blockquote> |
| 666 | <p> |
| 667 | <a name="fn-registerdomconverter"></a> |
| 668 | <a class="mochidef reference" href="#fn-registerdomconverter">registerDOMConverter(name, check, wrap[, override])</a>:</p> |
| 669 | <blockquote> |
| 670 | <p>Register an adapter to convert objects that match <tt class="docutils literal"><span class="pre">check(obj,</span> |
| 671 | <span class="pre">ctx)</span></tt> to a DOM element, or something that can be converted to a |
| 672 | DOM element (i.e. number, bool, string, function, iterable).</p> |
| 673 | <dl class="docutils"> |
| 674 | <dt><em>Availability</em>:</dt> |
| 675 | <dd>Available in MochiKit 1.3.1+</dd> |
| 676 | </dl> |
| 677 | </blockquote> |
| 678 | <p> |
| 679 | <a name="fn-removeelement"></a> |
| 680 | <a class="mochidef reference" href="#fn-removeelement">removeElement(node)</a>:</p> |
| 681 | <blockquote> |
| 682 | <p>Remove and return <tt class="docutils literal"><span class="pre">node</span></tt> from a DOM tree.</p> |
| 683 | <dl class="docutils"> |
| 684 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 685 | <dd>the DOM element (or string id of one) to be removed</dd> |
| 686 | <dt><em>returns</em></dt> |
| 687 | <dd>The removed element</dd> |
| 688 | <dt><em>Availability</em>:</dt> |
| 689 | <dd>Available in MochiKit 1.3.1+</dd> |
| 690 | </dl> |
| 691 | </blockquote> |
| 692 | <p> |
| 693 | <a name="fn-removeelementclass"></a> |
| 694 | <a class="mochidef reference" href="#fn-removeelementclass">removeElementClass(element, className)</a>:</p> |
| 695 | <blockquote> |
| 696 | <p>Ensure that the given <tt class="docutils literal"><span class="pre">element</span></tt> does not have <tt class="docutils literal"><span class="pre">className</span></tt> set |
| 697 | as part of its class attribute. This will not disturb other class |
| 698 | names. <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so |
| 699 | string identifiers are also acceptable.</p> |
| 700 | <dl class="docutils"> |
| 701 | <dt><em>Availability</em>:</dt> |
| 702 | <dd>Available in MochiKit 1.3.1+</dd> |
| 703 | </dl> |
| 704 | </blockquote> |
| 705 | <p> |
| 706 | <a name="fn-removeemptytextnodes"></a> |
| 707 | <a class="mochidef reference" href="#fn-removeemptytextnodes">removeEmptyTextNodes(node)</a>:</p> |
| 708 | <blockquote> |
| 709 | <p>Remove all text node children that contain only whitespace from |
| 710 | <tt class="docutils literal"><span class="pre">node</span></tt>. Useful in situations where such empty text nodes can |
| 711 | interfere with DOM traversal.</p> |
| 712 | <dl class="docutils"> |
| 713 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 714 | <dd>the DOM element (or string id of one) to remove whitespace child |
| 715 | nodes from.</dd> |
| 716 | <dt><em>Availability</em>:</dt> |
| 717 | <dd>Available in MochiKit 1.4+</dd> |
| 718 | </dl> |
| 719 | </blockquote> |
| 720 | <p> |
| 721 | <a name="fn-replacechildnodes"></a> |
| 722 | <a class="mochidef reference" href="#fn-replacechildnodes">replaceChildNodes(node[, childNode[, ...]])</a>:</p> |
| 723 | <blockquote> |
| 724 | <p>Remove all children from the given DOM element, then append any |
| 725 | given childNodes to it (by calling <a class="mochiref reference" href="#fn-appendchildnodes">appendChildNodes</a>).</p> |
| 726 | <dl class="docutils"> |
| 727 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 728 | <dd>A reference to the DOM element to add children to (if a string |
| 729 | is given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate |
| 730 | the node)</dd> |
| 731 | <dt><tt class="docutils literal"><span class="pre">childNode</span></tt>...:</dt> |
| 732 | <dd>All additional arguments, if any, will be coerced into DOM |
| 733 | nodes that are appended as children using the <a class="reference" href="#dom-coercion-rules">DOM Coercion |
| 734 | Rules</a>.</dd> |
| 735 | <dt><em>returns</em>:</dt> |
| 736 | <dd>The given DOM element</dd> |
| 737 | <dt><em>Availability</em>:</dt> |
| 738 | <dd>Available in MochiKit 1.3.1+</dd> |
| 739 | </dl> |
| 740 | </blockquote> |
| 741 | <p> |
| 742 | <a name="fn-scrapetext"></a> |
| 743 | <a class="mochidef reference" href="#fn-scrapetext">scrapeText(node[, asArray=false])</a>:</p> |
| 744 | <blockquote> |
| 745 | <p>Walk a DOM tree in-order and scrape all of the text out of it as a |
| 746 | <tt class="docutils literal"><span class="pre">string</span></tt>.</p> |
| 747 | <p>If <tt class="docutils literal"><span class="pre">asArray</span></tt> is <tt class="docutils literal"><span class="pre">true</span></tt>, then an <tt class="docutils literal"><span class="pre">Array</span></tt> will be returned |
| 748 | with each individual text node. These two are equivalent:</p> |
| 749 | <pre class="literal-block"> |
| 750 | assert( scrapeText(node) == scrapeText(node, true).join("") ); |
| 751 | </pre> |
| 752 | <dl class="docutils"> |
| 753 | <dt><em>Availability</em>:</dt> |
| 754 | <dd>Available in MochiKit 1.3.1+</dd> |
| 755 | </dl> |
| 756 | </blockquote> |
| 757 | <p> |
| 758 | <a name="fn-setelementclass"></a> |
| 759 | <a class="mochidef reference" href="#fn-setelementclass">setElementClass(element, className)</a>:</p> |
| 760 | <blockquote> |
| 761 | <p>Set the entire class attribute of <tt class="docutils literal"><span class="pre">element</span></tt> to <tt class="docutils literal"><span class="pre">className</span></tt>. |
| 762 | <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string |
| 763 | identifiers are also acceptable.</p> |
| 764 | <dl class="docutils"> |
| 765 | <dt><em>Availability</em>:</dt> |
| 766 | <dd>Available in MochiKit 1.3.1+</dd> |
| 767 | </dl> |
| 768 | </blockquote> |
| 769 | <p> |
| 770 | <a name="fn-setnodeattribute"></a> |
| 771 | <a class="mochidef reference" href="#fn-setnodeattribute">setNodeAttribute(node, attr, value)</a>:</p> |
| 772 | <blockquote> |
| 773 | <p>Set the value of the given attribute for a DOM element without |
| 774 | ever raising an exception (will return null on exception). If |
| 775 | setting more than one attribute, you should use |
| 776 | <a class="mochiref reference" href="#fn-updatenodeattributes">updateNodeAttributes</a>.</p> |
| 777 | <dl class="docutils"> |
| 778 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 779 | <dd>A reference to the DOM element to update (if a string is |
| 780 | given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate the |
| 781 | node)</dd> |
| 782 | <dt><tt class="docutils literal"><span class="pre">attr</span></tt>:</dt> |
| 783 | <dd><p class="first">The name of the attribute</p> |
| 784 | <p class="last">Note that it will do the right thing for IE, so don't do the |
| 785 | <tt class="docutils literal"><span class="pre">class</span></tt> -> <tt class="docutils literal"><span class="pre">className</span></tt> hack yourself.</p> |
| 786 | </dd> |
| 787 | <dt><tt class="docutils literal"><span class="pre">value</span></tt>:</dt> |
| 788 | <dd>The value of the attribute, may be an object to be merged |
| 789 | (e.g. for setting style).</dd> |
| 790 | <dt><em>returns</em>:</dt> |
| 791 | <dd>The given DOM element or <tt class="docutils literal"><span class="pre">null</span></tt> on failure</dd> |
| 792 | <dt><em>Availability</em>:</dt> |
| 793 | <dd>Available in MochiKit 1.3.1+</dd> |
| 794 | </dl> |
| 795 | </blockquote> |
| 796 | <p> |
| 797 | <a name="fn-swapdom"></a> |
| 798 | <a class="mochidef reference" href="#fn-swapdom">swapDOM(dest, src)</a>:</p> |
| 799 | <blockquote> |
| 800 | <p>Replace <tt class="docutils literal"><span class="pre">dest</span></tt> in a DOM tree with <tt class="docutils literal"><span class="pre">src</span></tt>, returning <tt class="docutils literal"><span class="pre">src</span></tt>.</p> |
| 801 | <dl class="docutils"> |
| 802 | <dt><tt class="docutils literal"><span class="pre">dest</span></tt>:</dt> |
| 803 | <dd>a DOM element (or string id of one) to be replaced</dd> |
| 804 | <dt><tt class="docutils literal"><span class="pre">src</span></tt>:</dt> |
| 805 | <dd>the DOM element (or string id of one) to replace it with, or |
| 806 | <tt class="docutils literal"><span class="pre">null</span></tt> if <tt class="docutils literal"><span class="pre">dest</span></tt> is to be removed (replaced with nothing).</dd> |
| 807 | <dt><em>returns</em>:</dt> |
| 808 | <dd>a DOM element (<tt class="docutils literal"><span class="pre">src</span></tt>)</dd> |
| 809 | <dt><em>Availability</em>:</dt> |
| 810 | <dd>Available in MochiKit 1.3.1+</dd> |
| 811 | </dl> |
| 812 | </blockquote> |
| 813 | <p> |
| 814 | <a name="fn-swapelementclass"></a> |
| 815 | <a class="mochidef reference" href="#fn-swapelementclass">swapElementClass(element, fromClass, toClass)</a>:</p> |
| 816 | <blockquote> |
| 817 | <p>If <tt class="docutils literal"><span class="pre">fromClass</span></tt> is set on <tt class="docutils literal"><span class="pre">element</span></tt>, replace it with |
| 818 | <tt class="docutils literal"><span class="pre">toClass</span></tt>. This will not disturb other classes on that element. |
| 819 | <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string |
| 820 | identifiers are also acceptable.</p> |
| 821 | <dl class="docutils"> |
| 822 | <dt><em>Availability</em>:</dt> |
| 823 | <dd>Available in MochiKit 1.3.1+</dd> |
| 824 | </dl> |
| 825 | </blockquote> |
| 826 | <p> |
| 827 | <a name="fn-toggleelementclass"></a> |
| 828 | <a class="mochidef reference" href="#fn-toggleelementclass">toggleElementClass(className[, element[, ...]])</a>:</p> |
| 829 | <blockquote> |
| 830 | <p>Toggle the presence of a given <tt class="docutils literal"><span class="pre">className</span></tt> in the class |
| 831 | attribute of all given elements. All elements will be looked up |
| 832 | with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string identifiers are acceptable.</p> |
| 833 | <dl class="docutils"> |
| 834 | <dt><em>Availability</em>:</dt> |
| 835 | <dd>Available in MochiKit 1.3.1+</dd> |
| 836 | </dl> |
| 837 | </blockquote> |
| 838 | <p> |
| 839 | <a name="fn-tohtml"></a> |
| 840 | <a class="mochidef reference" href="#fn-tohtml">toHTML(dom)</a>:</p> |
| 841 | <blockquote> |
| 842 | <p>Convert a DOM tree to a HTML string using <a class="mochiref reference" href="#fn-emithtml">emitHTML</a>. |
| 843 | This should be used for debugging/testing purposes only.</p> |
| 844 | <p>The DOM property <tt class="docutils literal"><span class="pre">innerHTML</span></tt> or <tt class="docutils literal"><span class="pre">cloneNode(true)</span></tt> method should |
| 845 | be used for most purposes.</p> |
| 846 | <dl class="docutils"> |
| 847 | <dt><em>Availability</em>:</dt> |
| 848 | <dd>Available in MochiKit 1.3.1+</dd> |
| 849 | </dl> |
| 850 | </blockquote> |
| 851 | <p> |
| 852 | <a name="fn-undoclipping"></a> |
| 853 | <a class="mochidef reference" href="#fn-undoclipping">undoClipping(element, overflow)</a>:</p> |
| 854 | <blockquote> |
| 855 | <p>Restore the setting of <tt class="docutils literal"><span class="pre">element.style.overflow</span></tt> set by |
| 856 | <a class="mochiref reference" href="#fn-makeclipping">makeClipping(element)</a>. If <tt class="docutils literal"><span class="pre">element</span></tt> is a string, then |
| 857 | it will be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 858 | <dl class="docutils"> |
| 859 | <dt><em>Availability</em>:</dt> |
| 860 | <dd>Available in MochiKit 1.4+</dd> |
| 861 | </dl> |
| 862 | </blockquote> |
| 863 | <p> |
| 864 | <a name="fn-undopositioned"></a> |
| 865 | <a class="mochidef reference" href="#fn-undopositioned">undoPositioned(element, overflow)</a>:</p> |
| 866 | <blockquote> |
| 867 | <p>Restore the setting of <tt class="docutils literal"><span class="pre">element.style.position</span></tt> set by |
| 868 | <a class="mochiref reference" href="#fn-makepositioned">makePositioned(element)</a>. If <tt class="docutils literal"><span class="pre">element</span></tt> is a string, then |
| 869 | it will be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>.</p> |
| 870 | <dl class="docutils"> |
| 871 | <dt><em>Availability</em>:</dt> |
| 872 | <dd>Available in MochiKit 1.4+</dd> |
| 873 | </dl> |
| 874 | </blockquote> |
| 875 | <p> |
| 876 | <a name="fn-updatenodeattributes"></a> |
| 877 | <a class="mochidef reference" href="#fn-updatenodeattributes">updateNodeAttributes(node, attrs)</a>:</p> |
| 878 | <blockquote> |
| 879 | <p>Update the attributes of a DOM element from a given object.</p> |
| 880 | <dl class="docutils"> |
| 881 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 882 | <dd>A reference to the DOM element to update (if a string is |
| 883 | given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate the |
| 884 | node)</dd> |
| 885 | <dt><tt class="docutils literal"><span class="pre">attrs</span></tt>:</dt> |
| 886 | <dd><p class="first">An object whose properties will be used to set the attributes |
| 887 | (e.g. <tt class="docutils literal"><span class="pre">{'class':</span> <span class="pre">'invisible'}</span></tt>), or <tt class="docutils literal"><span class="pre">null</span></tt> if no |
| 888 | attributes need to be set. If an object is given for the |
| 889 | attribute value (e.g. <tt class="docutils literal"><span class="pre">{'style':</span> <span class="pre">{'display':</span> <span class="pre">'block'}}</span></tt>) |
| 890 | then <a class="mochiref reference" href="Base.html#fn-updatetree">MochiKit.Base.updatetree</a> will be used to set |
| 891 | that attribute.</p> |
| 892 | <p class="last">Note that it will do the right thing for IE, so don't do the |
| 893 | <tt class="docutils literal"><span class="pre">class</span></tt> -> <tt class="docutils literal"><span class="pre">className</span></tt> hack yourself, and it deals with |
| 894 | setting "on..." event handlers correctly.</p> |
| 895 | </dd> |
| 896 | <dt><em>returns</em>:</dt> |
| 897 | <dd>The given DOM element</dd> |
| 898 | <dt><em>Availability</em>:</dt> |
| 899 | <dd>Available in MochiKit 1.3.1+</dd> |
| 900 | </dl> |
| 901 | </blockquote> |
| 902 | <p> |
| 903 | <a name="fn-withwindow"></a> |
| 904 | <a class="mochidef reference" href="#fn-withwindow">withWindow(win, func)</a>:</p> |
| 905 | <blockquote> |
| 906 | <p>Call <tt class="docutils literal"><span class="pre">func</span></tt> with the <tt class="docutils literal"><span class="pre">window</span></tt> <a class="reference" href="#dom-context">DOM Context</a> set to <tt class="docutils literal"><span class="pre">win</span></tt> |
| 907 | and the <tt class="docutils literal"><span class="pre">document</span></tt> <a class="reference" href="#dom-context">DOM Context</a> set to <tt class="docutils literal"><span class="pre">win.document</span></tt>. When |
| 908 | <tt class="docutils literal"><span class="pre">func()</span></tt> returns or throws an error, the <a class="reference" href="#dom-context">DOM Context</a> will be |
| 909 | restored to its previous state.</p> |
| 910 | <p>The return value of <tt class="docutils literal"><span class="pre">func()</span></tt> is returned by this function.</p> |
| 911 | <dl class="docutils"> |
| 912 | <dt><em>Availability</em>:</dt> |
| 913 | <dd>Available in MochiKit 1.3.1+</dd> |
| 914 | </dl> |
| 915 | </blockquote> |
| 916 | <p> |
| 917 | <a name="fn-withdocument"></a> |
| 918 | <a class="mochidef reference" href="#fn-withdocument">withDocument(doc, func)</a>:</p> |
| 919 | <blockquote> |
| 920 | <p>Call <tt class="docutils literal"><span class="pre">func</span></tt> with the <tt class="docutils literal"><span class="pre">doc</span></tt> <a class="reference" href="#dom-context">DOM Context</a> set to <tt class="docutils literal"><span class="pre">doc</span></tt>. |
| 921 | When <tt class="docutils literal"><span class="pre">func()</span></tt> returns or throws an error, the <a class="reference" href="#dom-context">DOM Context</a> |
| 922 | will be restored to its previous state.</p> |
| 923 | <p>The return value of <tt class="docutils literal"><span class="pre">func()</span></tt> is returned by this function.</p> |
| 924 | <dl class="docutils"> |
| 925 | <dt><em>Availability</em>:</dt> |
| 926 | <dd>Available in MochiKit 1.3.1+</dd> |
| 927 | </dl> |
| 928 | </blockquote> |
| 929 | </div> |
| 930 | <div class="section"> |
| 931 | <h2><a id="style-functions" name="style-functions">Style Functions</a></h2> |
| 932 | <p>These functions are available in MochiKit 1.3.1, but have been moved to |
| 933 | <a class="mochiref reference" href="Style.html">MochiKit.Style</a> in 1.4+.</p> |
| 934 | <p> |
| 935 | <a name="fn-computedstyle"></a> |
| 936 | <a class="mochidef reference" href="#fn-computedstyle">computedStyle(htmlElement, cssProperty, mozillaEquivalentCSS)</a>:</p> |
| 937 | <blockquote> |
| 938 | <p>Looks up a CSS property for the given element. The element can be |
| 939 | specified as either a string with the element's ID or the element |
| 940 | object itself.</p> |
| 941 | <dl class="docutils"> |
| 942 | <dt><tt class="docutils literal"><span class="pre">cssProperty</span></tt>:</dt> |
| 943 | <dd>MochiKit 1.3.1 expects camel case, e.g. <tt class="docutils literal"><span class="pre">backgroundColor</span></tt>. |
| 944 | MochiKit 1.4+ expects CSS selector case, e.g. <tt class="docutils literal"><span class="pre">background-color</span></tt>, |
| 945 | but will accept camel case for backwards-compatibility.</dd> |
| 946 | <dt><tt class="docutils literal"><span class="pre">mozillaEquivalentCSS</span></tt>:</dt> |
| 947 | <dd>MochiKit 1.3.1 expects selector case. |
| 948 | MochiKit 1.4+ ignores this argument.</dd> |
| 949 | <dt><em>Availability</em>:</dt> |
| 950 | <dd>Available in MochiKit 1.3.1, deprecated in favor of |
| 951 | <a class="mochiref reference" href="Style.html#fn-getstyle">MochiKit.Style.getStyle</a> in 1.4+</dd> |
| 952 | </dl> |
| 953 | </blockquote> |
| 954 | <p> |
| 955 | <a name="fn-elementdimensions"></a> |
| 956 | <a class="mochidef reference" href="#fn-elementdimensions">elementDimensions(element)</a>:</p> |
| 957 | <blockquote> |
| 958 | <p>Return the absolute pixel width and height (including padding and border, |
| 959 | but not margins) of <tt class="docutils literal"><span class="pre">element</span></tt> as an object with <tt class="docutils literal"><span class="pre">w</span></tt> and <tt class="docutils literal"><span class="pre">h</span></tt> |
| 960 | properties, or <tt class="docutils literal"><span class="pre">undefined</span></tt> if <tt class="docutils literal"><span class="pre">element</span></tt> is not in the document. |
| 961 | <tt class="docutils literal"><span class="pre">element</span></tt> may be specified as a string to be looked up with |
| 962 | <a class="mochiref reference" href="#fn-getelement">getElement</a>, a DOM element, or trivially as an object with |
| 963 | <tt class="docutils literal"><span class="pre">w</span></tt> and/or <tt class="docutils literal"><span class="pre">h</span></tt> properties.</p> |
| 964 | <dl class="docutils"> |
| 965 | <dt><em>Availability</em>:</dt> |
| 966 | <dd>Available in MochiKit 1.3.1, deprecated in favor of |
| 967 | <a class="mochiref reference" href="Style.html#fn-getelementdimensions">MochiKit.Style.getElementDimensions</a> in 1.4+</dd> |
| 968 | </dl> |
| 969 | </blockquote> |
| 970 | <p> |
| 971 | <a name="fn-elementposition"></a> |
| 972 | <a class="mochidef reference" href="#fn-elementposition">elementPosition(element[, relativeTo={x: 0, y: 0}])</a>:</p> |
| 973 | <blockquote> |
| 974 | <p>Return the absolute pixel position of <tt class="docutils literal"><span class="pre">element</span></tt> in the document |
| 975 | as an object with <tt class="docutils literal"><span class="pre">x</span></tt> and <tt class="docutils literal"><span class="pre">y</span></tt> properties, or <tt class="docutils literal"><span class="pre">undefined</span></tt> if |
| 976 | <tt class="docutils literal"><span class="pre">element</span></tt> is not in the document. <tt class="docutils literal"><span class="pre">element</span></tt> may be specified |
| 977 | as a string to be looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, a DOM |
| 978 | element, or trivially as an object with <tt class="docutils literal"><span class="pre">x</span></tt> and/or <tt class="docutils literal"><span class="pre">y</span></tt> |
| 979 | properties.</p> |
| 980 | <p>If <tt class="docutils literal"><span class="pre">relativeTo</span></tt> is given, then its coordinates are subtracted from |
| 981 | the absolute position of <tt class="docutils literal"><span class="pre">element</span></tt>, e.g.:</p> |
| 982 | <pre class="literal-block"> |
| 983 | var elemPos = elementPosition(elem); |
| 984 | var anotherElemPos = elementPosition(anotherElem); |
| 985 | var relPos = elementPosition(elem, anotherElem); |
| 986 | assert( relPos.x == (elemPos.x - anotherElemPos.x) ); |
| 987 | assert( relPos.y == (elemPos.y - anotherElemPos.y) ); |
| 988 | </pre> |
| 989 | <p><tt class="docutils literal"><span class="pre">relativeTo</span></tt> may be specified as a string to be looked up with |
| 990 | <a class="mochiref reference" href="#fn-getelement">getElement</a>, a DOM element, or trivially as an object |
| 991 | with <tt class="docutils literal"><span class="pre">x</span></tt> and/or <tt class="docutils literal"><span class="pre">y</span></tt> properties.</p> |
| 992 | <dl class="docutils"> |
| 993 | <dt><em>Availability</em>:</dt> |
| 994 | <dd>Available in MochiKit 1.3.1, deprecated in favor of |
| 995 | <a class="mochiref reference" href="Style.html#fn-getelementposition">MochiKit.Style.getElementPosition</a> in 1.4+</dd> |
| 996 | </dl> |
| 997 | </blockquote> |
| 998 | <p> |
| 999 | <a name="fn-getviewportdimensions"></a> |
| 1000 | <a class="mochidef reference" href="#fn-getviewportdimensions">getViewportDimensions()</a>:</p> |
| 1001 | <blockquote> |
| 1002 | <p>Return the pixel width and height of the viewport as an object |
| 1003 | with <tt class="docutils literal"><span class="pre">w</span></tt> and <tt class="docutils literal"><span class="pre">h</span></tt> properties. <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with |
| 1004 | <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string identifiers are also acceptable.</p> |
| 1005 | <dl class="docutils"> |
| 1006 | <dt><em>Availability</em>:</dt> |
| 1007 | <dd>Available in MochiKit 1.3.1, moved to |
| 1008 | <a class="mochiref reference" href="Style.html#fn-getviewportdimensions">MochiKit.Style.getViewportDimensions</a> in 1.4+</dd> |
| 1009 | </dl> |
| 1010 | </blockquote> |
| 1011 | <p> |
| 1012 | <a name="fn-hideelement"></a> |
| 1013 | <a class="mochidef reference" href="#fn-hideelement">hideElement(element, ...)</a>:</p> |
| 1014 | <blockquote> |
| 1015 | <p>Partial form of <a class="mochiref reference" href="#fn-setdisplayforelement">setDisplayForElement</a>, specifically:</p> |
| 1016 | <pre class="literal-block"> |
| 1017 | partial(setDisplayForElement, "none") |
| 1018 | </pre> |
| 1019 | <p>For information about the caveats of using a <tt class="docutils literal"><span class="pre">style.display</span></tt> |
| 1020 | based show/hide mechanism, and a CSS based alternative, see |
| 1021 | <a class="reference" href="Style.html#element-visibility">Element Visibility</a>.</p> |
| 1022 | </blockquote> |
| 1023 | <blockquote> |
| 1024 | <dl class="docutils"> |
| 1025 | <dt><em>Availability</em>:</dt> |
| 1026 | <dd>Available in MochiKit 1.3.1, moved to |
| 1027 | <a class="mochiref reference" href="Style.html#fn-hideelement">MochiKit.Style.hideElement</a> in 1.4+</dd> |
| 1028 | </dl> |
| 1029 | </blockquote> |
| 1030 | <p> |
| 1031 | <a name="fn-setelementdimensions"></a> |
| 1032 | <a class="mochidef reference" href="#fn-setelementdimensions">setElementDimensions(element, dimensions[, units='px'])</a>:</p> |
| 1033 | <blockquote> |
| 1034 | <p>Sets the dimensions of <tt class="docutils literal"><span class="pre">element</span></tt> in the document from an object |
| 1035 | with <tt class="docutils literal"><span class="pre">w</span></tt> and <tt class="docutils literal"><span class="pre">h</span></tt> properties.</p> |
| 1036 | <dl class="docutils"> |
| 1037 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 1038 | <dd>A reference to the DOM element to update (if a string is |
| 1039 | given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate the |
| 1040 | node)</dd> |
| 1041 | <dt><tt class="docutils literal"><span class="pre">dimensions</span></tt>:</dt> |
| 1042 | <dd>An object with <tt class="docutils literal"><span class="pre">w</span></tt> and <tt class="docutils literal"><span class="pre">h</span></tt> properties</dd> |
| 1043 | <dt><tt class="docutils literal"><span class="pre">units</span></tt>:</dt> |
| 1044 | <dd>Optionally set the units to use, default is <tt class="docutils literal"><span class="pre">px</span></tt></dd> |
| 1045 | <dt><em>Availability</em>:</dt> |
| 1046 | <dd>Available in MochiKit 1.3.1, moved to |
| 1047 | <a class="mochiref reference" href="Style.html#fn-setelementdimensions">MochiKit.Style.setElementDimensions</a> in 1.4+</dd> |
| 1048 | </dl> |
| 1049 | </blockquote> |
| 1050 | <p> |
| 1051 | <a name="fn-setelementposition"></a> |
| 1052 | <a class="mochidef reference" href="#fn-setelementposition">setElementPosition(element, position[, units='px'])</a>:</p> |
| 1053 | <blockquote> |
| 1054 | <p>Sets the absolute position of <tt class="docutils literal"><span class="pre">element</span></tt> in the document from an |
| 1055 | object with <tt class="docutils literal"><span class="pre">x</span></tt> and <tt class="docutils literal"><span class="pre">y</span></tt> properties.</p> |
| 1056 | <dl class="docutils"> |
| 1057 | <dt><tt class="docutils literal"><span class="pre">node</span></tt>:</dt> |
| 1058 | <dd>A reference to the DOM element to update (if a string is |
| 1059 | given, <a class="mochiref reference" href="#fn-getelement">getElement(node)</a> will be used to locate the |
| 1060 | node)</dd> |
| 1061 | <dt><tt class="docutils literal"><span class="pre">position</span></tt>:</dt> |
| 1062 | <dd>An object with <tt class="docutils literal"><span class="pre">x</span></tt> and <tt class="docutils literal"><span class="pre">y</span></tt> properties</dd> |
| 1063 | <dt><tt class="docutils literal"><span class="pre">units</span></tt>:</dt> |
| 1064 | <dd>Optionally set the units to use, default is <tt class="docutils literal"><span class="pre">px</span></tt></dd> |
| 1065 | <dt><em>Availability</em>:</dt> |
| 1066 | <dd>Available in MochiKit 1.3.1, moved to |
| 1067 | <a class="mochiref reference" href="Style.html#fn-setelementposition">MochiKit.Style.setElementPosition</a> in 1.4+</dd> |
| 1068 | </dl> |
| 1069 | </blockquote> |
| 1070 | <p> |
| 1071 | <a name="fn-setdisplayforelement"></a> |
| 1072 | <a class="mochidef reference" href="#fn-setdisplayforelement">setDisplayForElement(display, element[, ...])</a>:</p> |
| 1073 | <blockquote> |
| 1074 | <p>Change the <tt class="docutils literal"><span class="pre">style.display</span></tt> for the given element(s). Usually |
| 1075 | used as the partial forms:</p> |
| 1076 | <ul class="simple"> |
| 1077 | <li><a class="mochiref reference" href="#fn-showelement">showElement(element, ...)</a></li> |
| 1078 | <li><a class="mochiref reference" href="#fn-hideelement">hideElement(element, ...)</a></li> |
| 1079 | </ul> |
| 1080 | <p>Elements are looked up with <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string |
| 1081 | identifiers are acceptable.</p> |
| 1082 | <p>For information about the caveats of using a <tt class="docutils literal"><span class="pre">style.display</span></tt> |
| 1083 | based show/hide mechanism, and a CSS based alternative, see |
| 1084 | <a class="reference" href="Style.html#element-visibility">Element Visibility</a>.</p> |
| 1085 | <dl class="docutils"> |
| 1086 | <dt><em>Availability</em>:</dt> |
| 1087 | <dd>Available in MochiKit 1.3.1, moved to |
| 1088 | <a class="mochiref reference" href="Style.html#fn-setdisplayforelement">MochiKit.Style.setDisplayForElement</a> in 1.4+</dd> |
| 1089 | </dl> |
| 1090 | </blockquote> |
| 1091 | <p> |
| 1092 | <a name="fn-setopacity"></a> |
| 1093 | <a class="mochidef reference" href="#fn-setopacity">setOpacity(element, opacity)</a>:</p> |
| 1094 | <blockquote> |
| 1095 | <p>Sets <tt class="docutils literal"><span class="pre">opacity</span></tt> for <tt class="docutils literal"><span class="pre">element</span></tt>. Valid <tt class="docutils literal"><span class="pre">opacity</span></tt> values range |
| 1096 | from 0 (invisible) to 1 (opaque). <tt class="docutils literal"><span class="pre">element</span></tt> is looked up with |
| 1097 | <a class="mochiref reference" href="#fn-getelement">getElement</a>, so string identifiers are also acceptable.</p> |
| 1098 | <dl class="docutils"> |
| 1099 | <dt><em>Availability</em>:</dt> |
| 1100 | <dd>Available in MochiKit 1.3.1, moved to |
| 1101 | <a class="mochiref reference" href="Style.html#fn-setopacity">MochiKit.Style.setOpacity</a> in 1.4+</dd> |
| 1102 | </dl> |
| 1103 | </blockquote> |
| 1104 | <p> |
| 1105 | <a name="fn-showelement"></a> |
| 1106 | <a class="mochidef reference" href="#fn-showelement">showElement(element, ...)</a>:</p> |
| 1107 | <blockquote> |
| 1108 | <p>Partial form of <a class="mochiref reference" href="#fn-setdisplayforelement">setDisplayForElement</a>, specifically:</p> |
| 1109 | <pre class="literal-block"> |
| 1110 | partial(setDisplayForElement, "block") |
| 1111 | </pre> |
| 1112 | <p>For information about the caveats of using a <tt class="docutils literal"><span class="pre">style.display</span></tt> |
| 1113 | based show/hide mechanism, and a CSS based alternative, see |
| 1114 | <a class="reference" href="Style.html#element-visibility">Element Visibility</a>.</p> |
| 1115 | <dl class="docutils"> |
| 1116 | <dt><em>Availability</em>:</dt> |
| 1117 | <dd>Available in MochiKit 1.3.1, moved to |
| 1118 | <a class="mochiref reference" href="Style.html#fn-showelement">MochiKit.Style.showElement</a> in 1.4+</dd> |
| 1119 | </dl> |
| 1120 | </blockquote> |
| 1121 | </div> |
| 1122 | <div class="section"> |
| 1123 | <h2><a id="style-objects" name="style-objects">Style Objects</a></h2> |
| 1124 | <p>These objects are available in MochiKit 1.3.1, but have been moved to |
| 1125 | <a class="mochiref reference" href="Style.html">MochiKit.Style</a> in 1.4+.</p> |
| 1126 | <p> |
| 1127 | <a name="fn-coordinates"></a> |
| 1128 | <a class="mochidef reference" href="#fn-coordinates">Coordinates(x, y)</a>:</p> |
| 1129 | <blockquote> |
| 1130 | <p>Constructs an object with <tt class="docutils literal"><span class="pre">x</span></tt> and <tt class="docutils literal"><span class="pre">y</span></tt> properties. <tt class="docutils literal"><span class="pre">obj.toString()</span></tt> |
| 1131 | returns something like <tt class="docutils literal"><span class="pre">{x:</span> <span class="pre">0,</span> <span class="pre">y:</span> <span class="pre">42}</span></tt> for debugging.</p> |
| 1132 | <p><em>Availability</em>: |
| 1133 | Available in MochiKit 1.3.1, moved to |
| 1134 | <a class="mochiref reference" href="Style.html#fn-coordinates">MochiKit.Style.Coordinates</a> in 1.4+</p> |
| 1135 | </blockquote> |
| 1136 | <p> |
| 1137 | <a name="fn-dimensions"></a> |
| 1138 | <a class="mochidef reference" href="#fn-dimensions">Dimensions(w, h)</a>:</p> |
| 1139 | <blockquote> |
| 1140 | <p>Constructs an object with <tt class="docutils literal"><span class="pre">w</span></tt> and <tt class="docutils literal"><span class="pre">h</span></tt> properties. <tt class="docutils literal"><span class="pre">obj.toString()</span></tt> |
| 1141 | returns something like <tt class="docutils literal"><span class="pre">{w:</span> <span class="pre">0,</span> <span class="pre">h:</span> <span class="pre">42}</span></tt> for debugging.</p> |
| 1142 | <p><em>Availability</em>: |
| 1143 | Available in MochiKit 1.3.1, moved to |
| 1144 | <a class="mochiref reference" href="Style.html#fn-dimensions">MochiKit.Style.Dimensions</a> in 1.4+</p> |
| 1145 | </blockquote> |
| 1146 | </div> |
| 1147 | </div> |
| 1148 | <div class="section"> |
| 1149 | <h1><a id="see-also" name="see-also">See Also</a></h1> |
| 1150 | <table class="docutils footnote" frame="void" id="id5" rules="none"> |
| 1151 | <colgroup><col class="label" /><col /></colgroup> |
| 1152 | <tbody valign="top"> |
| 1153 | <tr><td class="label"><a name="id5">[1]</a></td><td><em>(<a class="fn-backref" href="#id1">1</a>, <a class="fn-backref" href="#id3">2</a>)</em> Nevow, a web application construction kit for Python: |
| 1154 | <a class="reference" href="http://divmod.org/trac/wiki/DivmodNevow">http://divmod.org/trac/wiki/DivmodNevow</a></td></tr> |
| 1155 | </tbody> |
| 1156 | </table> |
| 1157 | <table class="docutils footnote" frame="void" id="id6" rules="none"> |
| 1158 | <colgroup><col class="label" /><col /></colgroup> |
| 1159 | <tbody valign="top"> |
| 1160 | <tr><td class="label"><a name="id6">[2]</a></td><td><em>(<a class="fn-backref" href="#id2">1</a>, <a class="fn-backref" href="#id4">2</a>)</em> nevow.stan is a domain specific language for Python (read as |
| 1161 | "crazy getitem/call overloading abuse") that Donovan and I |
| 1162 | schemed up at PyCon 2003 at this super ninja Python/C++ |
| 1163 | programmer's (David Abrahams) hotel room. Donovan later |
| 1164 | inflicted this upon the masses in Nevow. Check out the Nevow |
| 1165 | Guide for some examples: |
| 1166 | <a class="reference" href="http://divmod.org/trac/wiki/DivmodNevow">http://divmod.org/trac/wiki/DivmodNevow</a></td></tr> |
| 1167 | </tbody> |
| 1168 | </table> |
| 1169 | </div> |
| 1170 | <div class="section"> |
| 1171 | <h1><a id="authors" name="authors">Authors</a></h1> |
| 1172 | <ul class="simple"> |
| 1173 | <li>Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>></li> |
| 1174 | </ul> |
| 1175 | </div> |
| 1176 | <div class="section"> |
| 1177 | <h1><a id="copyright" name="copyright">Copyright</a></h1> |
| 1178 | <p>Copyright 2005 Bob Ippolito <<a class="reference" href="mailto:bob@redivi.com">bob@redivi.com</a>>. This program is |
| 1179 | dual-licensed free software; you can redistribute it and/or modify it |
| 1180 | under the terms of the <a class="reference" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> or the <a class="reference" href="http://www.opensource.org/licenses/afl-2.1.php">Academic Free License |
| 1181 | v2.1</a>.</p> |
| 1182 | </div> |
| 1183 | </div> |
| 1184 | |
| 1185 | </body> |
| 1186 | </html> |