0

フォントサイズを変更するオプションを構成しようとしており、設定を作成しましたが、保持できません。設定は選択コントロールです。フォント サイズのデフォルト設定は default.css から取得されますが、ユーザーの選択に基づいてオーバーライドしたいと考えています。これは、Windows 8 ストアの html/js アプリです。どんな実例も素晴らしいでしょう。ありがとうございました。

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

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

    <!-- App references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/preferences.js"></script>
</head>
<body>
<div data-win-control="WinJS.UI.SettingsFlyout"
    data-win-options="{settingsCommandId:'preferences', width:'narrow'}">
    <div class="win-ui-dark win-header">
        <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
        <div class="win-label">Preferences</div>
    </div>
    <div class="win-content ">
        <div class="win-settings-section">
            <label for="fontSize">Font Size:</label>
            <select id="fontSize">
                <option>18px</option>
                <option>24px</option>
                <option>32px</option>
                <option>36px</option>
                <option>42px</option>
                <option>54px</option>
            </select>

        </div>
    </div>
</div>
    </body>
</html>

JS:

(function() {
    "use strict";

    var appData = Windows.Storage.ApplicationData.current.localSettings;

    WinJS.UI.Pages.define("/settings/preferences.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) {

            // Get DOM Elements
            var fontSize = document.getElementById("fontSize");




            //Wire up event handlers
            fontSize.addEventListener("change", fontSizeLeave);


           function fontSizeLeave() {
                appData.values["fontSize"] = fontSize.value;
            };



            // Get data
            // Set settings to existing values
           if (appData.values.size > 0) {
               fontSize.value = appData.values["fontSize"];

           }

        },

        checkpoint: function () {
            // Save data
            appData.values["fontSize"] = fontSize.value;

        },


        unload: function() {
            // Respond to navigations away from this page.
        },

        updateLayout: function(element, viewState, lastViewState) {
            // Respond to changes in viewState.
        }
    });
})();
4

1 に答える 1

0

あなたのコードでの私のテストから、データの永続性に問題はありません。

このコード行は、内容が正しい場合fontSize.valueでも、で空の文字列の値になります。appData.values

fontSize.value = appData.values["fontSize"];

簡単な修正は、各オプションに値を指定することですselect

<select id="fontSize">
   <option value="18px">18px</option>
   <option value="24px">24px</option>
   <option value="32px">32px</option>
   <option value="36px">36px</option>
   <option value="42px">42px</option>
   <option value="54px">54px</option>
</select>
于 2013-01-08T01:22:57.760 に答える