Window

Render with style any content at the right moment.

Download Install from npm

A JavaScript Window that looks and acts as it should

Numerous settings and events allow you to define entirely the content, behaviour and appearance of your window.

Fully Interactive

A set of properties allow you to specify what actions the users are allowed to perform over the control: drag, resize, close. You can also set if the window can be maximized, minimized or pinned.

Online Sample: A Project Management Application that Renders Windows

Content

A Window can render any type of HTML content. You set its content directly as a string or point to the URL of a page that will serve as a template. Window content can be loaded from a data object.

Online Sample: A List with Tourist Destinations that Renders Windows with Details

Appearance

The header and footer properties give you access to the DOM HTML elements that build them. This way you can customize their content and look. You can also specify the window icon, size and location and make it modal or not.

Online Sample: JavaScript Json Parser Application

Themes & Styles

The Window reads its appearance settings from CSS classes grouped in a theme shared by all MindFusion UI controls. A set of various predefined themes is available with JS Pack. You can also use the cssClass property to override the theme settings or edit / create themes.

Online Sample: JavaScript Temperature Log Application Styled with the Earth Theme

Methods

Numerous methods allow you to control the behaviour of a Window from code. You can render and restore windows, pin or unpin them. Methods are also available to change the state of a window - minimize, maximize, open and close it.

Online Sample: JavaScript Window that Renders a Data Form
API Overview: The Window Control

Events

The rich event set notifies you of every action the user is performing or has performed over a window. You know when a window is being opened or closed, dragged, resized or clicked and more. Most actions have events that are raised during the action and give you a chance to cancel it.

Online Sample: JavaScript Windows
Online Documentation: Window Class