Commit | Line | Data |
---|---|---|
6a1aa64f DV |
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> |