JSTags: JavaScript Tags Library


Nowadays more and more webs need to include dynamic effects, anymations, asynchronous requests and so on. That's why JSTags has been created.

JSTags is a Java Open Source Tags Library whose aim is to provide a set of easy-to-use tags which perform common tasks that, otherwise, would have to be implemented by means of JavaScript code. By using JSTags, it is as simple as including a tag instead of having to create JavaScript code yourself...you just forget about that part.


JSTags 1.1 main features are:

  • Easy-to-use tags.
  • Namespace based JavaScript generated code.
  • Fully compatible with any JavaScript library your project may make use of.

It comes with a set of tags related to:

  • Effects: they allow to easily create effects on different HTML elements.
  • Asynchronously loaded content: tables can be loaded asynchronously from the server and XML + XSL transformations performed.
  • Forms: form fields can be either displayed and hidden dynamically.

Available Tags

The following tags are currently available.

  • Effects related tags:
    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: the element it is applied to, will appear on the screen.
    * Fade: the element it applies to, will disappear from the screen.
    * Puff: the target element will be swollen while its opacity decreases until it reaches 0 and the target disappears completely from the screen.
    * DropOut: the target element will fall down while its opacity decreases until it reaches 0 and the element disappears.
    * Shake: the element is shaken horizontally.
    * SwitchOff: this effect has a tv-style switch off.
    * Squish: it makes an element reduce its size until it disappears.
    * Fold: the target element disappears by reducing its size: first, the height is reduced and, then, its width.
    * Shrink: it makes an element reduce its size until it disappears.
    * Opacity: the element opacity changes and it gets either more or less opaque.
    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 four different effects: Appear, Blind, Size and 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.

  • Content related tags (Asynchronously loaded content - Ajax):
    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.

  • Forms related tags:
    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.