|
The biggest challenge of dynamic web design is to solve the
compatibility problem caused by browsers. Currently, a lot of designers
choose to design dynamic web pages for only one browser (mostly IE) and
give up supporting other browsers. In order to solve this problem, we
provide a cross-browser development tool. With ZebuDOM, you can build
dynamic web pages supporting IE4, IE5, NS4, and NS6 at the same time
without having to care about the differences among browsers.
It is very simple to use ZebuDOM. You have to include zebudom.js in
HEAD, then you can use all functions provided by ZebuDOM.
For example:
var e = document.zbGetElementById("myid");
e.zbSetBackgroundColor("red");
e.zbAddEventListener("click",
doClick, false);
zbGetElementById, zbSetBackgroundColor, and zbAddEventListener are
provided by ZebuDOM. The first line is an example of using
zbGetElementById to access to an element in a document. The second line
uses zbSetBackgroundColor to set the background color of the element to
red. The last line uses zbAddEventListener to register a mouse click event
for the element. The above lines can work under IE4, IE5, NS4, and NS6
without having to modify a bit.
With ZebuDOM, designers need not know any detailed information about
each browser when developing dynamic web pages.
| ZebuDocument |
 |
After including zebudom.js, the original document object will be
changed to the ZebuDocument. That is, the following functions will be
attached to the document object:
| zbGetElementById(/*a list of IDs*/) |
Returns the element whose ID is given by
argument. |
| zbGetForms(layer) |
Returns a collection of FORM objects. |
| zbGetImages(layer) |
Returns a collection of IMG objects. |
| zbGetLinks(layer) |
Returns a collection of all A objects that specify
the href attribute. |
| ZbGetAnchors(layer) |
Returns a collection of all A objects that specify
the name attribute. |
| zbAppendLayer(id, width, height, parentLayer) |
Creates a new element in the document. |
| zbRemoveLayer(element) |
Removes the specified element from the
document. |
| ZebuElement |
|
Any element retrieved by zbGetElementById or created by zbAppendLayer
is a ZebuElement, which has the following functions:
| zbGetBackgroundColor() |
Retrieves the background of the element. |
| zbSetBackgroundColor(color) |
Sets the background of the element. |
| zbGetClass() |
Retrieves the class of the element. |
| zbSetClass(className) |
Sets the class of the element. |
| zbGetLocation() |
Retrieves the location of the element. |
| zbSetLocation(x, y) |
Sets the location of the element. |
| zbGetLocationOnPage() |
Retrieves the page location of the element. |
| zbGetSize() |
Retrieves the size of the element. |
| zbSetSize(width, height) |
Sets the size of the element. |
| zbGetClip() |
Retrieves the clip region of the element. |
| zbSetClip(clip) |
Sets the clip region of the element. |
| zbGetVisibility() |
Retrieves the visibility of the element. |
| zbSetVisibility(visibility) |
Sets the visibility of the element. |
| zbGetZIndex() |
Retrieves the stacking order of the element. |
| zbSetZIndex(zIndex) |
Sets the stacking order of the element. |
| zbGetContent() |
Retrieves the content of the element. |
| zbSetContent(content) |
Sets the content of the element. |
| zbLoad(pagefile, pageId, onload) |
Loads an external file into the element. |
| zbGetLoadDocument() |
Retrieves the ZebuDocument from the loaded external
file. |
| ZebuEvent |
|
Both ZebuDocument and ZebuElement support the following event handling
functions:
| zbAddEventListener(type, handleEvent, useCapture) |
Adds an event listener to the document or the
element. |
| zbRemoveEventListener(type, handleEvent,
useCapture) |
Removes an event listener from the document or the
element. |
| More Tools |
|
ZebuDT and
ZebuVWT are powerful tools
based on ZebuDOM so that they can work with IE4, IE5, IE6, NS4, and
NS6.
|
