Monday, April 20, 2009

Unobtrusive js classes


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.


<a class="jsPopup" href="">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:


<a class="jsPopup" href="" 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.


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.


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


<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: