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:
Uploader Comments ( learningsqlserver )