A jQuery board widget

The jQuery board widget use jQuery-ui draggable, resizable and selectable widgets to create an editable view of objects. Objects can be yellow notes on a notes board, windows on a windows manager screen or images on a drawing board.

Link to video example

• Example 1: Board with elements, how to create a board with elements, example1 (run).

• Example 2: Simple tasks like copy, paste, delete and show-grid, example2 (run).

• Example 3: Customizing the board, creating flower and tree custom elements using hooks, example3 (run).

• Example 4: Customizing the board, using the example flower widget plug-in, example4 (run).

• Example 5: Customizing the board, using the dialog forms plug-in, example5 (run).

In edit mode, objects are interactive. jQuery ui board objects can be selected, dragged and re-sized using the mouse. Objects can be re-sized and dragged together, change their visibility order and view parameters.

In view mode, jQuery ui board objects are not interactive. Objects can change their view in view mode using the widget API.

jQuery ui board objects can be serialized into JSON strings. jQuery ui board objects can be loaded from JSON strings or data objects.

Enables copy, paste, paste style and paste size functionality.

Enables raise, down, bottom and top ordering of objects.

Enables snap to grid, align horizontally, align vertically and distribute objects evenly.

Enables adjustable dialogs for editing elements data.

jQuery ui board use hooks on the widget set-data and set-value to customize the view mode and edit mode widget behavior.

jQuery ui board use plug-ins to create new widget types, and customize the view mode and edit mode behavior of the plugged in widget.