Windows

Metro UI provides special classes to create window elements and manipulate them.

About

Metro UI build windows with using next classes: .window, .window-caption, .window-content and result window has next structure:

Metro UI

Window content


                    <div class="window">
                        <div class="window-caption">
                            <span class="icon mif-windows"></span>
                            <span class="title">Metro UI</span>
                            <div class="buttons">
                                <span class="btn-min"></span>
                                <span class="btn-max"></span>
                                <span class="btn-close"></span>
                            </div>
                        </div>
                        <div class="window-content p-2">
                            Window content
                        </div>
                    </div>

Create window

To create window add attribute data-role="window" to your block element.

This is a simple window


                    <div data-role="window" class="p-2">
                        This is a simple window
                    </div>

Caption

The caption may include the following elements: icon, title, system buttons.

Icon

To add icon to window you must add attribute data-icon="..." to element.

Use Font icon to create window icon.

Use image to create window icon.


                    <div data-role="window"
                            data-icon="<span class='mif-rocket'></span>"
                            class="p-2">
                        Use Font icon to create window icon.
                    </div>

                    <div data-role="window"
                            data-icon="<img src='images/location.png'>"
                            class="p-2">
                        Use image to create window icon.
                    </div>

Title

To add title to window you must add attribute data-title="..." to element.

Set the title with data-title attribute.


                    <div data-role="window" data-title="Window title" class="p-2">
                        Set the title with data-title attribute.
                    </div>

Buttons

You can add system buttons to your window such as: close, min and max. To create buttons you must add relevant attributes: data-btn-close="true", data-btn-min="true", data-btn-max="true".

On/off window system buttons with attributes.


                    <div data-role="window" id="-window-buttons"
                         data-title="Window title"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         class="p-2">
                        On/off window system buttons with attributes.
                    </div>


                    <input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-close"
                        onclick="$('#-window-buttons').attr('data-btn-close', $(this).is(':checked'))">

                    <input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-min"
                        onclick="$('#-window-buttons').attr('data-btn-min', $(this).is(':checked'))">

                    <input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-max"
                        onclick="$('#-window-buttons').attr('data-btn-max', $(this).is(':checked'))">

Buttons events

When Metro UI created window buttons, also created default event for this buttons. You can extend buttons events with custom events over special attributes: data-on-close-click="...", data-on-min-click="...", data-on-max-click="...", data-on-caption-dbl-click="...".

The default events are shown in the example below:

Click to buttons to view default buttons events.

Custom buttons

You can add a custom buttons to window caption. To add custom buttons, use attribute data-custom-buttons

Click to buttons to view default buttons events.


                    <script>
                        var customButtons = [
                            {
                                html: "<span class='mif-rocket'></span>",
                                cls: "sys-button",
                                onclick: "alert('You press rocket button')"
                            },
                            {
                                html: "<span class='mif-user'></span>",
                                cls: "alert",
                                onclick: "alert('You press user button')"
                            },
                            {
                                html: "<span class='mif-cog'></span>",
                                cls: "warning",
                                onclick: "alert('You press cog button')"
                            }
                        ];
                    </script>
                    <div class="p-2"
                         data-role="window"
                         data-draggable="true"
                         data-title="Window"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         data-custom-buttons="customButtons"
                         data-width="300" data-height="160">
                        Click to buttons to view default buttons events.
                    </div>

Add shadow to window

You can add shadow to window with attribute data-shadow="true".

Add shadow to window with attribute data-shadow


                    <div data-role="window"
                         data-title="Window title"
                         data-shadow="true"
                         class="p-2">
                        Add shadow to window with attribute data-shadow
                    </div>

Customize

You can change default colors for caption and content. To set it use attributes data-cls-caption="..." and data-cls-content="...".

