Mocha UI beta version 0.8

Overview

Features

• No images. The windows (including their controls, animated loading icons, gradients and shadows) are drawn with the canvas tag.
• Windows can be focused, dragged, resized, maximized, minimized, restored and closed.
• Adjustable rounded corner radius.
• Dynamically create new windows on demand and load their content with innerHTML, XHR, or an iFrame.
• The ability to create multiple new windows from a single Json data request.
• Create modal dialog windows
• Optional "desktop" toolbars
• Minimal HTML markup required.
• Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.
• Validates as XHTML 1.0 Strict if you use no target attributes in your anchors and validates as XHTML 1.0 Transitional if you do.

Bugs

See the documentaion and also view the current tickets at Google Code.

Change Log

v0.8 - 3/13/2008

• Added functionality for creating multiple new windows from a single Json data request
• Added animated canvas loading icon to xhr and iframe load methods
• onContentLoaded now works with iframes
• Added styling options which can be set globally and for individual windows
• Added global effects option which toggles most of the window transition effects
• Now you can set individual windows to be draggable, resizable, closable, maximizable, or minimizable, overriding the global settings (Joel Lindau)
• Added closeAll() method which closes all windows at once
• Added more examples
• Fixed scrollbar bug in Firefox 2 on the Mac. Scrollbars no longer bleed through windows that are above them
• Made speed optimizations (Joel Lindau)

v0.7 r22 - 12/11/2007

• Iframes now resize when you resize a window
• Fixed it so that if the desktop toolbars are removed the rest of the code still works
• Modal windows can now be used standalone without any Mocha UI html markup
• Removed the inline javascript from the example html
• Added optional autohide to the dock (Scott F. Frederick)
• Added the following options to new windows: onContentLoaded, onFocus, onResize, onMinimize, onMaximize, onClose and onCloseComplete (Joel Lindau)
• Added screens/workspaces (Joel Lindau)
• Pulled the slider function out of the core class
• Code optimizations

v0.7 - 12/03/2007

• Added minimize functionality (Scott F. Frederick)
• Added mouseover "title" to close, maximize, and minimize buttons (Scott F. Frederick)
• Added onmouseover "title" to minimized window buttons displaying full header title (Scott F. Frederick)
• The close, maximize, and minimize buttons are now individually optional
• Added the MochaWindow and MochaWindowForm classes
• Added several options for setting the properties and style of new windows
• Added additional ajax and iframe support
• Reconfigured how the core class is loaded so it is easier to access the class methods
• Added optional toolbars to the "desktop"
• Added modal dialog windows
• Code optimizations

v0.6 - 11/26/2007

• Fixed the IE6 select issue
• Added a couple more class options
• Minor code optimizations

v0.5 - 11/17/2007

• Initial release

Resources

Mootools

Mootools is an Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.

• Demos
• Documentation
• Forums

ExplorerCanvas

Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based drawing. ExplorerCanvas is a javascript file that brings the same functionality to Internet Explorer.

Corner Radius Slider

Move the slider to change the radius of the rounded corners on these windows.