Thursday, February 7, 2013

windows8 develop metro sample code-4 setting layout

1.normal html code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>settingsFlyout</title>

<!-- WinJS references -->
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-dark.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<link rel="stylesheet" href="/css/default.css">
<script src="/js/settingsFlyout.js"></script>
</head>
<body>
<!-- Settings charm content -->
<div class="win-settingsflyout settingsDiv" id="settingsDiv" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width:'narrow'}">
<div class="win-header">
<button class="win-backbutton" aria-label="Back" onclick="GameManager.showPreferences()"></button>
<span class="win-label">pkmap options</span>
</div>
<div class="win-content">
<div class="win-settings-section">
<p>
<label>Url open mode</label>
<input type="radio" name="settingUrlMode" value="0" onchange="settingsFlyoutContext.onUrlModeChange(event)" checked/>System Browser<br />
<input type="radio" name="settingUrlMode" value="1" onchange="settingsFlyoutContext.onUrlModeChange(event)"/>Internal Browser<br />
</p>
<div id="RememberPrevPage" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Remember previous page'}" onchange="settingsFlyoutContext.onRemerberPrevPageChange(event)">
</div>
</div>
</div>
</div>
</body>
</html>



2. js code:

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
////
//// Copyright (c) Microsoft Corporation. All rights reserved

var settingsFlyoutContext = function () {

// Called when the page loads.
function onLoad() {
for (var i = 0; i < settingUrlMode.length; i++) {
if (settingUrlMode[i].value === "" + GameManager.state.external.settingUrlMode) {
settingUrlMode[i].checked = true;
break;
}
}
if (GameManager.state.external.rememberLastPage) {
RememberPrevPage.winControl.checked = true;
}
}

function onUrlModeChange(e) {
var val = e.target.value;
if (GameManager.state.external.settingUrlMode !== val) {
GameManager.state.external.settingUrlMode = val;
GameManager.state.save("external");
}
}

function onRemerberPrevPageChange(e) {
var obj = RememberPrevPage.winControl;
var checked = e.target.winControl.checked;//.contains("win-on");// e.target.checked

if (GameManager.state.external.rememberLastPage != checked) {
GameManager.state.external.rememberLastPage = checked;
GameManager.state.save("external");
}
}

// Return the public functionality.
return {
onLoad: onLoad,
onUrlModeChange: onUrlModeChange,
onRemerberPrevPageChange: onRemerberPrevPageChange
};
}();

(function () {
"use strict";

function ready(element, options) {
WinJS.UI.processAll(element)
.done(function () {
settingsFlyoutContext.onLoad();
});
}

WinJS.UI.Pages.define("/html/settingsFlyout.html", {
ready: ready
});
})();

3.response setting code,in default.js:

WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"settingsDiv": { title: "PKMAP options", href: "/html/settingsFlyout.html" },
"C3Privacy": { title: "Privacy", href: "/html/privacy.html" },
//"About": { title: "About", href: "http://www.pk17s.cn" },
"help": { title: "About", href: "/html/help.html" }
};
WinJS.UI.SettingsFlyout.populateSettings(e);
};



4.look:


image

No comments: