Protoplasm

Demos & Documentation

Using Protoplasm

To include Protoplasm controls in a web page, just add the following code to your <head> section:

<script language="javascript" src="protoplasm.js"></script>

You can then tell Protoplasm to load the control(s) you will be using, and which HTML elements should be transformed into enhanced controls (use() must always be called from the page <head> section):

<script language="javascript">
    Protoplasm.use('datepicker').transform('input.datepicker');
</script>

Although including Prototype in your page is recommended, Protoplasm will automatically load it for you from the Google Libraries API if it is not found.

Controls

	Color Picker Protoplasm.use('colorpicker'); A basic color selector, using a grid of swatches. Allows the user to save custom colors in the bottom row.		Date Picker Protoplasm.use('datepicker'); A clean and simple date/time picker that allows you to customize the date format and interface language.
	Dialog Protoplasm.use('dialog'); A modal dialog window to overlay on a web page.		File Chooser Protoplasm.use('filechooser'); A simple file chooser implemented as a text field drop-down. Requires a server-side script to fetch directory listings.
	File Uploader Protoplasm.use('upload'); A file uploader that supports multiple file uploads, inline uploading and upload progress display.		Tab Strip Protoplasm.use('tabstrip'); A tab panel control that splits content into separate tabbed panes, allowing you to switch between panels by clicking on the tabs.
	Time Picker Protoplasm.use('treelist'); A basic timepicker control, configurable for 24-hour and AM/PM time.		Tree List Protoplasm.use('treelist'); A collapsible tree list. Supports both static lists and loading sub-items from a callback function on demand.
	Rich Text Editor Protoplasm.use('rte'); A lightweight rich text editor that does all the basics without any bells and whistles.		Live Grid Protoplasm.use('livegrid'); A sortable, scrollable data table that requests new data on demand via AJAX calls.

Undocumented Controls (demos coming soon)

Accordion	An accordion-style panel switcher
Rating Bar	A 5-star rating bar
Expander	An expandable/collapsible content panel
ValidatedForm	A form wrapper that handles validation and error display, including an AJAX-powered validation implementation.

In Development

Button	A styled button that allows arbitrary content inside it
File Browser	A more comprehensive file browser to complement the simpler file chooser control
Menu	A menu panel control, useful for creating drop-down lists and context menus
Select List	A flexible replacement for standard drop-down lists, including several intuitive interfaces for managing large lists of items and multiple selections.

Planned Controls

Color Wheel	An advanced color picker that covers the entire color spectrum
Input Formatter	A text input wrapper that enforces input patterns
Progress Bar	A progress indicator
Slider	A ranged-value slider control
Tooltip	A mouseover tooltip helper

If you have a control you would like to see included in Protoplasm, send me an email (or better yet, write the code and send it over!)

Credits: LiveGrid and Accordion controls are based on controls from the Rico project. RTE is a rewrite of Kevin Roth's editor (when it was still open source).