Page Controls
All page controls are wrapped in a <div> tag with two classes.- ControlContainer
- [ContolName]Container (i.e. LabelContainer)
<div class="ControlContainer ButtonContainer"><button></button></div>
Button
Rendered as a straight <button></button> element. Hook up a script to a button click event and make your page do stuff.
Checkbox
Capture a True or False input from a user.
Checkbox List
A Check box list renders a list of options and allows user to select multiple values.
Data Grid
Datagrids are rendered as tables with column ordering. Optionally these can also have a search box and an export button. Clicking the export button pushes the data into a CSV file and prompts the user to download it.
Date Picker
For the Stadium5 datepicker, we use the standard JQuery-UI .datepicker() with some CSS tweaks.
Drop Down
This renders as a standard <select></select> tag containing <option></option> tags.
Image
Display a pre-chosen image to the user.
Label
A label renders as a set of <span> tags.
Layout Grid
Layout Grid is based on the 12 column bootsrap grid and allows you to create columns on your page for precise layout.
Layout Table
You can use the Table control to layout other controls and apply consistent spacing.
Link
A link renders as a set of <a /> tag. In order to add some behaviour to the page, you can attach a script to the click event.
Menu
A menu renders as an unordered list. It can be displayed top-to-bottom menu or left-to-right multi-level drop-down menu.
Panel
A panel renders as a <fieldset /> tag. You can place items into the panel to group them.
Radio Button List
A Check box list renders a list of options and allows user to select one value.
Text Box
A textbox renders as a set of <textarea /> tag with the height of a single line input.