Script. aculo. US development series (1): getting started

Script. aculo. the US development series is some of my recent new discoveries. In this series, I will share my script with you. aculo. development Experience in us, because there are still few Chinese-related materials, I hope you can do your best. You are welcome to participate in the discussion.

Start now

The script. aculo. US framework is an excellent open-source Ajax framework based on the prototype framework. If you are not familiar with the prototype framework, refer to my prototype1.5.0 APIs article.ArticleIn this article, I have translated the official documentation for version 1.5.0 and made a simple API Search, hoping to be helpful to your development.

Script. aculo. Us encapsulates many controls: Common aotucomplete, accordion, Slider, etc. There are a lot of animation effects and drag and drop. You only need a few simple lines.CodeYou can achieve the above effect.

By the way, the Framework name is a bit strange, because their official website is http: // script. aculo. us, like prototype, is a masterpiece of MIT talents. so if you want to get started, you can download the latest code from the county official website. After the code is decompressed, the Lib, SRC, and test folders and some folders without suffixes will be downloaded, the LIB folder contains prototype that supports the current version. there will be seven JS files in the JS and SRC folders. Extract the above eight JS files and put them in your project, and everything will be OK. reference Methods to files

< Script Type = "Text/JavaScript" SRC = "Lib/prototype. js" > </ Script >
< Script Type = "Text/JavaScript" SRC = "Lib/scriptaculous. js? Load = effects, controls" > </ Script >

Load = effects after the path, controls means to load only effects. JS and controls. JS files. In this way, modules that are not used will not be loaded, Saving network traffic. If load is not added, builder, effects, dragdrop, controls, and sliderfiles will be loaded by default, you can also directly load JS files for each file, such:

< Script Type = "Text/JavaScript" SRC = "Lib/prototype. js" > </ Script >
< Script Type = "Text/JavaScript" SRC = "Lib/effects. js" > </ Script >

The above Code directly loads effects. JS,ProgramThere will be no problems during running. Write a line of JS

< Script Type = " Text/JavaScript " >
Function Puff ()
{
VaROanimation=NewEffect. Puff ("Imgpuff");
}
Event. Observe ($ ('btntest'), 'click', puff );
</ Script >

Run it, and a very cool effect will come out. note that the code written must be in window. it can be run only after the onload event. Otherwise, an error is reported. The reason is very simple, only in the window. the Dom is initialized only after onload.

Similar classes include appear, fade, blindup, blindown, switchoff, dropout, shake, slidedown, slideup, Squish, and grow12. These animations are used in scripts. aculo. in us, it is called combine effects. Compared with core effects, coreeffects will be introduced in the next article.

Parameters Used

In the constructor of each class, the first parameter is the element ID of the application effect, and the second parameter is a JSON object. The default parameter is

Effect. defaultoptions =   {
Transition: effect. transitions. sinoidal,
Duration: 1.0 , // Seconds
FPS: 60.0 , // Max. 60fps due to effect. Queue implementation
Sync: False , // True for combining
From: 0.0 ,
To: 1.0 ,
Delay: 0.0 ,
Queue: 'parallel'
}

Parameter description

• Transition: AboutAlgorithmEnum type: sinoidal (default), linear (linear), reverse (function), flicker, wobble, pulse, none, full. These parameters are actually a pos function, the returned value ranges from 0 ~ Between 1
• Duration: animation Duration: 1.0 seconds by default
• FPS: the number of frames per second. The default value is 60.
• Sync: asynchronous. It is set to true when parallel is animated, generally false.
• From/to: Start/end offset Ratio
• Delay: A Stay event before an animation is executed
• Queue: 'parallel'

New Effect. Puff ( " Imgpuff " , {Delay:1.0, Duration:1.5} );

The animation lasts for 1.0 s, and the animation lasts 1.5 s.

The above parameters apply to all animations (including core effects). It must be noted that some animation parameters are unique to each other. For more information, seeSource code

Effect implementation

Effect converts all animations to the starting and ending State, regardless of the color, pixel, and transparency. First, the animation offset (s) is calculated based on the sustained event and the number of frames per second.
Offsetperfrequency = offset/(duration * FPS)
Currentstate (POS) = originalstate + (originalstate-finnalstate) * transition (POS)
The Update () method is called in each frame to overwrite the view.