Mocha UI beta version 0.7

Examples
- Ajax Demo
- Spirograph
View
- Cascade Windows
Tools
- Window Builder
Help
- FAQ
- Documentation
- Support
- About

Introduction

Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.

Explore the navigation bar and see the windows to the right for more information.

Download

Download Mocha UI v0.7

Overview

Features

No images. The windows, including their controls, 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.
Create modal dialog windows
Optional "desktop" toolbars
Minimal HTML markup required.
Tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Bugs

Scrollbars show through GUI in Firefox on the Mac. This is a known bug.
In Opera 9, though the scrollbars in windows do not show through windows with a higher z-index, you can grab and scroll a scrollbar in a window that is behind another window with a higher z-index.

Notes for Contributors

Add and initial comments to your additions to make it easier for me to merge your code.
Use descriptive names for your variables.
Test your modifications in Firefox 2, Internet Exploere 6 & 7, and Opera 9 on the PC, and then in Safari 2 on the Mac. Firefox 2 on the Mac is not fully supported, though Firefox 3 on the Mac probably will be after its full release.

Change Log

v0.5 - 11/17/2007

Initial release

v0.6 - 11/26/2007

Fixed IE6 select issue
Added a couple more class options
Minor 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

Resources

Mootools

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

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.

Corner Radius: XX