Control Suite

High Quality Controls & Widgets for Prototype.js

Control Suite is a collection of six high quality widgets and controls for Web 2.0 applications built using the Prototype JavaScript framework. Each script is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. All scripts are MIT licensed and are thus completely free for any purpose in any project.

Examples

Each project has it's own page with a tutorial, API and resources. Just select from the list to the right.

You're already using the simplest example of Control.Tabs. This control can also be customized to a variety of different navigation types. The image switcher below is one of many possibilities.

Control.Tabs Project Page »

The table below shows a few of the possible customizations of Control.Modal.

NameDescription
Relative Modal Link HREF: #test_one_contents Parameters: opacity: 0.8, position: 'relative', width:300, height:50
Centered Modal Link HREF: #test_two_contents Parameters: containerClassName: 'test', overlayClassName: 'test', width: 300
AJAX Modal Link HREF: http://livepipe.net/projects/control_modal/modal_ajax Parameters: none
IFrame Modal Link HREF: http://google.com/ Parameters: iframe: true, width: 640, height: 480
Simple Lightbox Link HREF: /ryan/photos/photos/Plants/Banners_Closeup.jpg Parameters: none
Lightbox w/Effects Link HREF: /ryan/photos/photos/Plants/Banners_Closeup.jpg Parameters: fade: true
Hoverbox Link HREF: #hoverbox_one_contents Parameters: hover: true, position: 'relative', offsetLeft: 100
<span> Hoverbox Parameters: hover: true, position: 'relative', offsetLeft: 120, contents: 'Control.Modal can attach to any element.'
I am the innerHTML of a div with the id "test_one_contents". You can make a modal window open relative to any element on the page.
I am the innerHTML of a div with the id "test_two_contents". By default, all modals open in the center of the screen. This modal window has and the overlay that dim the screen both have class names attached.
Modals can also act like tooltips / hoverboxes.

Control.Modal Project Page »

The example below demonstrates both components of Control.TextArea as it is used in other areas of the site. This implementation is specific to the Markdown formatting language.

Control.TextArea Project Page »

Control.SelectMultiple provides a sensible alternative to the traditional select multiple input that attaches to an existing select input on any page.

Select Multiple

Control.SelectMultiple Project Page »

Control.Rating attaches to any div, and is easy to integrate with your existing Ajax applications. It can also interact with other form elements that are already on the page.

ExampleOptions
{}
{value: 2.4}
{value: 4, rated: true}
{value: 6, rated: false, max:9}
{value: 6, rated: false, min: 3, max: 12, multiple: true, reverse: true}
{input: 'rating_seven_input', multiple: true}
{input: 'rating_eight_select', multiple: true}

Control.Rating Project Page »

Control.ProgressBar is a percentage based progress bar that can be set to grow in one of three ways: on a timed interval, when events in your application tell it to, or it can be set to poll a given URL.

Control.ProgressBar Project Page »

Sites that use Control Suite

  • Smithsonian Institution
  • Polar Rose
  • Circle Six Design
  • AutoPendium
  • Plus thousands of smaller sites and internal projects all around the world!

I've just started compiling this list. Do you use a Control Suite script in any of your projects? If so please submit your url!