Controls
Select from the list above to navigate to the tutorial and API for each control, or select a demo below.
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.
| Name | Options |
| Centered Window / Content on Page | className: 'simple_window', closeOnClick: true |
| Relative Window / Dynamic Content | position: 'relative', className: 'simple_window', closeOnClick: true |
| HoverBox | position: 'relative', offsetLeft: 75, width: 175, hover: true, className: 'tooltip' |
| Relative Window / Content from Ajax | offsetLeft: 150, position: 'relative', className: 'simple_window', closeOnClick: 'container' |
| Draggable / Styled Window One | window_factory() options |
| Draggable / Styled Window Two | window_factory() options |
| Modal Window | fade: true, overlayOpacity: 0.75, className: 'modal' |
| Tooltip | className: '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.
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.
| Example | Options |
| {} | |
| {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.
Scroll To...
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.
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? |