ZZ DHTML Framework

Allows the dynamic content of an HTML page to be specified in JSON. This data can then be displayed on the page using standard HTML attributes. When the JSON data changes (such as via an AJAX call) all or part of the page can be easily refreshed.

For example:

Let's say we have the following JSON object defined on our page:
var myData = { Watterson: "Calvin and Hobbes", Shulz: "Peanuts", Adams: "Dilbert", Herriman: "Krazy Kat", Gould: "Dick Tracey" }

We can then display it in an HTML table with the following HTML code:
<table border="1" class="zzLoop" title="#{{myData^comic}}#">
<tr> <td class="zzValue" title="#{{zzLoop.comic.id + ': ' + zzLoop.comic.value}}#"> </td> </tr>
</table>

(Short Explanantion: The first line creates a loop for the containing elements - looping through "myData" and setting "zzLoop.comic" to each element. The second line displays the item for the current iteration. "id" gives the Id of the element, and "value" gives the value.)

And then this would appear: (You can view source. This is the same as above)

Let's see how to create an option list out of JSON data. This will require the setting of HTML attributes (if we want to set the option values... which we do).

Let's loop through an array for purpose of demonstration:
var myData2 = [ "one", "two", "three", "four", "five" ]

We will use the following code to display this as an option list: (Note how an element can be multiple things - more on this below)
<select class="zzLoop" title="#{{myData2^num}}#">
<option class="zzValue zzAttr" title="#{{zzLoop.num.value}}##{{value: zzLoop.num.id}}#"></option>
</select>

The value attributes on the select list above have been set to the indexes of the array (0..4) (Note that we could have also displayed a first element, such as "--Select an Option--", but this is a bit buggy in the alpha version at the time of this writing.)

And to finish off our demonstration, we bring in events, nested loops, sorting, and manually refreshing changed data. (To change some data, click on the item - in a real scenario, the data would likely be changed via an Ajax call.) Note how the family names automatically resort when changed (the heads of each list).

The data for this example is:
data = { smith: [ 'albert', 'john' ] , qwerty: [ 'steve', 'melinda', 'billy', 'homer', 'bart' ] , jones: [ 'bill', 'brad', 'joe' ] };

The HTML source for this is:
<table id="families" class="zzLoop" title="#{{data^family^zzUtil.sortAlphaById}}#">
<tr><td id="family" class="zzValue zzEvent" title="#{{zzLoop.family.id + ':'}}##{{onclick: familyClick}}#"></td></tr>
<tr id="names" class="zzLoop" title="#{{zzLoop.family.value^name}}#">
<td id="name" class="zzValue zzEvent" title="#{{ (parseInt(zzLoop.name.id) + 1) + ') ' + zzLoop.name.value }}##{{onclick:nameClick}}#"></td>
</tr>
</table>

The event handlers are passed the indexes of the object/array that was acted upon and the event (both in Firefox and IE). View the source to see more details on the events (comments are contained in the page)

You can download the source: here

Manually manipulating elements and a bunch of other features are supported. (Please note that the current release is alpha, so bugs still exist.)

And now here for the detailed documentation: (coming soon)