Windows 8 javascript: Flyout Quick Start

see http://msdn.microsoft.com/en-us/library/windows/apps/hh465354.aspx

Create a flyout

In this example, when the user presses the Buy button, a flyout shows below the button. A flyout is a control in the Windows Library for JavaScript:WinJS.UI.Flyout.

HTML

<button id="buyButton" aria-haspopup="true">Buy</button>
<div id="confirmOrderFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm Order Flyout}">
   <div>Your account will be charged $252.</div>
   <button id="confirmOrderButton">Complete Order</button>
</div>

Javascript

var anchor = document.getElementById("buyButton");
var flyoutElement = document.getElementById("confirmOrderFlyout");
var flyout = WinJS.UI.getControl(flyoutElement);
flyout.show(anchor, "bottom");

Or create a menu flyout

In this example, when the user presses the Respond button, a menu will show above the button.

HTML

<button id="respondButton" aria-haspopup="true">Respond</button>
<div id="respondFlyout" data-win-control="WinJS.UI.Flyout" aria-label="Respond Menu" class="win-menu">
   <button id="replyMenuItem" role="menuitem">Reply</button>
   <button id="replyAllMenuItem" role="menuitem">Reply All</button>
   <button id="forwardMenuItem" role="menuitem">Forward</button>
</div>

Javascript

var anchor = document.getElementById("respondButton");
var flyoutElement = document.getElementById("respondFlyout");
var flyout = WinJS.UI.getControl(flyoutElement);
flyout.show(anchor);

SummaryNext steps

Summary:

• A flyout is a lightweight popup that is used to temporarily show UI.
• Use flyouts to collect information from the user, or for warnings or other messages related to user actions.
• Do not use flyouts for unexpected messages, or to present complex or persistent selections of commands that would be more convenient to the user on the app's canvas or app bar.
• Make the design of the flyout as simple as possible.

Next step:

• How to add a flyout