Changeset 603
- Timestamp:
- 02/04/06 09:25:56 (3 years ago)
- Files:
-
- mochikit/branches/scriptaculous/MochiKit/Visual.js (modified) (4 diffs)
- mochikit/branches/scriptaculous/doc/html/MochiKit/DragAndDrop.html (modified) (1 diff)
- mochikit/branches/scriptaculous/doc/html/MochiKit/Visual.html (modified) (5 diffs)
- mochikit/branches/scriptaculous/doc/html/MochiKit/index.html (modified) (1 diff)
- mochikit/branches/scriptaculous/doc/rst/MochiKit/DragAndDrop.rst (modified) (1 diff)
- mochikit/branches/scriptaculous/doc/rst/MochiKit/Visual.rst (modified) (6 diffs)
- mochikit/branches/scriptaculous/doc/rst/MochiKit/index.rst (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
mochikit/branches/scriptaculous/MochiKit/Visual.js
r602 r603 686 686 }; 687 687 688 MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, MochiKit.Visual.Base.prototype); 688 MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, 689 MochiKit.Visual.Base.prototype); 689 690 690 691 MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, { … … 722 723 }; 723 724 724 MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, MochiKit.Visual.Base.prototype); 725 MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, 726 MochiKit.Visual.Base.prototype); 725 727 726 728 MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, { … … 1106 1108 'Puff' an element: grow it to double size, fading it and make it hidden. 1107 1109 1108 @param options: 'duration' in seconds for the effect, default to 1.0.1109 1110 1110 ***/ 1111 1111 element = MochiKit.DOM.getElement(element); … … 1115 1115 }; 1116 1116 options = MochiKit.Base.update({ 1117 duration: 1.0,1118 1117 beforeSetupInternal: function (effect) { 1119 1118 MochiKit.DOM.setStyle(effect.effects[0].element, mochikit/branches/scriptaculous/doc/html/MochiKit/DragAndDrop.html
r602 r603 19 19 // Create a draggable 20 20 new Draggable('mydrag'); 21 21 22 // Create a corresponding droppable 22 23 new Droppable('mydrop', { mochikit/branches/scriptaculous/doc/html/MochiKit/Visual.html
r602 r603 24 24 25 25 // Add an fade effect to an element 26 MochiKit.Effect.Fade('myelement');26 Fade('myelement'); 27 27 </pre> 28 28 </div> … … 122 122 <a class="mochidef reference" href="#fn-toggle">toggle(element[, effect[, options]])</a>:</p> 123 123 <blockquote> 124 Toggle an element between visible and invisible state using an effect.</blockquote> 124 <p>Toggle an element between visible and invisible state using an effect.</p> 125 <p>effect:</p> 126 <blockquote> 127 One of the visual pairs to use, between 'slide', 'blind', 'appear', 128 and 'size'.</blockquote> 129 </blockquote> 125 130 <p> 126 131 <a name="fn-tagifytext"></a> 127 132 <a class="mochidef reference" href="#fn-tagifytext">tagifyText(element[, tagifyStyle])</a>:</p> 128 133 <blockquote> 129 Transform a node text into nodes containing one letter by tag.</blockquote> 134 <p>Transform a node text into nodes containing one letter by tag.</p> 135 <p>tagifyStyle:</p> 136 <blockquote> 137 style to apply to character nodes, default to 'position: relative'.</blockquote> 138 </blockquote> 130 139 <p> 131 140 <a name="fn-multiple"></a> … … 137 146 <h2><a id="basic-effects-classes" name="basic-effects-classes">Basic Effects classes</a></h2> 138 147 <p> 148 <a name="fn-defaultoptions"></a> 149 <a class="mochidef reference" href="#fn-defaultoptions">DefaultOptions</a>:</p> 150 <blockquote> 151 <p>Default options for all Effect creation.</p> 152 <table border="1" class="docutils"> 153 <colgroup> 154 <col width="22%" /> 155 <col width="78%" /> 156 </colgroup> 157 <tbody valign="top"> 158 <tr><td>transition</td> 159 <td><tt class="docutils literal"><span class="pre">MochiKit.Visual.Transitions.sinoidal</span></tt></td> 160 </tr> 161 <tr><td>duration</td> 162 <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> 163 </tr> 164 <tr><td>fps</td> 165 <td><tt class="docutils literal"><span class="pre">25.0</span></tt></td> 166 </tr> 167 <tr><td>sync</td> 168 <td><tt class="docutils literal"><span class="pre">false</span></tt></td> 169 </tr> 170 <tr><td>from</td> 171 <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> 172 </tr> 173 <tr><td>to</td> 174 <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> 175 </tr> 176 <tr><td>delay</td> 177 <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> 178 </tr> 179 <tr><td>queue</td> 180 <td><tt class="docutils literal"><span class="pre">'parallel'</span></tt></td> 181 </tr> 182 </tbody> 183 </table> 184 </blockquote> 185 <p> 139 186 <a name="fn-base"></a> 140 187 <a class="mochidef reference" href="#fn-base">Base()</a>:</p> 141 188 <blockquote> 142 Base class to all effects. Define a basic looping service, use it for 143 creating new effects.</blockquote> 189 <p>Base class to all effects. Define a basic looping service, use it for 190 creating new effects.</p> 191 <p>You can override the methods <tt class="docutils literal"><span class="pre">setup</span></tt>, <tt class="docutils literal"><span class="pre">update</span></tt> and <tt class="docutils literal"><span class="pre">finish`</span></tt>.</p> 192 </blockquote> 144 193 <p> 145 194 <a name="fn-parallel"></a> … … 151 200 <a class="mochidef reference" href="#fn-opacity">Opacity(element [, options])</a>:</p> 152 201 <blockquote> 153 Change the opacity of an element progressively.</blockquote> 202 <p>Change the opacity of an element progressively.</p> 203 <p>options:</p> 204 <table border="1" class="docutils"> 205 <colgroup> 206 <col width="43%" /> 207 <col width="57%" /> 208 </colgroup> 209 <tbody valign="top"> 210 <tr><td>from</td> 211 <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> 212 </tr> 213 <tr><td>to</td> 214 <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> 215 </tr> 216 </tbody> 217 </table> 218 </blockquote> 154 219 <p> 155 220 <a name="fn-move"></a> 156 221 <a class="mochidef reference" href="#fn-move">Move(element [, options])</a>:</p> 157 222 <blockquote> 158 Change the position of an element in small steps, creating a moving effect.</blockquote> 223 <p>Change the position of an element in small steps, creating a moving effect.</p> 224 <p>options:</p> 225 <table border="1" class="docutils"> 226 <colgroup> 227 <col width="36%" /> 228 <col width="64%" /> 229 </colgroup> 230 <tbody valign="top"> 231 <tr><td>x</td> 232 <td><tt class="docutils literal"><span class="pre">0</span></tt></td> 233 </tr> 234 <tr><td>y</td> 235 <td><tt class="docutils literal"><span class="pre">0</span></tt></td> 236 </tr> 237 <tr><td>position</td> 238 <td><tt class="docutils literal"><span class="pre">'relative'</span></tt></td> 239 </tr> 240 </tbody> 241 </table> 242 </blockquote> 159 243 <p> 160 244 <a name="fn-scale"></a> 161 245 <a class="mochidef reference" href="#fn-scale">Scale(element, percent [, options])</a>:</p> 162 246 <blockquote> 163 Change the size of an element.</blockquote> 247 <p>Change the size of an element.</p> 248 <p>percent:</p> 249 <blockquote> 250 Final wanted size in percent of current size. The size will be reduced 251 if the value is between 0 and 1, and raised if the value is above 1.</blockquote> 252 <p>options:</p> 253 <table border="1" class="docutils"> 254 <colgroup> 255 <col width="57%" /> 256 <col width="43%" /> 257 </colgroup> 258 <tbody valign="top"> 259 <tr><td>scaleX</td> 260 <td><tt class="docutils literal"><span class="pre">true</span></tt></td> 261 </tr> 262 <tr><td>scaleY</td> 263 <td><tt class="docutils literal"><span class="pre">true</span></tt></td> 264 </tr> 265 <tr><td>scaleContent</td> 266 <td><tt class="docutils literal"><span class="pre">true</span></tt></td> 267 </tr> 268 <tr><td>scaleFromCenter</td> 269 <td><tt class="docutils literal"><span class="pre">false</span></tt></td> 270 </tr> 271 <tr><td>scaleMode</td> 272 <td><tt class="docutils literal"><span class="pre">'box'</span></tt></td> 273 </tr> 274 <tr><td>scaleFrom</td> 275 <td><tt class="docutils literal"><span class="pre">100.0</span></tt></td> 276 </tr> 277 <tr><td>scaleTo</td> 278 <td><tt class="docutils literal"><span class="pre">percent</span></tt></td> 279 </tr> 280 </tbody> 281 </table> 282 </blockquote> 164 283 <p> 165 284 <a name="fn-highlight"></a> 166 285 <a class="mochidef reference" href="#fn-highlight">Highlight(element [, options])</a>:</p> 167 286 <blockquote> 168 Highlight an element, flashing with one color.</blockquote> 287 <p>Highlight an element, flashing with one color.</p> 288 <p>options:</p> 289 <table border="1" class="docutils"> 290 <colgroup> 291 <col width="44%" /> 292 <col width="56%" /> 293 </colgroup> 294 <tbody valign="top"> 295 <tr><td>startcolor</td> 296 <td><tt class="docutils literal"><span class="pre">'#ffff99'</span></tt></td> 297 </tr> 298 </tbody> 299 </table> 300 </blockquote> 169 301 <p> 170 302 <a name="fn-scrollto"></a> … … 179 311 <a class="mochidef reference" href="#fn-fade">Fade(element [, options])</a>:</p> 180 312 <blockquote> 181 Change the opacity of an element until making it disappear.</blockquote> 313 <p>Change the opacity of an element until making it disappear.</p> 314 <p>options:</p> 315 <table border="1" class="docutils"> 316 <colgroup> 317 <col width="12%" /> 318 <col width="88%" /> 319 </colgroup> 320 <tbody valign="top"> 321 <tr><td>from</td> 322 <td><tt class="docutils literal"><span class="pre">MochiKit.DOM.getOpacity(element)</span> <span class="pre">||</span> <span class="pre">1.0</span></tt></td> 323 </tr> 324 <tr><td>to</td> 325 <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> 326 </tr> 327 </tbody> 328 </table> 329 </blockquote> 182 330 <p> 183 331 <a name="fn-appear"></a> 184 332 <a class="mochidef reference" href="#fn-appear">Appear(element [, options])</a>:</p> 185 333 <blockquote> 186 Slowly show an invisible element.</blockquote> 334 <p>Slowly show an invisible element.</p> 335 <p>options:</p> 336 <table border="1" class="docutils"> 337 <colgroup> 338 <col width="36%" /> 339 <col width="64%" /> 340 </colgroup> 341 <tbody valign="top"> 342 <tr><td>from</td> 343 <td><tt class="docutils literal"><span class="pre">0.0</span></tt></td> 344 </tr> 345 <tr><td>to</td> 346 <td><tt class="docutils literal"><span class="pre">1.0</span></tt></td> 347 </tr> 348 </tbody> 349 </table> 350 </blockquote> 187 351 <p> 188 352 <a name="fn-puff"></a> mochikit/branches/scriptaculous/doc/html/MochiKit/index.html
r602 r603 28 28 <li><a class="mochiref reference" href="Visual.html">MochiKit.Visual</a> - visual effects</li> 29 29 <li><a class="mochiref reference" href="DragAndDrop.html">MochiKit.DragAndDrop</a> - drag and drop</li> 30 <li><a class="mochiref reference" href="Effects.html">MochiKit.Effects</a> - visual effects too</li>31 30 </ul> 32 31 </div> mochikit/branches/scriptaculous/doc/rst/MochiKit/DragAndDrop.rst
r594 r603 13 13 // Create a draggable 14 14 new Draggable('mydrag'); 15 15 16 // Create a corresponding droppable 16 17 new Droppable('mydrop', { mochikit/branches/scriptaculous/doc/rst/MochiKit/Visual.rst
r602 r603 19 19 20 20 // Add an fade effect to an element 21 MochiKit.Effect.Fade('myelement');21 Fade('myelement'); 22 22 23 23 … … 105 105 Toggle an element between visible and invisible state using an effect. 106 106 107 effect: 108 109 One of the visual pairs to use, between 'slide', 'blind', 'appear', 110 and 'size'. 111 107 112 :mochidef:`tagifyText(element[, tagifyStyle])`: 108 113 109 114 Transform a node text into nodes containing one letter by tag. 115 116 tagifyStyle: 117 118 style to apply to character nodes, default to 'position: relative'. 110 119 111 120 :mochidef:`multiple(elements, effect[, options])`: … … 116 125 --------------------- 117 126 127 :mochidef:`DefaultOptions`: 128 129 Default options for all Effect creation. 130 131 =========== ======================================== 132 transition ``MochiKit.Visual.Transitions.sinoidal`` 133 duration ``1.0`` 134 fps ``25.0`` 135 sync ``false`` 136 from ``0.0`` 137 to ``1.0`` 138 delay ``0.0`` 139 queue ``'parallel'`` 140 =========== ======================================== 141 118 142 :mochidef:`Base()`: 119 143 … … 121 145 creating new effects. 122 146 147 You can override the methods ``setup``, ``update`` and ``finish```. 148 123 149 :mochidef:`Parallel(effects [, options])`: 124 150 … … 129 155 Change the opacity of an element progressively. 130 156 157 options: 158 159 ====== ======== 160 from ``0.0`` 161 to ``1.0`` 162 ====== ======== 163 131 164 :mochidef:`Move(element [, options])`: 132 165 133 166 Change the position of an element in small steps, creating a moving effect. 134 167 168 options: 169 170 ========= ================ 171 x ``0`` 172 y ``0`` 173 position ``'relative'`` 174 ========= ================ 175 135 176 :mochidef:`Scale(element, percent [, options])`: 136 177 137 178 Change the size of an element. 138 179 180 percent: 181 182 Final wanted size in percent of current size. The size will be reduced 183 if the value is between 0 and 1, and raised if the value is above 1. 184 185 options: 186 187 ================ ============ 188 scaleX ``true`` 189 scaleY ``true`` 190 scaleContent ``true`` 191 scaleFromCenter ``false`` 192 scaleMode ``'box'`` 193 scaleFrom ``100.0`` 194 scaleTo ``percent`` 195 ================ ============ 196 197 139 198 :mochidef:`Highlight(element [, options])`: 140 199 141 200 Highlight an element, flashing with one color. 201 202 options: 203 204 =========== ============== 205 startcolor ``'#ffff99'`` 206 =========== ============== 142 207 143 208 :mochidef:`ScrollTo(element [, options])`: … … 152 217 Change the opacity of an element until making it disappear. 153 218 219 options: 220 221 ====== ============================================= 222 from ``MochiKit.DOM.getOpacity(element) || 1.0`` 223 to ``0.0`` 224 ====== ============================================= 225 154 226 :mochidef:`Appear(element [, options])`: 155 227 156 228 Slowly show an invisible element. 229 230 options: 231 232 ===== ========= 233 from ``0.0`` 234 to ``1.0`` 235 ===== ========= 157 236 158 237 :mochidef:`Puff(element [, options])`: mochikit/branches/scriptaculous/doc/rst/MochiKit/index.rst
r602 r603 20 20 - :mochiref:`MochiKit.Visual` - visual effects 21 21 - :mochiref:`MochiKit.DragAndDrop` - drag and drop 22 - :mochiref:`MochiKit.Effects` - visual effects too23 22 24 23
