Sign in
Home Dashboard Docs Samples Downloads Support Community
Dev Center - Windows Store apps > Docs > API reference > Windows APIs > WinJS.UI > Flyout object

WinJS.UI.Flyout object

4 out of 11 rated this helpful - Rate this topic

Displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it.

Syntax

HTML
Copy 

<div data-win-control="WinJS.UI.Flyout"></div>
JavaScript
Copy 

var object = new WinJS.UI.Flyout(element, options);

Members

The Flyout object has these types of members:

Events

The Flyout object has these events.

EventDescription
onafterhide Event

Raised immediately after a flyout is fully hidden.

onaftershow Event

Raised immediately after a flyout is fully shown.

onbeforehide Event

Raised just before hiding a flyout.

onbeforeshow Event

Raised just before showing a flyout.

 

Methods

The Flyout object has these methods.

MethodDescription
addEventListener

Registers an event handler for the specified event.

Flyout

Creates a new Flyout object.

hide Method

Hides the Flyout, if visible, regardless of other states.

removeEventListener

Removes an event handler that the addEventListener method registered.

show Method

Shows the Flyout, if hidden, regardless of other states.

 

Properties

The Flyout object has these properties.

PropertyDescription

alignment

Gets or sets the default alignment to be used for this Flyout.

anchor

Gets or sets the default anchor to be used for this Flyout.

element

Gets the DOM element that hosts the Flyout.

hidden

Gets a value that indicates whether the Flyout is hidden or in the process of becoming hidden.

placement

Gets or sets the default placement to be used for this Flyout.

 

Remarks

Styling the Flyout

CSS classes

To customize the Flyout, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):

CSS classDescription

win-flyout

Styles the entire Flyout.

 

Examples

The following example shows how to use a Flyout to change app settings. You should add the Flyout as a direct child of the <body> element. For the complete example, see HTML flyout control sample.

HTML
Copy 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/change-settings.css" />
    <script src="/js/change-settings.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>
            If there are a small number of settings contextual to a particular object in the
            app rather than the app itself, then use a flyout to commit those settings. 
            Changes should be reflected as soon as the user makes a change.</p>
        <p>
            Click the 'Format output text' button to launch the output text settings flyout.
        </p>
        <button id="formatTextButton" class="action">
            Format output text</button>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <p id="outputText">
            Format this text.</p>
        <div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout" 
             aria-label="{Format text flyout}">
            <label for="textColor">
                Text color</label>
            <br />
            <select id="textColor">
                <option value="black">Black</option>
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
                <option value="purple">Purple</option>
            </select>
            <br />
            <label for="textSize">
                Size</label>
            <br />
            <input type="range" id="textSize" min="6" max="75" value="11" />
        </div>
    </div>
</body>
</html>
JavaScript
Copy 

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/change-settings.html", {
        ready: function (element, options) {
            document.getElementById("formatTextButton").addEventListener(
                "click", showFormatTextFlyout, false);
            document.getElementById("textColor").addEventListener(
                "change", changeColor, false);
            document.getElementById("textSize").addEventListener(
                "change", changeSize, false);
        }
    });

    // Show the flyout
    function showFormatTextFlyout() {
        var formatTextButton = document.getElementById("formatTextButton");
        document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
    }

    // Change the text color
    function changeColor() {
        document.getElementById("outputText").style.color = document.getElementById(
            "textColor").value;
    }

    // Change the text size
    function changeSize() {
        document.getElementById("outputText").style.fontSize = document.getElementById(
        "textSize").value + "pt";
    }
})();

Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Namespace

WinJS.UI

Library
Ui.js

See also

HTML flyout control sample

 

 

Build date: 12/5/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.