Overview

Every tag included in the library has been developed taking into account that it should be configurable not only in terms of the effect itself but also the moment when it starts executing.

That's why all of them have several common configuration attributes to achieve that objective:

  • shootersSelector: CSS selector used to identify the element/s that will trigger the effect.
  • shooterId: used to identify (by means of the HTML element id attribute) the element that will trigger the effect.
  • targetId: used to identify (by means of the HTML element id attribute) the element the effect will be applied to.
  • event: used to identify the event that, when fired on the shooterId element, will cause the effect to start.

Available Tags

The current library tags perform tasks related to effects, asynchronously loaded content and forms.

Effects Tags

If we consider the tags themselves, there are also some details that are common to all of them and will be explained below.

  • The following properties are useful just in case you need to execute any JavaScript code with the effect:
    • beforeStart: call to the JavaScript function to be executed before the effect starts rendering.
    • beforeUpdate: call to the function to be executed on each iteration of the effect rendering loop (before its redrawn).
    • afterUpdate: call to the function to be executed on each iteration of the effect rendering loop (after its redrawn).
    • afterFinish: call to the JavaScript function to be executed once the effect has finished.
  • These ones will be more commonly used:
    • shootersSelector: CSS selector used to identify the element/s that will trigger the effect.
    • transition: Sets a function that is responsible of how much the target element changes from an iteration to the next one. Available transitions are:
      • MochiKit.Visual.Transitions.sinoidal (default).
      • MochiKit.Visual.Transitions.linear.
      • MochiKit.Visual.Transitions.reverse.
      • MochiKit.Visual.Transitions.wobble.
      • MochiKit.Visual.Transitions.flicker.
      • MochiKit.Visual.Transitions.pulse.
    • duration: it is a float representing how many seconds the effect will last (default is 1.0).
    • from: it is a float between 0.0 (default) and 1.0 representing the starting point of the transition.
    • to: it is a float between 0.0 and 1.0 (default) representing the end point of the transition.
    • fps: it's an integer representing how many frames per second will be targeted. The maximum value is 100 and the default one is 25.
    • queue: when having several effects on the same element, it allows you to set the order in which they will be fired. That way, you can avoid problems when trying to fire several effects at the same time on the same DOM object. The effects will be added to the queue and executed in order. This attribute can be configured in two different ways:
      • with a String whose possible values are 'start', 'end', 'break' and 'parallel' to queue the effect in the global effects queue at the beginning, end, with no other (every other breaks when this effect starts) or with others(in this case, there is only one queue for all the effects declared in the page).
      • with an Object in the form {position:'start|end|break|parallel', scope:'scope', limit:1} where:
        • position it refers to the order the effects will be queued in. The possible values are start, end, break and parallel meaning the as in the previous case.
        • scope represents the queue the effect will be attached to. This allows you to have different queues for different groups of effects. i.e: 'menuQueue', 'cartQueue' and so on.
        • limit is the maximum number of effects to be in the queue at the same time.
Tag name Description
simple-effect It allows the creation of general effects that will be performed either when the page is loaded or when an event gets fired. It will depend upon how it was configured. Available ones are:
* Appear.
* Fade.
* Puff.
* DropOut.
* Shake.
* SwitchOff.
* Squish.
* Fold.
* Shrink.
* Opacity.
blind It performs a window blind.
grow It allows an element to change its size.
highlight It performs an element change of color.
pulsate When this effect is applied to an element, it appears and disappears alternatively during a certain amount of time as if it were being pressed.
slide It makes an element scroll both up and down.
toggle This tag may be configured to perform three different effects:
* Appear.
* Blind.
* Size.
* Slide.
When applied to an element, such an element changes its state between Appear-Fade, Blind Up - Blind Down, Slide Up - Slide Down depending on the effect the element was configured with.
multiple-tab This tag allows the configuration of several elements that will act as tabs and, others, as their content so that, when one tab is clicked, its content is displayed whereas the content of the rest of them becomes hidden.
Effects tags

Content Tags (Asynchronously loaded content - Ajax)

These tags allow you to include asynchronously loaded data in the page. It may be configured in a variety of ways to meet your needs: enable/disable pagination, refreshing, style properties and much more.

Tag name Description
async-table It allows a table request to be performed asynchronously. Both the parameters submitted to the server and the time when the request starts can be configured.
link Used to configure an asynchronously loaded paginated table so that it can include links to the next and previous pages.
xslt-transform It displays the HTML resulting from the merge of an XML and an XSL file.
async-content-loader It fetches some data from a given URL and inserts it in the page.
Asynchronous content

Forms Tags

These tags allow you to, dynamically, modify the appearance of a form.

Tag name Description
form-rules It allows the fields included in a form to appear and disappear from the screen depending on the value of some form fields.
form-rule Used to configure a form so that its fields may be either displayed or hidden. This tag describes what fields are to be displayed depending on one field value.
async-combo Used to load and insert data in a combo box asynchronously.
dual-combo Used to update, asynchronously, the data in one combo box based in the value of another one.
Form tags