This content was already on the page.
Windows can act as hover boxes.

LivePipe has been deprecated and is no longer maintained.
The author now works primarily on Thorax

LivePipe UI

High Quality Controls & Widgets for Prototype

Introduction

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed.

Event Oriented Programming

introduces a mechanism to create and observe events on any object, not just DOM Elements. This is used by all controls, and allows for fine grained control of your user interface. Making use of this is as easy as:


	var w = new Control.Window();
	w.observe('afterOpen',function(){
		//insert your custom logic here
	});

Control Examples

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.

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

NameOptions
Centered Window / Content on PageclassName: 'simple_window', closeOnClick: true
Relative Window / Dynamic Contentposition: 'relative', className: 'simple_window', closeOnClick: true
HoverBoxposition: 'relative', offsetLeft: 75, width: 175, hover: true, className: 'tooltip'
Relative Window / Content from AjaxoffsetLeft: 150, position: 'relative', className: 'simple_window', closeOnClick: 'container'
Draggable / Styled Window Onewindow_factory() options
Draggable / Styled Window Twowindow_factory() options
Modal Windowfade: true, overlayOpacity: 0.75, className: 'modal'
TooltipclassName: 'tooltip'

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.

Preview

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.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.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.ScrollBar provides a pure JavaScript/CSS scroll bar implementation and includes mouse wheel support, a proportionally drawn handle, and can accommodate dynamic content and layout changes with the recalculateLayout() method.

Use the Mouse Wheel or Handle to Scroll

Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer. Phasellus molestie, sem vel laoreet pretium, arcu arcu rutrum eros, ac mattis felis ante at orci. Vivamus vel mauris. Ut porttitor, nunc eu tincidunt gravida, orci odio luctus mi, id venenatis dui nunc sit amet turpis. Mauris urna nisl, feugiat a, ultrices id, ultrices et, est. Nam eu felis non tortor luctus congue. Mauris consequat malesuada augue. Donec eu nibh in libero tempor aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien erat, imperdiet tincidunt, vestibulum eget, fringilla vel, odio. Ut risus. Ut pretium neque ac velit. Vivamus diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc luctus fringilla mi. Nunc ultrices nisi ac urna.

Convallis Felis ac Massa Accumsan

Phasellus faucibus adipiscing quam. Maecenas gravida, diam sit amet mollis accumsan, risus diam ornare leo, non sollicitudin lorem mi vitae ante. In at mi. In vestibulum nunc eleifend justo. Nullam semper. Nulla venenatis ornare ipsum. Phasellus pharetra. Suspendisse molestie. Fusce porta vulputate quam. Etiam vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vulputate magna nec diam. Aliquam sagittis lectus a pede. Sed fermentum, risus non sollicitudin posuere, erat arcu iaculis nibh, eu faucibus sapien velit dapibus ipsum. Proin fringilla sapien sed dui.

Eleifend Justo Nullam Semper

Cras eros tellus, posuere at, condimentum eget, fringilla nec, lectus. Mauris ut enim. Quisque imperdiet rutrum elit. Curabitur in nunc. Sed pretium. Aliquam convallis. Proin venenatis. Proin sed magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt. Nam vitae leo at urna dictum venenatis.

Cras iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisl. Duis quis enim at justo euismod accumsan. Duis mollis. Curabitur sed ante. Morbi bibendum iaculis ligula. Suspendisse aliquet est. Sed velit orci, sagittis non, posuere vitae, aliquet in, massa. Vestibulum egestas.

Insert Paragraph and recalculateLayout()

Control.ContextMenu provides a simple API for programming contextual menus. You can attach a context menu to the entire document or any Element. Menus can be triggered via a right click (default), or left click.

Right Click on Image

Left Click on Image


Show third menu item?

Consoleclear

Extras

LivePipe UI also includes a small and growing collection of useful extras. Currently this list includes: