The Mocha GUI components are made with
An Accessible Slider
“Recently we designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.”
Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.
Coda Popup Bubbles
“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”
Facebook Style Input Box
Rich Text Editor
The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library.
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.
Gettyone Search Options Menu
Learn how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.
Modern browser support the
Relay - Ajax Directory Manager
Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.
qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.
GWT-Ext Widget Library
GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
Masked Input Plugin
Oversized Sliding Tabs
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar jQuery solution.
Custom Checkbox with jQuery
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
AJAX Instant Messenger
Mootools animated sidebar menu
This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.
Creating a table with dynamically highlighted columns
There is a number of impressive things happening within this small area.
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.
Unobtrusive Table Actions Script
An attempt at writing an unobtrusive (and fast) script that adds commonly required "actions" to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.
Style Your Website’s Search Field with JS/CSS
The sliding Date-Picker
Prototype UI. Carousel are great to display a large set of data like images.
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.
Displaying source code with Ajax
The script fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers.
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common "lightbox" that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.
Accessible News Slider
CNN Style Scrolling Ticker with the Marquee Toolkit Control
Besides scrolling the items from right to left, the liScroll plugin supports two additional features
mooSocialize - ajax based social bookmark widget
Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.
CheckBoxList hover extender
“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”
Bullet Proof Corners plugin for jQuery using Canvas/VML
Lightview was built to change the way you overlay content on a website. Works on all modern browsers
Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.
New unobtrusive dynamic flickr badge
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.