Appendix C. JavaScript DHTML Libraries
In this chapter
▪ Accesskey Underlining Library (AUL)
Accesskey Underlining Library (AUL)
Web site: www.gerv.net/software/aul/
License: New BSD
AUL is a JavaScript library that, when included, adds additional behaviors to your HTML page based on existing accesskey attributes. It works by taking HTML elements that have accesskey attributes and adding underlines under the matching characters within the label. For example, a button defined as <button accesskey=”b”>button</button> would be displayed with an underline under the b. This allows you to easily match accesskey display standards without filling your HTML with extra markup.
Behaviour
Web site: http://bennolan.com/behaviour/
License: BSD
Behaviour is a small library that is used to attach JavaScript events to an HTML page without adding additional markup. This is accomplished by using CSS selectors, which apply JavaScript to matching HTML elements. Such a matching system is useful for keeping markup clean, and it helps make your JavaScript more reusable. The library is bundled with HTML_AJAX, and its usage is explained in Chapter 9, “Libraries Used in Part II: HTML_AJAX.”
cssQuery()
Web site: http://dean.edwards.name/my/cssQuery/
License: LGPL
cssQuery() is a cross-browser JavaScript function that allows you to query the DOM using CSS selectors. It includes support for CSS1 and CSS2 selectors and for parts of CSS3. It’s useful for creating your own behaviors, such as functionality, and for trying out new CSS3 selectors that are not yet supported in all browsers.
Dean Edwards IE7
Web site: http://dean.edwards.name/IE7/
License: LGPL
Dean Edwards IE7 is a browser-compatibility library that uses JavaScript to extend Internet Explorer 5 and 6, giving these browsers support for newer CSS standards. It also fixes various layout bugs and contains a fix for transparent PNGS. It works quite well and can be an easy addition for a site that is targeted toward a standards-compliant browser that later needs to be made to work in IE. On large and complex sites, IE7 can add some additional load times and can cause page reflows after the initial layout is done. However, if you use IE7 enough to understand its drawbacks, it can be a useful tool for supporting IE6.
DOM-Drag
Web site: www.youngpup.net/2001/domdrag/
License: Free to use
DOM-Drag is an extremely lightweight (4Kb) library that makes DOM elements draggable. It includes support for making part of the element the dragging handle and for limiting the area to which the draggable element can be dragged. It doesn’t support drop targets or ghosting, as is the case with scriptaculous (see Chapter 8, “Libraries Used in Part II: Sarissa, Scriptaculous”), but it is much smaller.
JavaScript Shell
Web site: www.squarefree.com/shell/
License: GPL/LGPL/MPL
JavaScript shell is a command-line interface for JavaScript and DOM that allows you to interactively write JavaScript code. Accessible as a stand-alone tool or from a bookmarklet, it is useful as a debugging and development tool and includes tab completion of function names. It also includes extra functions for interacting with the DOM.
Lightbox JS
Web site: www.huddletogether.com/projects/lightbox/
License: Creative Commons Attribution 2.5
This is an unobtrusive JavaScript library that makes it easy to overlay images on the current page. It is used on many sites to show the larger images of thumbnails within articles. To use it, you simply need to include the library and add rel=“lightlight” attributes to an a href that links to the image you want to overlay.
Moo.fx
Web site: http://moofx.mad4milk.net/
License: MIT
Moo.fx is a lightweight library for providing JavaScript visual effects. Rather than bundle effects in the manner that scriptaculous does, Moo.fx provides tools to animate the width, height, and opacity of elements. This focus allows for 6Kb of file size for basic operations. An extension package provides a number of additional features including an accordion widget, support for combination effects, memory of last effect position through cookie storage, and text resizing. This doubles the size of the library but adds its features in only a fraction of the size of other libraries.
Nifty Corners Cube
Web site: www.html.it/articoli/niftycube/index.html
License: GPL
With Nifty Corners Cube, you can add rounded corners to HTML elements in a cross-browser manner, without adding additional images or HTML markup to your pages. The library rounds the elements by calling a single JavaScript function and providing CSS selectors for the elements you want rounded. Nifty Corners Cube also provides parameters for controlling transparent display, rounding size, and element size. This allows Nifty Corners Cube to be used for everything from creating buttons to making fake columns.
overLIB
Web site: www.bosrup.com/web/overlib/
License: Artistic
overLIB is a large, feature-filled library for producing ToolTips. It can be used for anything from standard Tool Tips to pop-up message boxes. A plug-in API is provided, and plug-ins are available for tasks such as moving the pop-up message box while scrolling the page or adding drop shadows to the pop-up message box itself. overLIB contains a huge number of features, making it suitable for many tasks, but it can be overkill if you are adding just a few ToolTips to a site.
Sorttable
Web site: http://kryogenix.org/code/browser/sorttable/
License: MIT
Sorttable is an unobtrusive JavaScript library that makes a table’s columns sortable without server interaction. Sorting is enabled by giving the table a class of sortable. Sorting is allowed on one column per table and works in ascending or descending mode.
Tooltip.js
Web site: http://tooltip.crtx.org/
License: MIT-style
Tooltip.js is an unobtrusive behavior-style library built on top of scriptaculous that adds simple ToolTips to Web sites. ToolTips can be added by using specially named CSS classes or by using a simple JavaScript API. Tooltip.js has fewer features than overLiB, but is much smaller if you are already using scriptaculous. However, if you’re pulling in scriptaculous just for ToolTips, then it’s the same size.
WZ_jsgraphics
Web site: www.walterzorn.com/jsgraphics/jsgraphics_e.ht`m
License: LGPL
WZ_jsgraphics adds a vector-graphics drawing implementation in pure JavaScript. It supports multiple browsers and allows for drawing anywhere on the Web site’s content area. The API provides for basic drawing, including lines, boxes, polygons, and ellipses. Arbitrary positioning of images and text is also supported. The library includes a mode to make the drawings printable and works by building the lines out of DIV elements. Thus, it will have some performance limitations, but it works fast enough for many tasks.
WZ_dragdrop
Web site: www.walterzorn.com/dragdrop/dragdrop_e.htm
License: LGPL
WZ_dragdrop is a DHTML drag-and-drop library; it offers highly functional drag-and-drop support and an additional DHTML API. With this API, you can make elements resizable, clone nodes, and perform basic animation. The only missing functionality is built-in support for drop targets, which is useful for tasks such as sorting or ordering