Introduction

Include punaAPI thus;

<script language="javascript" src="punaAPI.js"></script>

The script will write the punaAPI.css reference and hook into events, no other coding is required - except for utilising the API.

Example

How to include a mouse roll over on an image...

<img src="image1.gif" rollover="image2.gif" />

or mask an input...

<input type="text" mask="float"/>
<input type="text" mask="unsignedInteger"/>

These examples are here for me to call on for browser testing. I often update, edit and break them unpredictably so there are no gaurantees regarding their current state.

HTML syntax for tab sets

<div id='exampleTabset' class='tabset'>
	<div>
		<h2>Tab 1 Caption</h2>
		<!-- tab pane contents go here -->
	</div>
	<div>
		<h2>Tab 2 Caption</h2>
		<!-- tab pane contents go here -->
	</div>
	...						
</div>

The tabsets id is not required. Usually the first H2 element in a tab pane is used as the tab caption. But this pane does not include an H2 element, so the script has captioned it according to it's index.

To keep tab-panes from resizing according to their content add a fixed size (and/or other properties) via css;

#exampleTabset .tabpane {
	height:500px;
	width:100%;
	background-color:white;
}

Script Event

Events

The punaAPI script calls two functions that may be over-ridden in the loading page.

puna.beforeLoad()

This function fires before the script re-organizes the elements of the page. Code inserted here can alter global variables before they are used.

puna.onLoad(tabSets)

This function fires after the script has re-organized the page. It provides an array of the tabsets it configured.
tabsets[i].tabpanes[j].tab references a particular tab on the page.
tabsets[i].tabpanes[j].tab.onSelect() is a function that can be over-ridden. It must return true for the tab to be selected and brought forward.

CSS

puna.css includes methods for manipulating style sheets. The following radio buttons change the backgroundColor property for the ".tabset div.tabs .tab" selector (which defines the background for tabs).

Green Blue Grey

<input type="radio" name="css" onclick="puna.css.change('.tabset div.tabs .tab','backgroundColor','green');"/>Green
<input type="radio" name="css" onclick="puna.css.change('.tabset div.tabs .tab','backgroundColor','blue', 3);"/>Blue
<input type="radio" name="css" onclick="puna.css.change('.tabset div.tabs .tab','backgroundColor','#999', document.styleSheets[3]);"/>Grey

The first (green) instruction does not specify a stylesheet, so it will change the selector in ALL style sheets.
The second (blue) instruction specifies a stylesheet by index.
The third (grey) instruction specifies a stylesheet object.

Multiple occurrences of selectors in a stylesheet are all updated. The function puna.css.selector(SelectorName, [StyleSheet], [PreviousSelector]) can be used to iterate through selectors by specifying [PreviousSelector]. The function usually returns the first matching selector (in all stylesheets if none was specified), but will only return the first subsequent selector if [PreviousSelector] is supplied.

Puna.net.nz demonstrates selecting different stylesheets to change a pages appearance (find the 'Switch StyleSheet' link).

DHTML Examples

Pop up menu placed menu anywhere in a page, like this menu

This is an anchor with popup text.

This is an anchor with relative popup text.

Masking

Integer: Float: RegExp [A-Za-z0-9]:

Table rulers

Basic Ruled Table, with stickyness
abc	abc	abc	abc	abc	abc
abc	abc	abc	abc	abc	abc
abc	abc	menus anywhere	abc	abc	abc
abc	abc	abc	abc	abc	abc
abc	abc	abc	abc	abc	abc

non-Sticking Ruled Table
abc	abc	abc	abc	abc	abc
abc	Synchronized	abc	abc	abc	abc
abc	UnSynchronized	abc	abc	abc	abc
abc	abc	abc	abc	abc	abc
abc	abc	abc	abc	abc	abc

Sticky Ruled Table, with synchronized and unsynchronized check boxes
abc	Synchronized	abc	Synchronized	abc	abc	abc	abc	abc
abc	Synchronized	abc	UnSynchronized	abc	abc	abc	abc	abc
Still sticky				abc	abc	abc	abc	abc
abc	UnSynchronized	abc	UnSynchronized	abc	abc	abc	abc	abc
abc		UnSynchronized	abc	Synchronized	abc	abc	abc	abc	abc