Let's say that we want to cause an image to fade half way down when the mouse is over the image In this example, the image has it's ID attribute set to "idmini-icon".
Before fade:
After fade:
The ProtoScript for this would be:
$proto('img#idmini-icon', {
Mouseover: {},
onMouseover: {
Fade: {
opacity: {to: 0.5},
duration: 0.1
}
}
});
What if we wanted to make the image fade back up to 100% when the mouse leaves the icon? The ProtoScript for this would look like:
$proto('img#idmini-icon', {
Mouseover: {},
onMouseover: {
Fade: {
opacity: {to: 0.5},
duration: 0.1
}
},
Mouseout: {},
onMouseout: {
Fade: {
opacity: {to: 1.0},
duration: 0.1
}
}
});
The interaction is trivial, but let's break down the parts of the script so that we can understand how to build more complex interactions.
In the example above 'img#idmini-icon' refers to an element of type <img> with it's ID set to 'idmini-icon'. The string 'img#idmini-icon' is special syntax that allows you to select an element or elements from the page for adding events and behaviors. In the default configuration of ProtoScript we are using the jQuery Selector syntax which supports CSS-1, CSS-2, CSS-3 and XPath selector syntax.
All ProtoScript behaviors operate on elements that have been selected. (ProtoScript supports a plug-in architecture allowing different selector technologies to be used.) The first thing specified in any ProtoScript is the selector for interface elements. Of course, often it is necessary to target different a different element or elements in a nested behavior. This is accomplished by setting the target attribute on any callback or behavior. More on that later.
Core to ProtoScript is a set of behaviors that bring the interface elements selected alive. The default set of behaviors are built on the YUI library. They include behaviors that implement events (Click, Dblclick, Mousedown, Mouseup, etc.), behaviors that implement transition effects (Fade, Move, Spotlight, etc.), behaviors that implement Ajax (AjaxInnerHTML), behaviors that implement various interactions (Hide, Show, Open, Close, ToggleOpenClose, etc.) as well as others.
Simply select interface elements (as the initial selection or by later using the target attribute) and nest behaviors under the elements selected.
You can defer behavior interaction to when a certain event occurs by placing behaviors inside callbacks. In our example above, we specified the Mouseover behavior which has a corresponding onMouseover Callback. By placing the Fade behavior inside the onMouseover the Fade only occurs when the mouse is over the targeted element(s).
Another example of a callback is with behaviors that implement animations. In the YUI library, the Animation utility provides three interesting moments (callbacks): onStart, onTween and onComplete. The Fade behavior in the default YUI behavior set implements these three callbacks. So if you wanted to have the image drop to 50% on mouseover then back up to 100% all within about .2 seconds you could do it like this:
$proto('img#idmini-icon', {
Mouseover: {},
onMouseover: {
Fade: {
opacity: {to: 0.5},
duration: 0.1,
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.1
}
}
}
}
});
Since the Fade behavior supplies the onComplete callback, we can attach any number of behaviors or nested behaviors and callbacks to create compound effects allowing us to define more complex interactions.
The following examples illustrate a number of the behaviors in the default YUI behavior set. In addition, a few examples illustrate the experimental MooTools behavior set.
Protokit has been most recently tested and works on these browsers:
To use the default YUI ProtoScript, include the following CSS and JavaScript files in your HTML page.
REVISIT*****
<script src="yahoo.js"></script>
<script src="event.js"></script>
<script src="container_core.js"></script>
<script src="dom.js"></script>
<script src="animation.js"></script>
<!-- Source file -->
<script src="carousel.js"></script>