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="InfoBox inform users about a specific task and may contain critical information. The most popular HTML, CSS, and JS library in Metro style."> <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>InfoBox - 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="#">InfoBox</a></li> <li class="toc-entry"><a href="#_infobox_about">About</a></li> <li class="toc-entry"> <a href="#_infobox_create">Create InfoBox</a> <ul> <li class="toc-entry"><a href="#_infobox_create_predefined">Predefined</a></li> <li class="toc-entry"><a href="#_infobox_create_runtime">Runtime</a></li> <li class="toc-entry"><a href="#_infobox_types">Types</a></li> </ul> </li> <li class="toc-entry"><a href="#_infobox_options">Options</a></li> <li class="toc-entry"><a href="#_infobox_events">Events</a></li> <li class="toc-entry"><a href="#_infobox_methods">Methods</a></li> <li class="toc-entry"><a href="#_infobox_object">InfoBox 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>InfoBox</h1> <p class="text-leader"> Metro 4 provides the ability to easily create information boxes. InfoBox can be predefined or created in runtime. </p>  <h3 id="_infobox_about">About</h3> <p class="text-small">New in 4.2.7</p> <p> InfoBox inform users about a specific task and may contain critical information. InfoBox has next structure: </p> <div class="example"> <div class="row flex-justify-center"> <div class="cell-md-6"> <div class="info-box pos-relative d-block z-1"> <span class="button square closer"></span> <div class="info-box-content"> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div> </div> <pre><code> <div class="info-box"> <span class="button square closer"></span> <div class="info-box-content"> ... </div> </div> </code></pre> <h3 id="_infobox_create">Create InfoBox</h3> <p> Metro 4 provides two ways for create InfoBox: </p> <ul> <li>Predefined method</li> <li>Runtime method</li> </ul> <h4 id="_infobox_create_predefined">Predefined method</h4> <p> First-off you must create <code>HTML</code> element with special structure. Then add any options over <code>data-*</code> attributes. And at the end add an attribute <code>data-role="infobox"</code> to your element for initialization <code>InfoBox</code>. After the initialization, the dialog will be hidden until it is called. </p> <pre><code> <div class="info-box" data-role="infobox"> <span class="button square closer"></span> <div class="info-box-content"> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </code></pre> <div class="example"> <div class="info-box" id="info-box-1" data-role="infobox"> <span class="button square closer va-middle"></span> <div class="info-box-content"> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class=""> <button class="button" onclick="$('#info-box-1').data('infobox').open()">Open InfoBox</button> </div> </div> <h4 id="_infobox_create_runtime">Create InfoBox at runtime</h4> <p> To create <code>InfoBox</code> at <code>runtime</code> you mus execute method <code>Metro.infobox.create</code> with required parameters and options. </p> <div class="example"> <button class="button" onclick="createInfoBox()">Create InfoBox</button> </div> <pre><code> var html_content = "<h3>What is Lorem Ipsum?</h3>" + "<p>Lorem Ipsum is simply dummy text...</p>"; Metro.infobox.create(html_content); </code></pre> <h4 id="_infobox_types">InfoBox types</h4> <p> You can create five type of InfoBoxes: <code>default</code>, <code>success</code>, <code>info</code>, <code>warning</code> and <code>alert</code>. To create it you must use attribute <code>data-type="..."</code> with a corresponding values for predefined InfoBoxes oe second parameter for <code>Metro.infobox.create</code> method. </p> <pre><code> <div class="info-box" data-role="infobox" data-type="alert"> <span class="button square closer"></span> <div class="info-box-content"> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </code></pre> <pre><code> Metro.infobox.create("<p>Lorem Ipsum is simply dummy text...</p>", "alert"); </code></pre> <div class="example"> <button class="button" onclick="createInfoBox()">Default</button> <button class="button success" onclick="createInfoBox('success')">Success</button> <button class="button info" onclick="createInfoBox('info')">Info</button> <button class="button alert" onclick="createInfoBox('alert')">Alert</button> <button class="button warning" onclick="createInfoBox('warning')">Warning</button> </div>  <h3 id="_infobox_options">Options</h3> <p> You can set any options to define InfoBox: </p> <table class="table table-border cell-border options-table mt-2"> <thead> <tr> <td>Options</td> <td>Data-*</td> <td>Default</td> <td>Description</td> </tr> </thead> <tbody> <tr> <td>type</td> <td><code>data-type</code></td> <td></td> <td>Set InfoBox type: default, success, info, alert and warning</td> </tr> <tr> <td>width</td> <td><code>data-width</code></td> <td>480</td> <td>Set InfoBox width</td> </tr> <tr> <td>height</td> <td><code>data-height</code></td> <td>auto</td> <td>Set InfoBox height</td> </tr> <tr> <td>height</td> <td><code>data-height</code></td> <td>auto</td> <td>Set InfoBox height</td> </tr> <tr> <td>overlay</td> <td><code>data-overlay</code></td> <td>true</td> <td>Add overlay when InfoBox is opened</td> </tr> <tr> <td>overlayColor</td> <td><code>data-overlay-color</code></td> <td>#000000</td> <td>Overlay color. Can be hex color value or transparent</td> </tr> <tr> <td>overlayAlpha</td> <td><code>data-overlay-alpha</code></td> <td>0.5</td> <td>Overlay color alpha channel value.</td> </tr> <tr> <td>autoHide</td> <td><code>data-auto-hide</code></td> <td>0</td> <td>If this options > 0, InfoBox closed after this timeout in milliseconds</td> </tr> <tr> <td>removeOnClose</td> <td><code>data-remove-on-close</code></td> <td>false</td> <td>If this options is <code>true</code> InfoBox will be removed after closes from DOM</td> </tr> <tr> <td>closeButton</td> <td><code>data-close-button</code></td> <td>true</td> <td>Hide close InfoBox button</td> </tr> <tr> <td>clsBox</td> <td><code>data-cls-box</code></td> <td></td> <td>Additional class for InfoBox</td> </tr> <tr> <td>clsBoxContent</td> <td><code>data-cls-box-content</code></td> <td></td> <td>Additional class for InfoBox content block</td> </tr> <tr> <td>clsOverlay</td> <td><code>data-cls-overlay</code></td> <td></td> <td>Additional class for InfoBox overlay</td> </tr> <tr> <td>onOpen</td> <td><code>data-on-open</code></td> <td>Metro.noop</td> <td>This <code>callback</code> executed after InfoBox is open</td> </tr> <tr> <td>onClose</td> <td><code>data-on-close</code></td> <td>Metro.noop</td> <td>This <code>callback</code> executed after InfoBox is close</td> </tr> <tr> <td>onInfoBoxCreate</td> <td><code>data-on-info-box-create</code></td> <td>Metro.noop</td> <td>This <code>callback</code> executed after InfoBox is created</td> </tr> </tbody> </table> <h3 id="_infobox_events">Events</h3> <p> When InfoBox works, it generated a number of events. You can use callbacks to these events to interact with it. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Events</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onOpen(elem)</code></td> <td><code>data-on-open</code></td> <td>Fired when InfoBox is open</td> </tr> <tr> <td><code>onClose(elem)</code></td> <td><code>data-on-close</code></td> <td>Fired when InfoBox is close</td> </tr> <tr> <td><code>onInfoBoxCreate(elem)</code></td> <td><code>data-on-info-box-create</code></td> <td>Fired when InfoBox was created</td> </tr> </tbody> </table> <div class="example"> <button class="button" onclick="infoBoxEventsExample1()">Open InfoBox</button> </div> <pre><code> ...html <button class="button" onclick="infoBoxEventsExample1()">Open InfoBox</button> ...javascript function infoBoxEventsExample1() { var el = Metro.infobox.create( "This is a simple InfoBox. Wait...", "", { closeButton: false, onOpen: function(){ var ib = $(this).data("infobox"); setTimeout(function(){ ib.setContent("Content can be changed at runtime. Wait..."); setTimeout(function(){ ib.setContent("Type also can be changed. Wait..."); ib.setType("alert"); setTimeout(function(){ ib.setType("info"); setTimeout(function(){ ib.setType("warning"); setTimeout(function(){ ib.setContent("Say goodbye..."); ib.setType("success"); setTimeout(function(){ ib.close(); }, 2000) }, 2000) }, 2000) }, 2000) }, 2000) }, 2000) } } ); } </code></pre> <h3 id="_infobox_methods">Methods</h3> <p> To interact with component you can use methods: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>open()</code></td> <td>Use this method to open InfoBox</td> </tr> <tr> <td><code>close()</code></td> <td>Use this method to close InfoBox</td> </tr> <tr> <td><code>setContent(c)</code></td> <td>Use this method to change InfoBox content</td> </tr> <tr> <td><code>setType(t)</code></td> <td>Use this method to change InfoBox type</td> </tr> <tr> <td><code>isOpen()</code></td> <td>Use this method to check InfoBox state</td> </tr> </tbody> </table> <h3 id="_infobox_object">InfoBox object</h3> <p> Metro 4 contains special object <code>Metro.infobox</code> to manipulate <code>InfoBoxes</code>. This object contains next methods: </p> <ul> <li><strong>create(text, type, options, not_open)</strong> - create InfoBox</li> <li><strong>open(el, content, type)</strong> - open InfoBox</li> <li><strong>close(el)</strong> - close InfoBox</li> <li><strong>isInfoBox(el)</strong> - check if element is InfoBox instance</li> <li><strong>isOpen(el)</strong> - check if InfoBox is open</li> <li><strong>setContent(content)</strong> - Set InfoBox content</li> <li><strong>setType(type)</strong> - Set InfoBox type</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> <script> function createInfoBox(t){ if (t === undefined) { t = ""; } var html_content = "<h3>What is Lorem Ipsum?</h3>" + "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>"; Metro.infobox.create( "<h3>What is Lorem Ipsum?</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>", t ); } function infoBoxEventsExample1() { var el = Metro.infobox.create( "This is a simple InfoBox. Wait...", "", { closeButton: false, onOpen: function(){ var ib = $(this).data("infobox"); setTimeout(function(){ ib.setContent("Content can be changed at runtime. Wait..."); setTimeout(function(){ ib.setContent("Type also can be changed. Wait..."); ib.setType("alert"); setTimeout(function(){ ib.setType("info"); setTimeout(function(){ ib.setType("warning"); setTimeout(function(){ ib.setContent("Say goodbye..."); ib.setType("success"); setTimeout(function(){ ib.close(); }, 2000) }, 2000) }, 2000) }, 2000) }, 2000) }, 2000) } } ); } </script>    </body> </html>