CSS Parameters and element attributes

Performer aims to give website developers access to JavaScript functionality without having to write JavaScript code. That leaves us with a problem: how do we tell the JavaScript functions what we want them to do? Or, more technically, how do we set parameters?

Here's a simple example. The Toggler function allows you to toggle the visibility of an element when a link is clicked. Here's the code:

<p><a class="toggler targetEl-showme">Click here to show the paragraph below<a><p>
<p id="showme" class="hider">Here I am!<p>

You can see the Toggler link has a CSS class of "toggler" and another CSS class of "targetEl-showme". The "targetEl" is the CSS parameter, in this case the ID of the element we wish to toggle, and the "showme" bit the value.

Putting extra parameters into the CSS classes of Performer elements means we don't have to rely on element attributes (such as rel and rev) which may become deprecated. We can also style Performer elements based on their CSS parameters, for example:

a.toggler { color: red }

This will set all Toggler links red.

a.toggler.targetEl-showme { color: green }

This will set all Toggler links which toggle the element with ID "showme" green.

We can also add multiple CSS parameters. See this example for Loader:

<p id="loadedcontent"</p>
<p>class="loader targetEl-loadedcontent targetPage-/docs/time">Load content...<p>

Here you can see the Loader CSS class, and two other classes:

  • targetPage-/docs/time: the target page to fetch the content from
  • targetEl-loadedcontent: the target element to load the content into

A Performer CSS parameter is really easy to code. Just put the name; targetPage; then a dash -; then the value of the parameter; /docs/time. There are many Performer functions which require these CSS parameters, and quite a few that accept optional ones for additional customisation of the function being used. Look through the Documentation for full details.

Note for long-time users of Performer

From Performer version 0.7 all parameters for Performer functions use CSS parameters, rather than element attributes (such as rel and rev) to maintain compatibility with future versions of HTML. The old element attributes with continue to work, but are deprecated and support will eventually be removed from Performer.