You can customize window with own classes.


                    <div class="p-2"
                         data-role="window"
                         data-icon="<span class='mif-rocket'></spam>"
                         data-title="The rocket"
                         data-cls-caption="bg-red"
                         data-cls-content="bg-dark fg-yellow">
                        This is a simple DIV transformed to window with data-role.
                    </div>

Draggable window

To add draggable feature to window add attribute data-draggable="true" to your element. About draggable you can read in this article.

Drag this window on the caption.


                    <div class="p-2" data-role="window"
                            data-draggable="true"
                            data-width="200"
                            data-height="160">
                        Drag this window on the caption.
                    </div>

Resizeable window

To make window as resizable add attribute data-resizable="true" to your window.

Resize the window on hold and move bottom right corner of the window.


                    <div class="p-2"
                        data-role="window"
                        data-resizable="true"
                        data-draggable="true"
                        data-width="300"
                        data-height="160">
                        Resize the window on hold and move bottom right corner of the window.
                    </div>

Available options

All options you can set over data-* attribute:

Option	Data attribute	Default	Desc
width	`data-width`	auto	Set initial width to window
height	`data-height`	auto	Set initial height to window
btnClose	`data-btn-close`	true	Add close button
btnMin	`data-btn-min`	true	Add min button
btnMax	`data-btn-max`	true	Add max button
clsWindow	`data-cls-window`		Additional classes for window
clsCaption	`data-cls-caption`		Additional classes for caption
clsContent	`data-cls-content`		Additional classes for content
draggable	`data-draggable`	true	Add draggable to window
dragElement	`data-drag-element`	.window-caption	Set the drag element
dragArea	`data-drag-area`	parent	Set the area where element can be draggable
shadow	`data-shadow`	false	Add shadow to window
icon	`data-icon`		Window icon
title	`data-title`	Window	Window title
content	`data-content`		Window content
resizable	`data-resizable`	true	Add resizable to window
top	`data-top`	auto	Set window top position
left	`data-left`	auto	Set window left position
place	`data-place`	auto	Set window place (can be: center, top-left, top-center, top-right, right-center, bottom-right, bottom-center, bottom-left, left-center)
closeAction	`data-close-action`	Metro.actions.REMOVE	Action when window close. Metro.actions.REMOVE or Metro.actions.HIDE

Events

Event	Data-*	Desc
`onDragStart`	`data-on-drag-start`	Generated when the user starts dragging the window
`onDragStop`	`data-on-drag-stop`	Generated when the user stops dragging the window
`onDragMove`	`data-on-drag-move`	Generated when the user dragging the window
`onCaptionDblClick`	`data-on-caption-dbl-click`	Generated when the user double clicks on the window caption
`onCloseClick`	`data-on-close-click`	Generated when the user click close button
`onMaxClick`	`data-on-max-click`	Generated when the user click max button
`onMinClick`	`data-on-min-click`	Generated when the user click min button
`onResizeStart`	`data-on-resize-start`	Generated when the user starts resizing the window
`onResizeStop`	`data-on-resize-stop`	Generated when the user stops resizing the window
`onResize`	`data-on-resize`	Generated when the user resize the window
`onWindowCreate`	`data-on-window-create`	Generated when window was created
`onDestroy`	`data-on-window-destroy`	Generated when the window destroyed

How to use event you can see in this example. The example source you can find on github.

Methods

The window has a several methods to interact with it.

Method	Desc
`minimized()`	Toggle minimized state
`maximized()`	Toggle maximized state
`close()`	Close window
`hide()`	Add class `.no-visible` to window
`show()`	Remove class `.no-visible` from window

Metro.window object

Added in 4.2.1

You can use object Metro.window to manipulate of windows components. This object contains next methods:

isWindow(el) - checks, if element has role window
show(el) - show hidden window
hide(el) - hide window
toggle(el) - toggle show/hide window
isOpen(el) - checks, if a window is showed
close(el) - close window
create({...}) - create window
min(el, bool) - minimized or unminimized window
max(el, bool) - maximized or unmaximized window

Table of contents