InfoBox

Metro 4 provides the ability to easily create information boxes. InfoBox can be predefined or created in runtime.

About

New in 4.2.7

InfoBox inform users about a specific task and may contain critical information. InfoBox has next structure:

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


                    <div class="info-box">
                        <span class="button square closer"></span>
                        <div class="info-box-content">
                            ...
                        </div>
                    </div>
                

Create InfoBox

Metro 4 provides two ways for create InfoBox:

  • Predefined method
  • Runtime method

Predefined method

First-off you must create HTML element with special structure. Then add any options over data-* attributes. And at the end add an attribute data-role="infobox" to your element for initialization InfoBox. After the initialization, the dialog will be hidden until it is called.


                    <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>
                

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Create InfoBox at runtime

To create InfoBox at runtime you mus execute method Metro.infobox.create with required parameters and options.


                    var html_content =
                        "<h3>What is Lorem Ipsum?</h3>" +
                        "<p>Lorem Ipsum is simply dummy text...</p>";
                    Metro.infobox.create(html_content);
                

InfoBox types

You can create five type of InfoBoxes: default, success, info, warning and alert. To create it you must use attribute data-type="..." with a corresponding values for predefined InfoBoxes oe second parameter for Metro.infobox.create method.


                    <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>
                

                    Metro.infobox.create("<p>Lorem Ipsum is simply dummy text...</p>", "alert");
                

Options

You can set any options to define InfoBox:

Options Data-* Default Description
type data-type Set InfoBox type: default, success, info, alert and warning
width data-width 480 Set InfoBox width
height data-height auto Set InfoBox height
height data-height auto Set InfoBox height
overlay data-overlay true Add overlay when InfoBox is opened
overlayColor data-overlay-color #000000 Overlay color. Can be hex color value or transparent
overlayAlpha data-overlay-alpha 0.5 Overlay color alpha channel value.
autoHide data-auto-hide 0 If this options > 0, InfoBox closed after this timeout in milliseconds
removeOnClose data-remove-on-close false If this options is true InfoBox will be removed after closes from DOM
closeButton data-close-button true Hide close InfoBox button
clsBox data-cls-box Additional class for InfoBox
clsBoxContent data-cls-box-content Additional class for InfoBox content block
clsOverlay data-cls-overlay Additional class for InfoBox overlay
onOpen data-on-open Metro.noop This callback executed after InfoBox is open
onClose data-on-close Metro.noop This callback executed after InfoBox is close
onInfoBoxCreate data-on-info-box-create Metro.noop This callback executed after InfoBox is created

Events

When InfoBox works, it generated a number of events. You can use callbacks to these events to interact with it.

Events Data-* Desc
onOpen(elem) data-on-open Fired when InfoBox is open
onClose(elem) data-on-close Fired when InfoBox is close
onInfoBoxCreate(elem) data-on-info-box-create Fired when InfoBox was created

                    ...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)
                                    }
                                }
                        );
                    }
                

Methods

To interact with component you can use methods:

Method Desc
open() Use this method to open InfoBox
close() Use this method to close InfoBox
setContent(c) Use this method to change InfoBox content
setType(t) Use this method to change InfoBox type
isOpen() Use this method to check InfoBox state

InfoBox object

Metro 4 contains special object Metro.infobox to manipulate InfoBoxes. This object contains next methods:

  • create(text, type, options, not_open) - create InfoBox
  • open(el, content, type) - open InfoBox
  • close(el) - close InfoBox
  • isInfoBox(el) - check if element is InfoBox instance
  • isOpen(el) - check if InfoBox is open
  • setContent(content) - Set InfoBox content
  • setType(type) - Set InfoBox type