Saturday, January 7, 2012

Windows 8 javascript: Flyout Quick Start


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

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

Or create a menu flyout

In this example, when the user presses the Respond button, a menu will show above the button.
<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>

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

SummaryNext steps

  • 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

No comments:

Post a Comment