Monday, April 20, 2009

Unobtrusive js classes

jsPopup

We'll use this class to open a popup centered both horizontally and vertically. The URL of the popup is the href target of the html a tag.

Example:

<a class="jsPopup" href="www.google.es">Google</a>

To stablish other values for the opened window other that the default we can add a new attribute to the html a tag called aPopup using a json syntax:

Example:

<a class="jsPopup" href="www.google.es" aPopup="( 'width':'500 ','height':'500')">Google</a>

If you don't establish the size, a default value of 800x600 pixels will be assigned to the width and height respectively.

jsHideShow

For all element with class jsHideShow, clicking on one of these elements will toggle the maximize/minimize state of a certain div. Both elements have an id.

Example:

<img id="buttonXXX" class="jsHideShow" src ="..." aHideShow="('imgExpand:'...','ImgCollapse:'...') "/>
<div id="contentXXX">...</ div>

Example:

<img id="buttonSearch" class="jsHideShow" src="expand.gif' aHideShow="{'imgExpand':'expand.gif','imgCollapse':'collapse.gif'}" />
<div id="contentSearch">...</ div>

We can stablish an initial state for a block. Example of a block initially minimized:

<img id ="buttonDocs" class="jsHideShow" src ="expand.gif" aHideShow="('imgExpand:expand.gif','imgCollapse:collapse.gif','start:min'}" />
<div id="contentDocs">...</div>

No comments: