| Topic | Context Menu in METRO Application |
| Output | A context Menu |
| Step | Description |
| 1 | Create the tags in your hmtl code tz01 : Where the contextual menu will be show on click tz02 : Where the result of the contextual action will be show <span id="tz01">Click Me</span><br /><span id="tz02">Result here</span> |
| 2 | in your js file create the function to know the relative location of the click
function pageXY(pageX, pageY) {
var zoomFactor = document.documentElement.msContentZoomFactor;
return {
x: (pageX - window.pageXOffset) * zoomFactor,
y: (pageY - window.pageYOffset) * zoomFactor
};
}
|
| 3 | in your js file create the function to display the result of the selected Contextual Action
function showResult(Id) {
document.getElementById("tz02").innerHTML = document.getElementById(Id).id + " " + "done";
}
|
| 4 | in your js file create the function to display the Contextual Menu
function contextMenu() {
var menu = new Windows.UI.Popups.PopupMenu();
menu.commands.append(new Windows.UI.Popups.UICommand("Action 1" , showResult(window.event.srcElement.getAttribute("Id")), 1));
menu.commands.append(new Windows.UI.Popups.UICommandSeparator);
menu.commands.append(new Windows.UI.Popups.UICommand("Action 2", null, 2));
menu.commands.append(new Windows.UI.Popups.UICommand("Action 3", null, 3));
menu.showAsync(pageXY(window.event.clientX, window.event.clientY));
}
|
| 5 | in your js file create the function to attach the eventlistener to the tag
function Attachcm() {
document.getElementById("tz01").addEventListener("click", contextMenu, false);
}
|
| 6 | in your js file call your Attachcm function in the ready function of your page
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/mypage.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
Attachcm();
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
///
// TODO: Respond to changes in viewState.
}
});
})();
 |
