UI Library Demo

A working demo of the UI controls that Above The Fold has built for the Metanga web application.

About
Data Tables
Tabs
Buttons
Dialogs
Containers
Overlays
Icons
Modal Windows
Other Stuff

About the UI Library

The Metanga UI Framework is composed of the following components:

jQuery UI (jqueryui.com)
HTML5 Shiv
jQuery Data Tables (datatables.net)
jQuery Validate
jQuery UI Multiselect
jQuery Equal Height Columns
jQuery ShowHide
jQuery Cookie

Data Tables (courtesy DataTables.net)

Default Table (unstyled)

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Normal Table with class="display"

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Basic UI Table

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230235	Bob	McDobb	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230589	Larry	McPharry	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Advanced UI Table with Toolbar and Column Reordering

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230235	Bob	McDobb	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230589	Larry	McPharry	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.

Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

Buttons

A link?

Open Dialog

A link?

Save Add to Dashboard Print Export Schedule

Dialog

Open Dialog

Containers

Container with an inner fieldset, optionally collapsible

Customer Information

Company Identifier:*
Business Class:*
- CLEC
- ILEC
Service Class:*
- Primary Long Distance
- Local Service
Business Type:
- Facilities Based
- Franchise
- Regulated

Container with a fancy table inside

Customer Information

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Container with a normal table inside

Customer Information

Username	First Name	Last Name	Account Status	Actions
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)
987230587	Dwight	McKnight	--	(actions)

Overlay and Shadow Classes (not currently used in UI widgets)

Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.

Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.

Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.

Framework Icons (content color preview)

Modal windows go here.

Slider

Datepicker

Progressbar

Highlight / Error

Hey! Sample ui-state-highlight style, which has lots of words in it and therefore will break onto more than one line.

Perhaps another paragraph even goes here.

Alert: Sample ui-state-error style.