Dockable Window Example

This example explains how to create a window that can be docked into the div.

See interactive example on http://www.redui.net

UI Model

{
    "windows": [
        {
            "name": "DockableWindowExample",
            "title": "Dockable Window Example",
            "left": 500,
            "top": 100,
            "width": 400,
            "height": 300,
            "controls": [
                {
                    "name": "dockButton",
                    "type": "button",
                    "text": "Dock"
                },
                {
                    "name": "undockButton",
                    "type": "button",
                    "text": "Undock"
                },
                {
                    "name": "firstNameTextBox",
                    "type": "textbox",
                    "label": "First Name",
                    "bindsTo": "firstName"
                },
                {
                    "name": "lastNameTextBox",
                    "type": "textbox",
                    "label": "Last Name",
                    "bindsTo": "lastName"
                }
            ]
        }
    ]
}

Data Model

var playerData = {
	firstName: "Elvio",
	lastName: "Rizzo",
};

Code

var exampleWindow = redui.createNewWindow("DockableWindowExample");
exampleWindow.bind(playerData);
exampleWindow.show();

exampleWindow.dockButton.getElement().click(function () {
	exampleWindow.dock($("#DockableWindowExample_DockableDiv"));
});
exampleWindow.undockButton.getElement().click(function () {
	exampleWindow.undock();
});


.

Last edited Nov 21, 2013 at 9:46 AM by artemkv, version 2

Comments

No comments yet.