HexagonJS
Edit Page
Fluid
Helper functions for creating detached dom elements and some of the hexagon dom structures.
Examples

HTML

<div id="example"></div>

JavaScript

hx.select('#example')
  .add(hx.checkbox())
  .add(hx.button({context: 'positive'}).text('Positive Button'))
  .add(hx.button({context: 'warning'}).text('Warning Button'))
  .add(hx.button({context: 'action'}).text('Action Button'))
  .add(hx.icon({class: 'fa fa-plus'}))
Api
Functions
hx.buttonoptionsObjectSelection
Creates a detached button wrapped in a selection
Arguments
options
Properties
contextString
The context class to apply to the button
Returns
Selection
The selection containing the new element
hx.checkboxSelection
Creates a detached input element with type 'checkbox', wrapped in a selection
Returns
Selection
The selection containing the new element
hx.divclassStringSelection
Creates a detached div with the provided class
Arguments
classString
The class to add to the newly created div
Returns
Selection
The selection containing the new element
hx.groupSelection
Creates a detached div, classed with hx-group and hx-horizontal, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.group.fixedSelection
Creates a detached div, classed with hx-group, hx-horizontal and hx-fixed, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.group.verticalSelection
Creates a detached div, classed with hx-group and hx-vertical, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.group.vertical.fixedSelection
Creates a detached div, classed with hx-group, hx-vertical and hx-fixed, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.iconoptionsObjectSelection
Creates a detached <i> element wrapped in a selection
Arguments
options
Properties
classString
The class to apply to the icon. This assumes you are using an icon font that uses classes (for example, font awsome)
Returns
Selection
The selection containing the new element
hx.inputGroupSelection
Creates a detached div, classed with hx-input-group, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.labeloptionsObjectSelection
Creates a detached span element, classed with hx-label, wrapped in a selection
Arguments
options
Properties
contextString
The context class to apply to the label
Returns
Selection
The selection containing the new element
hx.noticeSelection
Creates a detached div, classed with hx-notice, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.notice.bodySelection
Creates a detached div, classed with hx-notice-body, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.notice.headSelection
Creates a detached div, classed with hx-notice-head, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.sectionSelection
Creates a detached div, classed with hx-section, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.section.fixedSelection
Creates a detached div, classed with hx-section and hx-fixed, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.spanclassStringSelection
Creates a detached span with the provided class
Arguments
classString
The class to add to the newly created span
Returns
Selection
The selection containing the new element
hx.spinnerSelection
Creates a detached span, classed with hx-spinner, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.spinner.wideSelection
Creates a detached span, classed with hx-spinner-wide, wrapped in a selection
Returns
Selection
The selection containing the new element