This script will give you a good idea of what Dojo is meant for and how to use it in your webpages. Here is a good article for getting started with dojo. The latest release of Dojo offers any cool animation effects, which have rendered my old collapsible panel scripts obsolete. We will be using Dojo’s default Drag&Drop functionality, along with the ‘wipeIn’ and ‘wipeOut’ animation .Our purpose is to combine these functionalities with minimum code possible to achieve our functionality.

The Collapsible panel
The figure below shows the basic layout for the panel(without applying CSS).

It is basically a table with two rows. The first row has two cells, one of which has + and – Images. The second row, contains a div , that will hold the content. Passing the id of this div to ‘wipeIn()’ and ‘wipeout()’, will case the panel to minimize and maziminse.Given below is the markup and script for the panel.

<table id="w1" cellspacing=0><tr class="TRtitle">
<td class="TDtitle">Dojo</td><td class="tdicons">
<img onclick="wipeOut('l1')" alt=- src="images/minus.gif"/>
<img onclick="wipeIn('l1')" src="images/plus.gif" /></td></tr>
<tr><td colspan=2>
<div id="l1" class="DIVcontainer">
<div class="DIVinner">
Dojo is a cool javascript library.You can find more on DOJO here.This
example uses drag&drop and animations from Dojo
</div>
</div>
</td></tr>
</table>

On the ‘click’ events of the(-/+) images, we call ‘wipeIn’ and ‘wipeOut’ respectively.I have added an extra line in these functions, so that wipeIn and wipeOut action only happens, when it is meant to be. I mean an already hidden panel, need not be wiped in and a visible panel , need not be wipedOut. Here, I needed to add the following line to get the code working in FireFox. In IE the line ‘dojo.style.getStyle(elId,”height”)’ returns ‘auto’ while in FireFox it returns the actual height (eg 100px).

function wipeOut(elId){
if(dojo.style.getStyle(elId,"height")!='auto' && dojo.style.getStyle(elId,"height")!='100px' )return;
dojo.fx.wipeOut(dojo.byId(elId), 300);}

function wipeIn(elId) {
if(dojo.style.getStyle(elId,"height")!='0px')return;
dojo.fx.wipeIn(dojo.byId(elId), 300);}

Drag and Drop
With Dojo drag and drop can be implemented using DIV’s. Using javascript, a DIV can be made to act as a ’source’ or ‘target’. A ’source’ is something that can be dragged, and a target is something onto which a ’source’ can be dropped . Following script shows creating of sources and targets.

function init(){
	new dojo.dnd.HtmlDragSource("w1", "left");
	new dojo.dnd.HtmlDragSource("w2", "left");
	new dojo.dnd.HtmlDragSource("w3", "left");
	new dojo.dnd.HtmlDragSource("w4", "right");
	new dojo.dnd.HtmlDragSource("w5", "right");
	new dojo.dnd.HtmlDragSource("w6", "right");
	new dojo.dnd.HtmlDragSource("w7", "center");
	new dojo.dnd.HtmlDragSource("w8", "center");

	new dojo.dnd.HtmlDropTarget("leftdiv", ["left","right"]);
	new dojo.dnd.HtmlDropTarget("rightdiv",["left","right"]);
	new dojo.dnd.HtmlDropTarget("centerdiv",["center"]);
	}

Here, ‘left’,’right’ and ‘center’ represent a ‘type’ of source. While declaring a target, you can pass an array of typenames , indicating that this target can accept following types of sources. For example, the target ‘leftdiv’ can accept any source of ‘left’ or ‘right’ type. This is all we do to implement drag and drop. Finally we ‘connect’ the init() function to the ‘loaded’ event , so that it executes only after the whole document has been loaded.

dojo.event.connect(dojo, "loaded", "init");

Finally
Check out the demo page to see it in action.There you will find the proper working code. The best part is we could make pretty descent looking panels, within very little time.Also we used very little ‘glue’ code, so we won’t require much testing. With some creativity and cool graphics these panels can be made to look very professional.

Demo: http://ashishware.com/Dndwipe.html

Download: http://download.dojotoolkit.org/release-1.2.3/dojo.js

Source: http://ashishware.com/Dojo_Panel.shtml

Related Listings:

1. Collasible Draggable Panels Create a collapsible and draggable panels using javascript. Such UI...
2. DHTML API, Drag & Drop for Images and Layers – Ajax – Javascript A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality...
3. Drag and drop table content with JavaScript With few lines of JavaScript, you can drag and drop...
4. Drag and Drop Accordion Script The Accordion widget and its InfoPanel are components that can...
5. Drag, Drop Lightbox with YUI Yahoo! User Interface Library (YUI) provides a very handy class...

Do you like this post?

Email: