metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 provides special classes to create window elements and manipulate them."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Windows - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Windows</a></li> <li class="toc-entry"><a href="#_window_about">About</a></li> <li class="toc-entry"><a href="#_window_create">Create window</a></li> <li class="toc-entry"> <a href="#_window_caption">Window caption</a> <ul> <li class="toc-entry"><a href="#_window_caption_icon">Icon</a></li> <li class="toc-entry"><a href="#_window_caption_title">Title</a></li> <li class="toc-entry"><a href="#_window_caption_buttons">Buttons</a></li> <li class="toc-entry"><a href="#_window_buttons_events">Buttons events</a></li> <li class="toc-entry"><a href="#_window_custom_buttons">Custom buttons</a></li> </ul> </li> <li class="toc-entry"><a href="#_window_shadow">Shadow</a></li> <li class="toc-entry"><a href="#_window_custom">Customize</a></li> <li class="toc-entry"><a href="#_window_draggable">Draggable</a></li> <li class="toc-entry"><a href="#_window_resizeable">Resizeable</a></li> <li class="toc-entry"><a href="#_window_options">Options</a></li> <li class="toc-entry"><a href="#_window_events">Events</a></li> <li class="toc-entry"><a href="#_window_methods">Methods</a></li> <li class="toc-entry"><a href="#_window_object">Metro.window object</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Windows</h1> <p class="text-leader"> Metro 4 provides special classes to create window elements and manipulate them. </p>  <h3 id="_window_about">About</h3> <p> Metro 4 build windows with using next classes: <code>.window</code>, <code>.window-caption</code>, <code>.window-content</code> and result window has next structure: </p> <div class="example"> <div class="row"> <div class="cell clear"> <div class="window w-100" style="height: 300px;"> <div class="window-caption"> <span class="icon mif-windows"></span> <span class="title">Metro 4</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> </div> </div> </div> <pre><code class="html"> <div class="window"> <div class="window-caption"> <span class="icon mif-windows"></span> <span class="title">Metro 4</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> </code></pre> <h3 id="_window_create">Create window</h3> <p> To create window add attribute <code>data-role="window"</code> to your block element. </p> <div class="example"> <div data-role="window" class="p-2"> This is a simple window </div> </div> <pre><code class="html"> <div data-role="window" class="p-2"> This is a simple window </div> </code></pre> <h3 id="_window_caption">Caption</h3> <p> The caption may include the following elements: <code>icon</code>, <code>title</code>, <code>system buttons</code>. </p> <h4 id="_window_caption_icon">Icon</h4> <p> To add <code>icon</code> to window you must add attribute <code>data-icon="..."</code> to element. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div data-role="window" data-icon="<span class='mif-rocket'></span>" class="p-2"> Use Font icon to create window icon. </div> </div> <div class="cell-md-6"> <div data-role="window" data-icon="<img src='images/location.png'>" class="p-2"> Use image to create window icon. </div> </div> </div> </div> <pre><code class="html"> <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> </code></pre> <h4 id="_window_caption_title">Title</h4> <p> To add <code>title</code> to window you must add attribute <code>data-title="..."</code> to element. </p> <div class="example"> <div data-role="window" data-title="Window title" class="p-2"> Set the title with data-title attribute. </div> </div> <pre><code class="html"> <div data-role="window" data-title="Window title" class="p-2"> Set the title with data-title attribute. </div> </code></pre> <h4 id="_window_caption_buttons">Buttons</h4> <p> You can add system buttons to your window such as: <code>close</code>, <code>min</code> and <code>max</code>. To create buttons you must add relevant attributes: <code>data-btn-close="true"</code>, <code>data-btn-min="true"</code>, <code>data-btn-max="true"</code>. </p> <div class="example"> <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> </div> <pre><code class="html"> <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> </code></pre> <div class="example d-flex"> <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'))"> </div> <pre><code class="html"> <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'))"> </code></pre> <h4 id="_window_buttons_events">Buttons events</h4> <p> When Metro 4 created window buttons, also created default event for this buttons. You can extend buttons events with custom events over special attributes: <code>data-on-close-click="..."</code>, <code>data-on-min-click="..."</code>, <code>data-on-max-click="..."</code>, <code>data-on-caption-dbl-click="..."</code>. </p> <p> The default events are shown in the example below: </p> <div class="example pos-relative p-0" style="height: 300px;"> <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-width="300" data-height="160"> Click to buttons to view default buttons events. </div> </div> <h4 id="_window_custom_buttons">Custom buttons</h4> <p> You can add a custom buttons to window caption. To add custom buttons, use attribute <code>data-custom-buttons</code> </p> <div class="example pos-relative p-0" style="height: 300px;"> <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="340" data-height="160"> Click to buttons to view default buttons events. </div> </div> <pre><code> <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> </code></pre> <h3 id="_window_shadow">Add shadow to window</h3> <p> You can add <code>shadow</code> to window with attribute <code>data-shadow="true"</code>. </p> <div class="example"> <div data-role="window" id="-window-shadow" data-title="Window title" data-shadow="true" class="p-2"> Add shadow to window with attribute data-shadow </div> </div> <pre><code class="html"> <div data-role="window" data-title="Window title" data-shadow="true" class="p-2"> Add shadow to window with attribute data-shadow </div> </code></pre> <div class="example d-flex"> <input checked type="checkbox" data-role="checkbox" data-caption="Enable shadow" onclick="$('#-window-shadow').attr('data-shadow', $(this).is(':checked'))"> </div> <h3 id="_window_custom">Customize</h3> <p> You can change <code>default colors</code> for <code>caption</code> and <code>content</code>. To set it use attributes <code>data-cls-caption="..."</code> and <code>data-cls-content="..."</code>. </p> <div class="example"> <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"> You can customize window with own classes. </div> </div> <pre><code class="html"> <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> </code></pre>  <h3 id="_window_draggable">Draggable window</h3> <p> To add <code>draggable</code> feature to window add attribute <code>data-draggable="true"</code> to your element. About <code>draggable</code> you can read <a href="draggable.html">in this article</a>. </p> <div class="example pos-relative p-0" style="height: 300px;"> <div class="p-2" data-role="window" data-draggable="true" data-resizable="false" data-width="200" data-height="160" id="-window-draggable"> Drag this window on the caption. </div> </div> <pre><code class="html"> <div class="p-2" data-role="window" data-draggable="true" data-width="200" data-height="160"> Drag this window on the caption. </div> </code></pre> <div class="example d-flex"> <input checked type="checkbox" data-role="checkbox" data-caption="Enable draggable" onclick="$('#-window-draggable').attr('data-draggable', $(this).is(':checked'))"> </div> <h3 id="_window_resizeable">Resizeable window</h3> <p> To make window as <code>resizable</code> add attribute <code>data-resizable="true"</code> to your window. </p> <div class="example pos-relative p-0" style="height: 300px;"> <div class="p-2" data-role="window" data-resizable="true" data-draggable="true" data-width="300" data-height="160" id="-window-resizable"> Resize the window on hold and move bottom right corner of the window. </div> </div> <pre><code class="html"> <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> </code></pre> <div class="example d-flex"> <input checked type="checkbox" data-role="checkbox" data-caption="Enable resizable" onclick="$('#-window-resizable').attr('data-resizable', $(this).is(':checked'))"> </div> <h3 id="_window_options">Available options</h3> <p> All options you can set over <code>data-*</code> attribute: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data attribute</th> <th>Default</th> <th>Desc</th> <th>Observe</th> </tr> </thead> <tbody> <tr> <td>width</td> <td><code>data-width</code></td> <td>auto</td> <td>Set initial width to window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>height</td> <td><code>data-height</code></td> <td>auto</td> <td>Set initial height to window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>btnClose</td> <td><code>data-btn-close</code></td> <td>true</td> <td>Add close button</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>btnMin</td> <td><code>data-btn-min</code></td> <td>true</td> <td>Add min button</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>btnMax</td> <td><code>data-btn-max</code></td> <td>true</td> <td>Add max button</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>clsWindow</td> <td><code>data-cls-window</code></td> <td></td> <td>Additional classes for window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>clsCaption</td> <td><code>data-cls-caption</code></td> <td></td> <td>Additional classes for caption</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>clsContent</td> <td><code>data-cls-content</code></td> <td></td> <td>Additional classes for content</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>draggable</td> <td><code>data-draggable</code></td> <td>true</td> <td>Add draggable to window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>dragElement</td> <td><code>data-drag-element</code></td> <td>.window-caption</td> <td>Set the drag element</td> <td><span class="mif-cancel fg-red"></span></td> </tr> <tr> <td>dragArea</td> <td><code>data-drag-area</code></td> <td>parent</td> <td>Set the area where element can be draggable</td> <td><span class="mif-cancel fg-red"></span></td> </tr> <tr> <td>shadow</td> <td><code>data-shadow</code></td> <td>false</td> <td>Add shadow to window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>icon</td> <td><code>data-icon</code></td> <td></td> <td>Window icon</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>title</td> <td><code>data-title</code></td> <td>Window</td> <td>Window title</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>content</td> <td><code>data-content</code></td> <td></td> <td>Window content</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>resizable</td> <td><code>data-resizable</code></td> <td>true</td> <td>Add resizable to window</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>top</td> <td><code>data-top</code></td> <td>auto</td> <td>Set window top position</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>left</td> <td><code>data-left</code></td> <td>auto</td> <td>Set window left position</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>place</td> <td><code>data-place</code></td> <td>auto</td> <td>Set window place (can be: center, top-left, top-center, top-right, right-center, bottom-right, bottom-center, bottom-left, left-center)</td> <td><span class="mif-checkmark fg-green"></span></td> </tr> <tr> <td>closeAction</td> <td><code>data-close-action</code></td> <td>Metro.actions.REMOVE</td> <td>Action when window close. Metro.actions.REMOVE or Metro.actions.HIDE</td> <td><span class="mif-cancel fg-red"></span></td> </tr> </tbody> </table> <h3 id="_window_events">Events</h3> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onDragStart</code></td> <td><code>data-on-drag-start</code></td> <td>Generated when the user starts dragging the window</td> </tr> <tr> <td><code>onDragStop</code></td> <td><code>data-on-drag-stop</code></td> <td>Generated when the user stops dragging the window</td> </tr> <tr> <td><code>onDragMove</code></td> <td><code>data-on-drag-move</code></td> <td>Generated when the user dragging the window</td> </tr> <tr> <td><code>onCaptionDblClick</code></td> <td><code>data-on-caption-dbl-click</code></td> <td>Generated when the user double clicks on the window caption</td> </tr> <tr> <td><code>onCloseClick</code></td> <td><code>data-on-close-click</code></td> <td>Generated when the user click close button</td> </tr> <tr> <td><code>onMaxClick</code></td> <td><code>data-on-max-click</code></td> <td>Generated when the user click max button</td> </tr> <tr> <td><code>onMinClick</code></td> <td><code>data-on-min-click</code></td> <td>Generated when the user click min button</td> </tr> <tr> <td><code>onResizeStart</code></td> <td><code>data-on-resize-start</code></td> <td>Generated when the user starts resizing the window</td> </tr> <tr> <td><code>onResizeStop</code></td> <td><code>data-on-resize-stop</code></td> <td>Generated when the user stops resizing the window</td> </tr> <tr> <td><code>onResize</code></td> <td><code>data-on-resize</code></td> <td>Generated when the user resize the window</td> </tr> <tr> <td><code>onWindowCreate</code></td> <td><code>data-on-window-create</code></td> <td>Generated when window was created</td> </tr> <tr> <td><code>onDestroy</code></td> <td><code>data-on-window-destroy</code></td> <td>Generated when the window destroyed</td> </tr> </tbody> </table> <p> How to use event you can see in <a href="examples/desktop/desktop.html">this example</a>. The example source you can find on <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/desktop">github</a>. </p> <h3 id="_window_methods">Methods</h3> <p> The window has a several methods to interact with it. </p> <table class="table cell-border table-border options-table mt-2"> <thead> <tr> <td>Method</td> <td>Desc</td> </tr> </thead> <tbody> <tr> <td><code>minimized()</code></td> <td>Toggle minimized state</td> </tr> <tr> <td><code>maximized()</code></td> <td>Toggle maximized state</td> </tr> <tr> <td><code>close()</code></td> <td>Close window</td> </tr> <tr> <td><code>hide()</code></td> <td>Add class <code>.no-visible</code> to window</td> </tr> <tr> <td><code>show()</code></td> <td>Remove class <code>.no-visible</code> from window</td> </tr> </tbody> </table> <h3 id="_window_object">Metro.window object</h3> <p class="text-small">Added in 4.2.1</p> <p> You can use object <code>Metro.window</code> to manipulate of windows components. This object contains next methods: </p> <ul> <li><code>isWindow(el)</code> - checks, if element has role <code>window</code></li> <li><code>show(el)</code> - show hidden window</li> <li><code>hide(el)</code> - hide window</li> <li><code>toggle(el)</code> - toggle show/hide window</li> <li><code>isOpen(el)</code> - checks, if a window is showed</li> <li><code>close(el)</code> - close window</li> <li><code>create({...})</code> - create window</li> <li><code>min(el, bool)</code> - minimized or unminimized window</li> <li><code>max(el, bool)</code> - maximized or unmaximized window</li> </ul> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>