Window Manager Binding

The window manager binding allows you to specify a number of window objects in a viewModel and for them to render as draggable, minimizable windows in the browser.

The contents of the window can be created by a supplied create function which is passed the containing element, the window object and the parent viewModel. You could call a subsequent ko.applyBindings to render further ui components in the window but be sure to limit its scope the the contents element.

If the jquery cookie plugin is include the windows will remember their positions between page refreshes.

Note: This feature will not work in chrome from a local file version of this example due to a restriction on writing local cookies.

Normally you see the results last but in this case it is important that the button is at the top of the page.

Results

Usage

Markup

Javascript

Options

Window Manager ViewModel

Name Description Default
cssClassThe default css class applied to all windows'ui-window'
taskbarCssClassThe default css class applied to all taskbar icons'ui-taskbar'
windowsThe array of window objects

Window Objects

Name Description Default
idThe unique id of the window
contents

An object that can be used to store a subViewModel for the window contents. To run a sub applyBindings called window the window create menthod you could do something like

nameThe name displayed in the tooltip when minimized
widthThe width in pixels500
heightThe height in pixels500
cssClassThe css class applied to the window outer divthe same as the parent viewModel
taskbarCssClassThe css class applied to the window's icon on the taskbar
create (function)Called to create the window body. This can be a function definition or the string name of the function. The window will try to evaluate the string if a function type is not detected (useful when the configuration is passed via json).
buttons (array)An array of button objects which specify the buttons on the window top bar
positionThe initial position of the window specified as a pair of X,Y coordinates e.g. '1000,380'
isMinimizedWhether the window is minimized on first loadfalse
isPinnedWhether the window is pinned to the surface (fixed position) or scrolls with the pagefalse

Button Objects

Name Description Default
iconCssClassThe ccs class applied to icon of the button
cssClassThe ccs class applied to the button itself
onClickThe handler called when the button is clicked. There are two defined actions 'close' & 'minimize' which can be assigned as strings. This can also be a custom function definition or the string name of the function. The button will try to evaluate the string if a function type is not detected (useful when the configuration is passed via json).
titleThe tooltip title applied to the button

Methods

Name Description
addWindow(data)Add a new window. Takes a json object describing the window to create (see above)
removeWindow(id)Remove a window. Takes an id of the window to remove.

Dependencies