Changeset 604
- Timestamp:
- 02/04/06 10:56:01 (3 years ago)
- Files:
-
- mochikit/branches/scriptaculous/MochiKit/Controls.js (modified) (1 diff)
- mochikit/branches/scriptaculous/MochiKit/Visual.js (modified) (18 diffs)
- mochikit/branches/scriptaculous/doc/html/MochiKit/Visual.html (modified) (5 diffs)
- mochikit/branches/scriptaculous/doc/rst/MochiKit/Visual.rst (modified) (4 diffs)
- mochikit/branches/scriptaculous/examples/effects_combi/index.html (modified) (2 diffs)
- mochikit/branches/scriptaculous/examples/simple_dnd/index.html (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
mochikit/branches/scriptaculous/MochiKit/Controls.js
r602 r604 505 505 }); 506 506 } 507 MochiKit.Visual. Appear(update, {duration:0.15});507 MochiKit.Visual.appear(update, {duration:0.15}); 508 508 }; 509 509 this.options.onHide = this.options.onHide || function (element, update) { 510 new MochiKit.Visual.Fade(update, {duration: 0.15});510 MochiKit.Visual.fade(update, {duration: 0.15}); 511 511 }; 512 512 mochikit/branches/scriptaculous/MochiKit/Visual.js
r603 r604 421 421 422 422 MochiKit.Visual.PAIRS = { 423 'slide': [' SlideDown', 'SlideUp'],424 'blind': [' BlindDown', 'BlindUp'],425 'appear': [' Appear', 'Fade'],426 'size': [' Grow', 'Shrink']423 'slide': ['slideDown', 'slideUp'], 424 'blind': ['blindDown', 'blindUp'], 425 'appear': ['appear', 'fade'], 426 'size': ['grow', 'shrink'] 427 427 }; 428 428 … … 1060 1060 ***/ 1061 1061 1062 MochiKit.Visual. Fade = function (element, options) {1062 MochiKit.Visual.fade = function (element, options) { 1063 1063 /*** 1064 1064 … … 1083 1083 }; 1084 1084 1085 MochiKit.Visual. Appear = function (element, options) {1085 MochiKit.Visual.appear = function (element, options) { 1086 1086 /*** 1087 1087 … … 1103 1103 }; 1104 1104 1105 MochiKit.Visual. Puff = function (element, options) {1105 MochiKit.Visual.puff = function (element, options) { 1106 1106 /*** 1107 1107 … … 1133 1133 }; 1134 1134 1135 MochiKit.Visual. BlindUp = function (element, options) {1135 MochiKit.Visual.blindUp = function (element, options) { 1136 1136 /*** 1137 1137 … … 1154 1154 }; 1155 1155 1156 MochiKit.Visual. BlindDown = function (element, options) {1156 MochiKit.Visual.blindDown = function (element, options) { 1157 1157 /*** 1158 1158 … … 1183 1183 }; 1184 1184 1185 MochiKit.Visual. SwitchOff = function (element) {1185 MochiKit.Visual.switchOff = function (element) { 1186 1186 /*** 1187 1187 … … 1208 1208 } 1209 1209 }; 1210 return new MochiKit.Visual. Appear(element, {1210 return new MochiKit.Visual.appear(element, { 1211 1211 duration: 0.4, 1212 1212 from: 0, … … 1218 1218 }; 1219 1219 1220 MochiKit.Visual. DropOut = function (element, options) {1220 MochiKit.Visual.dropOut = function (element, options) { 1221 1221 /*** 1222 1222 … … 1248 1248 }; 1249 1249 1250 MochiKit.Visual. Shake = function (element) {1250 MochiKit.Visual.shake = function (element) { 1251 1251 /*** 1252 1252 … … 1275 1275 }; 1276 1276 1277 MochiKit.Visual. SlideDown = function (element, options) {1277 MochiKit.Visual.slideDown = function (element, options) { 1278 1278 /*** 1279 1279 … … 1320 1320 }; 1321 1321 1322 MochiKit.Visual. SlideUp = function (element, options) {1322 MochiKit.Visual.slideUp = function (element, options) { 1323 1323 /*** 1324 1324 … … 1363 1363 // Bug in opera makes the TD containing this element expand for a instance 1364 1364 // after finish 1365 MochiKit.Visual. Squish = function (element, options) {1365 MochiKit.Visual.squish = function (element, options) { 1366 1366 /*** 1367 1367 … … 1383 1383 }; 1384 1384 1385 MochiKit.Visual. Grow = function (element, options) {1385 MochiKit.Visual.grow = function (element, options) { 1386 1386 /*** 1387 1387 … … 1482 1482 }; 1483 1483 1484 MochiKit.Visual. Shrink = function (element, options) {1484 MochiKit.Visual.shrink = function (element, options) { 1485 1485 /*** 1486 1486 … … 1557 1557 }; 1558 1558 1559 MochiKit.Visual. Pulsate = function (element, options) {1559 MochiKit.Visual.pulsate = function (element, options) { 1560 1560 /*** 1561 1561 … … 1581 1581 }; 1582 1582 1583 MochiKit.Visual. Fold = function (element, options) {1583 MochiKit.Visual.fold = function (element, options) { 1584 1584 /*** 1585 1585 … … 1645 1645 "Highlight", 1646 1646 "ScrollTo", 1647 " Fade",1648 " Appear",1649 " Puff",1650 " BlindUp",1651 " BlindDown",1652 " SwitchOff",1653 " DropOut",1654 " Shake",1655 " SlideDown",1656 " SlideUp",1657 " Squish",1658 " Grow",1659 " Shrink",1660 " Pulsate",1661 " Fold"1647 "fade", 1648 "appear", 1649 "puff", 1650 "blindUp", 1651 "blindDown", 1652 "switchOff", 1653 "dropOut", 1654 "shake", 1655 "slideDown", 1656 "slideUp", 1657 "squish", 1658 "grow", 1659 "shrink", 1660 "pulsate", 1661 "fold" 1662 1662 ]; 1663 1663 mochikit/branches/scriptaculous/doc/html/MochiKit/Visual.html
r603 r604 24 24 25 25 // Add an fade effect to an element 26 Fade('myelement');26 fade('myelement'); 27 27 </pre> 28 28 </div> … … 309 309 <p> 310 310 <a name="fn-fade"></a> 311 <a class="mochidef reference" href="#fn-fade"> Fade(element [, options])</a>:</p>311 <a class="mochidef reference" href="#fn-fade">fade(element [, options])</a>:</p> 312 312 <blockquote> 313 313 <p>Change the opacity of an element until making it disappear.</p> … … 330 330 <p> 331 331 <a name="fn-appear"></a> 332 <a class="mochidef reference" href="#fn-appear"> Appear(element [, options])</a>:</p>332 <a class="mochidef reference" href="#fn-appear">appear(element [, options])</a>:</p> 333 333 <blockquote> 334 334 <p>Slowly show an invisible element.</p> … … 351 351 <p> 352 352 <a name="fn-puff"></a> 353 <a class="mochidef reference" href="#fn-puff"> Puff(element [, options])</a>:</p>353 <a class="mochidef reference" href="#fn-puff">puff(element [, options])</a>:</p> 354 354 <blockquote> 355 355 Make an element double size, and then make it disappear.</blockquote> 356 356 <p> 357 357 <a name="fn-blindup"></a> 358 <a class="mochidef reference" href="#fn-blindup"> BlindUp(element [, options])</a>:</p>358 <a class="mochidef reference" href="#fn-blindup">blindUp(element [, options])</a>:</p> 359 359 <blockquote> 360 360 Blind an element up, changing its vertical size to 0.</blockquote> 361 361 <p> 362 362 <a name="fn-blinddown"></a> 363 <a class="mochidef reference" href="#fn-blinddown"> BlindDown(element [, options])</a>:</p>363 <a class="mochidef reference" href="#fn-blinddown">blindDown(element [, options])</a>:</p> 364 364 <blockquote> 365 365 Blind an element down, restoring its vertical size.</blockquote> 366 366 <p> 367 367 <a name="fn-switchoff"></a> 368 <a class="mochidef reference" href="#fn-switchoff"> SwitchOff(element [, options])</a>:</p>368 <a class="mochidef reference" href="#fn-switchoff">switchOff(element [, options])</a>:</p> 369 369 <blockquote> 370 370 A switch-off like effect, making the element disappear.</blockquote> 371 371 <p> 372 372 <a name="fn-dropout"></a> 373 <a class="mochidef reference" href="#fn-dropout"> DropOut(element [, options])</a>:</p>373 <a class="mochidef reference" href="#fn-dropout">dropOut(element [, options])</a>:</p> 374 374 <blockquote> 375 375 Make the element fall and fade.</blockquote> 376 376 <p> 377 377 <a name="fn-shake"></a> 378 <a class="mochidef reference" href="#fn-shake"> Shake(element [, options])</a>:</p>378 <a class="mochidef reference" href="#fn-shake">shake(element [, options])</a>:</p> 379 379 <blockquote> 380 380 Shake an element from left to right.</blockquote> 381 381 <p> 382 382 <a name="fn-slidedown"></a> 383 <a class="mochidef reference" href="#fn-slidedown"> SlideDown(element [, options])</a>:</p>383 <a class="mochidef reference" href="#fn-slidedown">slideDown(element [, options])</a>:</p> 384 384 <blockquote> 385 385 Slide an element down.</blockquote> 386 386 <p> 387 387 <a name="fn-slideup"></a> 388 <a class="mochidef reference" href="#fn-slideup"> SlideUp(element [, options])</a>:</p>388 <a class="mochidef reference" href="#fn-slideup">slideUp(element [, options])</a>:</p> 389 389 <blockquote> 390 390 Slide an element up.</blockquote> 391 391 <p> 392 392 <a name="fn-squish"></a> 393 <a class="mochidef reference" href="#fn-squish"> Squish(element [, options])</a>:</p>393 <a class="mochidef reference" href="#fn-squish">squish(element [, options])</a>:</p> 394 394 <blockquote> 395 395 Reduce the horizontal and vertical sizes at the same time, using the … … 397 397 <p> 398 398 <a name="fn-grow"></a> 399 <a class="mochidef reference" href="#fn-grow"> Grow(element [, options])</a>:</p>399 <a class="mochidef reference" href="#fn-grow">grow(element [, options])</a>:</p> 400 400 <blockquote> 401 401 Restore the size of an element.</blockquote> 402 402 <p> 403 403 <a name="fn-shrink"></a> 404 <a class="mochidef reference" href="#fn-shrink"> Shrink(element [, options])</a>:</p>404 <a class="mochidef reference" href="#fn-shrink">shrink(element [, options])</a>:</p> 405 405 <blockquote> 406 406 Shrink an element to its center.</blockquote> 407 407 <p> 408 408 <a name="fn-pulsate"></a> 409 <a class="mochidef reference" href="#fn-pulsate"> Pulsate(element [, options])</a>:</p>410 <blockquote> 411 Switch an element between Appear and Fade.</blockquote>409 <a class="mochidef reference" href="#fn-pulsate">pulsate(element [, options])</a>:</p> 410 <blockquote> 411 Switch an element between appear and fade.</blockquote> 412 412 <p> 413 413 <a name="fn-fold"></a> 414 <a class="mochidef reference" href="#fn-fold"> Fold(element [, options])</a>:</p>414 <a class="mochidef reference" href="#fn-fold">fold(element [, options])</a>:</p> 415 415 <blockquote> 416 416 Reduce first the vertical size, and then the horizontal size.</blockquote> mochikit/branches/scriptaculous/doc/rst/MochiKit/Visual.rst
r603 r604 19 19 20 20 // Add an fade effect to an element 21 Fade('myelement');21 fade('myelement'); 22 22 23 23 … … 213 213 ------------------- 214 214 215 :mochidef:` Fade(element [, options])`:215 :mochidef:`fade(element [, options])`: 216 216 217 217 Change the opacity of an element until making it disappear. … … 224 224 ====== ============================================= 225 225 226 :mochidef:` Appear(element [, options])`:226 :mochidef:`appear(element [, options])`: 227 227 228 228 Slowly show an invisible element. … … 235 235 ===== ========= 236 236 237 :mochidef:` Puff(element [, options])`:237 :mochidef:`puff(element [, options])`: 238 238 239 239 Make an element double size, and then make it disappear. 240 240 241 :mochidef:` BlindUp(element [, options])`:241 :mochidef:`blindUp(element [, options])`: 242 242 243 243 Blind an element up, changing its vertical size to 0. 244 244 245 :mochidef:` BlindDown(element [, options])`:245 :mochidef:`blindDown(element [, options])`: 246 246 247 247 Blind an element down, restoring its vertical size. 248 248 249 :mochidef:` SwitchOff(element [, options])`:249 :mochidef:`switchOff(element [, options])`: 250 250 251 251 A switch-off like effect, making the element disappear. 252 252 253 :mochidef:` DropOut(element [, options])`:253 :mochidef:`dropOut(element [, options])`: 254 254 255 255 Make the element fall and fade. 256 256 257 :mochidef:` Shake(element [, options])`:257 :mochidef:`shake(element [, options])`: 258 258 259 259 Shake an element from left to right. 260 260 261 :mochidef:` SlideDown(element [, options])`:261 :mochidef:`slideDown(element [, options])`: 262 262 263 263 Slide an element down. 264 264 265 :mochidef:` SlideUp(element [, options])`:265 :mochidef:`slideUp(element [, options])`: 266 266 267 267 Slide an element up. 268 268 269 :mochidef:` Squish(element [, options])`:269 :mochidef:`squish(element [, options])`: 270 270 271 271 Reduce the horizontal and vertical sizes at the same time, using the 272 272 top left corner. 273 273 274 :mochidef:` Grow(element [, options])`:274 :mochidef:`grow(element [, options])`: 275 275 276 276 Restore the size of an element. 277 277 278 :mochidef:` Shrink(element [, options])`:278 :mochidef:`shrink(element [, options])`: 279 279 280 280 Shrink an element to its center. 281 281 282 :mochidef:` Pulsate(element [, options])`:283 284 Switch an element between Appear and Fade.285 286 :mochidef:` Fold(element [, options])`:282 :mochidef:`pulsate(element [, options])`: 283 284 Switch an element between appear and fade. 285 286 :mochidef:`fold(element [, options])`: 287 287 288 288 Reduce first the vertical size, and then the horizontal size. mochikit/branches/scriptaculous/examples/effects_combi/index.html
r602 r604 14 14 <h3>Here are demos of all combination effects:</h3> 15 15 <div class="demo"> 16 <div class="example" id="demo-effect-appear" onclick=" new MochiKit.Visual.Appear('demo-effect-fade')">17 <span>Click for Visual. Appear demo</span>16 <div class="example" id="demo-effect-appear" onclick="MochiKit.Visual.appear('demo-effect-fade')"> 17 <span>Click for Visual.appear demo</span> 18 18 </div> 19 <div class="example" id="demo-effect-fade" onclick=" new MochiKit.Visual.Fade(this)">20 <span>Click for Visual. Fade demo</span>19 <div class="example" id="demo-effect-fade" onclick="MochiKit.Visual.fade(this)"> 20 <span>Click for Visual.fade demo</span> 21 21 </div> 22 <div class="example" id="demo-effect-puff" onclick=" new MochiKit.Visual.Puff(this)">23 <span>Click for Visual. Puff demo</span>22 <div class="example" id="demo-effect-puff" onclick="MochiKit.Visual.puff(this)"> 23 <span>Click for Visual.puff demo</span> 24 24 </div> 25 <div class="example" id="demo-effect-blinddown" onclick=" new MochiKit.Visual.BlindDown(this)">25 <div class="example" id="demo-effect-blinddown" onclick="MochiKit.Visual.blindDown(this)"> 26 26 <div style="height:120px;"> 27 27 28 <span>Click for Visual. BlindDown demo</span>28 <span>Click for Visual.blindDown demo</span> 29 29 </div> 30 30 </div> 31 <div class="example" id="demo-effect-blindup" onclick=" new MochiKit.Visual.BlindUp(this)">32 <span>Click for Visual. BlindUp demo</span>31 <div class="example" id="demo-effect-blindup" onclick="MochiKit.Visual.blindUp(this)"> 32 <span>Click for Visual.blindUp demo</span> 33 33 </div> 34 <div class="example" id="demo-effect-switchoff" onclick=" new MochiKit.Visual.SwitchOff(this)">35 <span>Click for Visual. SwitchOff demo</span>34 <div class="example" id="demo-effect-switchoff" onclick="MochiKit.Visual.switchOff(this)"> 35 <span>Click for Visual.switchOff demo</span> 36 36 </div> 37 <div class="example" id="demo-effect-slidedown" onclick=" new MochiKit.Visual.SlideDown(this)"><div style="height:120px;">38 <span>Click for Visual. SlideDown demo</span>37 <div class="example" id="demo-effect-slidedown" onclick="MochiKit.Visual.slideDown(this)"><div style="height:120px;"> 38 <span>Click for Visual.slideDown demo</span> 39 39 </div></div> 40 <div class="example" id="demo-effect-slideup" onclick=" new MochiKit.Visual.SlideUp(this)"><div style="height:120px;">41 <span>Click for Visual. SlideUp demo</span>40 <div class="example" id="demo-effect-slideup" onclick="MochiKit.Visual.slideUp(this)"><div style="height:120px;"> 41 <span>Click for Visual.slideUp demo</span> 42 42 </div></div> 43 <div class="example" id="demo-effect-dropout" onclick=" new MochiKit.Visual.DropOut(this)">44 <span>Click for Visual. DropOut demo</span>43 <div class="example" id="demo-effect-dropout" onclick="MochiKit.Visual.dropOut(this)"> 44 <span>Click for Visual.dropOut demo</span> 45 45 </div> 46 <div class="example" id="demo-effect-shake" onclick=" new MochiKit.Visual.Shake(this)">47 <span>Click for Visual. Shake demo</span>46 <div class="example" id="demo-effect-shake" onclick="MochiKit.Visual.shake(this)"> 47 <span>Click for Visual.shake demo</span> 48 48 </div> 49 <div class="example" id="demo-effect-pulsate" onclick=" new MochiKit.Visual.Pulsate(this)">50 <span>Click for Visual. Pulsate demo</span>49 <div class="example" id="demo-effect-pulsate" onclick="MochiKit.Visual.pulsate(this)"> 50 <span>Click for Visual.pulsate demo</span> 51 51 </div> 52 <div class="example" id="demo-effect-squish" onclick=" new MochiKit.Visual.Squish(this)">53 <span>Click for Visual. Squish demo</span>52 <div class="example" id="demo-effect-squish" onclick="MochiKit.Visual.squish(this)"> 53 <span>Click for Visual.squish demo</span> 54 54 </div> 55 <div class="example" id="demo-effect-fold" onclick=" new MochiKit.Visual.Fold(this)">56 <span>Click for Visual. Fold demo</span>55 <div class="example" id="demo-effect-fold" onclick="MochiKit.Visual.fold(this)"> 56 <span>Click for Visual.fold demo</span> 57 57 </div> 58 <div class="example" id="demo-effect-grow" onclick=" new MochiKit.Visual.Grow(this)">59 <span>Click for Visual. Grow demo</span>58 <div class="example" id="demo-effect-grow" onclick="MochiKit.Visual.grow(this)"> 59 <span>Click for Visual.grow demo</span> 60 60 </div> 61 <div class="example" id="demo-effect-shrink" onclick=" new MochiKit.Visual.Shrink(this)">62 <span>Click for Visual. Shrink demo</span>61 <div class="example" id="demo-effect-shrink" onclick="MochiKit.Visual.shrink(this)"> 62 <span>Click for Visual.shrink demo</span> 63 63 </div> 64 64 <div class="example" id="demo-effect-highlight" onclick="new MochiKit.Visual.Highlight(this)"> … … 69 69 <h3>Here are all demos on one single element:</h3> 70 70 <ul class="demo"> 71 <li onclick=" new MochiKit.Visual.Appear('demo-all')">Click for Visual.Appear demo</li>72 <li onclick=" new MochiKit.Visual.Fade('demo-all')">Click for Visual.Fade demo</li>73 <li onclick=" new MochiKit.Visual.Puff('demo-all')">Click for Visual.Puff demo</li>74 <li onclick=" new MochiKit.Visual.BlindDown('demo-all')">Click for Visual.BlindDown demo</li>75 <li onclick=" new MochiKit.Visual.BlindUp('demo-all')">Click for Visual.BlindUp demo</li>76 <li onclick=" new MochiKit.Visual.SwitchOff('demo-all')">Click for Visual.SwitchOff demo</li>77 <li onclick=" new MochiKit.Visual.SlideDown('demo-all')">Click for Visual.SlideDown demo</li>78 <li onclick=" new MochiKit.Visual.SlideUp('demo-all')">Click for Visual.SlideUp demo</li>79 <li onclick=" new MochiKit.Visual.DropOut('demo-all')">Click for Visual.DropOut demo</li>80 <li onclick=" new MochiKit.Visual.Shake('demo-all')">Click for Visual.Shake demo</li>81 <li onclick=" new MochiKit.Visual.Pulsate('demo-all')">Click for Visual.Pulsate demo</li>82 <li onclick=" new MochiKit.Visual.Squish('demo-all')">Click for Visual.Squish demo</li>83 <li onclick=" new MochiKit.Visual.Fold('demo-all')">Click for Visual.Fold demo</li>84 <li onclick=" new MochiKit.Visual.Grow('demo-all')">Click for Visual.Grow demo</li>85 <li onclick=" new MochiKit.Visual.Shrink('demo-all')">Click for Visual.Shrink demo</li>71 <li onclick="MochiKit.Visual.appear('demo-all')">Click for Visual.appear demo</li> 72 <li onclick="MochiKit.Visual.fade('demo-all')">Click for Visual.fade demo</li> 73 <li onclick="MochiKit.Visual.puff('demo-all')">Click for Visual.puff demo</li> 74 <li onclick="MochiKit.Visual.blindDown('demo-all')">Click for Visual.blindDown demo</li> 75 <li onclick="MochiKit.Visual.blindUp('demo-all')">Click for Visual.blindUp demo</li> 76 <li onclick="MochiKit.Visual.switchOff('demo-all')">Click for Visual.switchOff demo</li> 77 <li onclick="MochiKit.Visual.slideDown('demo-all')">Click for Visual.slideDown demo</li> 78 <li onclick="MochiKit.Visual.slideUp('demo-all')">Click for Visual.slideUp demo</li> 79 <li onclick="MochiKit.Visual.dropOut('demo-all')">Click for Visual.dropOut demo</li> 80 <li onclick="MochiKit.Visual.shake('demo-all')">Click for Visual.shake demo</li> 81 <li onclick="MochiKit.Visual.pulsate('demo-all')">Click for Visual.pulsate demo</li> 82 <li onclick="MochiKit.Visual.squish('demo-all')">Click for Visual.squish demo</li> 83 <li onclick="MochiKit.Visual.fold('demo-all')">Click for Visual.fold demo</li> 84 <li onclick="MochiKit.Visual.grow('demo-all')">Click for Visual.grow demo</li> 85 <li onclick="MochiKit.Visual.shrink('demo-all')">Click for Visual.shrink demo</li> 86 86 <li onclick="new MochiKit.Visual.Highlight('demo-all')">Click for Visual.Highlight demo</li> 87 <li onclick=" newMochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)</li>88 <li onclick=" newMochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)</li>89 <li onclick=" newMochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)</li>90 <li onclick=" newMochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)</li>87 <li onclick="MochiKit.Visual.toggle('demo-all', 'blind')">Click for Visual.toggle demo (blind)</li> 88 <li onclick="MochiKit.Visual.toggle('demo-all', 'slide')">Click for Visual.toggle demo (slide)</li> 89 <li onclick="MochiKit.Visual.toggle('demo-all', 'appear')">Click for Visual.toggle demo (appear)</li> 90 <li onclick="MochiKit.Visual.toggle('demo-all', 'size')">Click for Visual.toggle demo (size)</li> 91 91 </ul> 92 92 <div id="demo-all"> mochikit/branches/scriptaculous/examples/simple_dnd/index.html
r602 r604 56 56 }; 57 57 ondrop = function (element, dropElt) { 58 new MochiKit.Visual.Pulsate(dropElt);58 MochiKit.Visual.pulsate(dropElt); 59 59 MochiKit.DOM.getElement('droptext').childNodes[0].nodeValue = "Selected: " + element.id; 60 60 };
