Demos & Documentation
To include Protoplasm controls in a web page, just add the following code to your <head> section:
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):
A basic color selector, using a grid of swatches. Allows the user to save custom colors in the bottom row.
A clean and simple date/time picker that allows you to customize the date format and interface language.
A modal dialog window to overlay on a web page.
A simple file chooser implemented as a text field drop-down. Requires a server-side script to fetch directory listings.
A file uploader that supports multiple file uploads, inline uploading and upload progress display.
A tab panel control that splits content into separate tabbed panes, allowing you to switch between panels by clicking on the tabs.
A basic timepicker control, configurable for 24-hour and AM/PM time.
A collapsible tree list. Supports both static lists and loading sub-items from a callback function on demand.
Rich Text Editor
A lightweight rich text editor that does all the basics without any bells and whistles.
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.|
|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.|
|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!)