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
cssClass
The default css class applied to all windows
'ui-window'
taskbarCssClass
The default css class applied to all taskbar icons
'ui-taskbar'
windows
The array of window objects
Window Objects
Name
Description
Default
id
The 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
name
The name displayed in the tooltip when minimized
width
The width in pixels
500
height
The height in pixels
500
cssClass
The css class applied to the window outer div
the same as the parent viewModel
taskbarCssClass
The 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
position
The initial position of the window specified as a pair of X,Y coordinates e.g. '1000,380'
isMinimized
Whether the window is minimized on first load
false
isPinned
Whether the window is pinned to the surface (fixed position) or scrolls with the page
false
Button Objects
Name
Description
Default
iconCssClass
The ccs class applied to icon of the button
cssClass
The ccs class applied to the button itself
onClick
The 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).
title
The 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.