<div> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> <!--Supposedly loading just this one will load all others, but that did not work for me. --> <!--Also, if using xhtml then comment out the 'document.write' in scriptaculous.js to avoid error msg. --> <script src="js/effects.js" type="text/javascript"></script> <script src="js/builder.js" type="text/javascript"></script> <script src="js/dragdrop.js" type="text/javascript"></script> <script src="js/controls.js" type="text/javascript"></script> <script src="js/slider.js" type="text/javascript"></script> </div>
new Effect.Parallel( [ new Effect.MoveBy('parallel', -400, 0, { sync: true }), new Effect.Opacity('parallel', { sync: true, to: 0.0, from: 1.0 } ) ], { duration: 5, afterFinish: function(effect) { Element.hide('parallel'); } } );
Option | since | Description |
duration | V1.0 [2] | Duration of the effect in seconds, given as a float. Defaults to 1.0. |
fps | V1.0 [3] | Target this many frames per second. Default to 25. Can’t be higher than 100. |
transition | V1.0 [4] | Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble and Effect.Transitions.flicker. |
from | V1.0 [5] | Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0. |
to | V1.0 [6] | Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0. |
sync | V1.0 [7] | Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel(). |
queue | V1.5 [8] | Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:’front/end’, scope:’scope’, limit:1}. For more info on this, see Effect Queues [9]. |
direction | ?? | Sets the direction of the transition. Values can be either ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ or ‘center’ (Default). Applicable only on Grow and Shrink effects. |
Callback | since | Description |
beforeStart | V1.0 [10] | Called before the main effects rendering loop is started. |
beforeUpdate | V1.0 [11] | Called on each iteration of the effects rendering loop, before the redraw takes places. |
afterUpdate | V1.0 [12] | Called on each iteration of the effects rendering loop, after the redraw takes places. |
afterFinish | V1.0 [13] | Called after the last redraw of the effect was made. |
function myCallBackOnFinish(obj){ alert("the Element's id the effect was applied to is :" + obj.element.id); } function myCallBackOnStart(obj){ alert("the Element object the effect will be applied to is :" + obj.element); }
new Draggable('drag',{revert: true});
Droppables.add('drop', {accept: 'dragme',
hoverclass: 'highlight'});
Sortable.create("firstlist", {dropOnEmpty:true, containment:["firstlist","secondlist"], constraint:false}); Sortable.create("secondlist", {dropOnEmpty:true, handle:'handle', containment:["firstlist","secondlist"], constraint:false});
<div id="track1" style="width: 400px; background-color: rgb(170, 170, 170); height: 5px;"> <div id="handle1" class="selected" style="width: 10px; height: 10px; background-color: rgb(255, 0, 0); cursor: move; left: 0px; position: relative;"/> </div> <div id="debug1" style="padding-top: 5px;"></div>
new Control.Slider('handle1','track1',{ onSlide:function(v){$('debug1').innerHTML='slide: '+v}, onChange:function(v){$('debug1').innerHTML='changed! '+v}});
<label for="bands_from_the_70s">Your favorite rock band from the 70's:</label> <br /> <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" style="" /></p> <div class="page_name_auto_complete" id="band_list" style="display:none"></div> <script type="text/javascript"></script> <script type="text/javascript" src="autocomplete.js"></script>
new Autocompleter.Local('bands_from_the_70s', 'band_list', [...])
new Ajax.Autocompleter("autocomplete",
"autocomplete_choices", "/url/on/server", {});
new Ajax.InPlaceEditor('editme', './index.html');
Click me, click me!
new Ajax.InPlaceEditor('editme2', '/demoajaxreturn.html', {rows:15,cols:40});
Click me to edit this nice long text.
new Ajax.InPlaceCollectionEditor(
'tobeedited2', '_ajax_inplaceeditor_result.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
value: 0,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
Click me NOW!.
This talk available at http://jmvidal.cse.sc.edu/talks/scriptaculous/
Copyright © 2009 José M. Vidal
.
All rights reserved.
09 March 2007, 04:16PM