MontageJS Examples

Follow the links on this page to explore demos and source code of MontageJS ui components and features in Mfiddle.

MontageJS Components

The following examples use prebuilt MontageJS components.

Text

• Hello World
• Set text programmatically
• Set text with a binding

Page Controls

• Simple repetition
• Simple substitution

Converters

• Number converters

Composers

• Press composer
• Translate composer

Pattern

• Sorting a Repetition

Controllers

• Tree Controller

UI Components (Digit)

The following examples use components that are part of the touch-optimized Digit UI set.

Button

• Button with an explicit identifier (used to link to a handler method)
• Button with a default identifier (serialization label is the default identifier)
• Submit button without a specific handler (the handleAction() method will be called when the “action” event is dispatched)

TextField

• A simple text field
• A text field with a placeholder
• A disabled text field enabled by a button click
• A text field action

TextArea

• A simple text area

Slider

• A simple slider
• Two-way binding (between a slider and a text field)

NumberField

• A simple number field
• Bindings between number fields

Select

• A simple select
• A select powered by a range controller
• A select synchronized with a repetition

Checkbox

• A simple checkbox

RadioButton

• A radio button group

Image

• An image

List

• A list of categories

Draw Cycle

The draw cycle is a loop that allows components to change their element’s DOM structure without troublesome reflow issues.

• Changing the background color of an element with a slider