如何當地語系化 WinJS 控制項 (HTML)

發行項
01/28/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

當地語系化 WinJS 控制項的標籤和圖示以及應用程式的其他內容。

先決條件

當地語系化屬性

WinJS 控制項可能有需要當地語系化的屬性，例如：

應用程式列命令的標籤和圖示
功能表項目標籤
設定飛出視窗中的切換開關標籤
用於協助工具的 ARIA 標籤

在 WinJS 控制項標記新增資源識別元以參照當地語系化的字串。

在下方的應用程式列範例中，會以此模式將 data-win-res 屬性新增到每個應用程式列命令：

data-win-res="{winControl: {propertyName1:'resourceID1',propertyName2:'resourceID2'}}"

每個 propertyName 對應到一個控制項屬性 (例如標籤或標題)，而且 resourceID 會參照要從資源檔案載入之字串的資源識別元。請參考下方的 strings/en-US/resources.resjson 範例。

在含有這個標記的 JavaScript 程式碼中，當 HTML 載入以使用資源字串取代屬性和每個 data-win-res 屬性的內容時，必須呼叫 WinJS.Resources.processAll 函式。

應用程式列範例

這個範例示範如何在應用程式列當地語系化命令字串。

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" 
     data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
     data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
     data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
     data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
</button>
</div>

(function () {

    "use strict";
    var page = WinJS.UI.Pages.define("/html/localize-appbar.html", {
    ready: function (element, options) {
        // Load resources.
        loadResources();
        // Enable listener so they get updated when user changes language selection.
        WinJS.Resources.addEventListener("contextchanged", loadResources);
    }
});

// Handle loading of resources.
function loadResources() {
    WinJS.Resources.processAll();
}

})();

資源檔案

strings/en-US/resources.resjson

{
    "command1Label"            : "en-US Command1",
    "command1Tooltip"          : "en-US Command1 Tooltip",

    "command2Label"            : "en-US Command2",
    "command2Tooltip"          : "en-US Command2 Tooltip"
}

strings/fr-FR/resources.resjson

{
    "command1Label"            : "fr-FR Command1",
    "command1Tooltip"          : "fr-FR Command1 Tooltip",

    "command2Label"            : "fr-FR Command2",
    "command2Tooltip"          : "fr-FR Command2 Tooltip"
}

strings/de-DE/resources.resjson

{
    "command1Label"            : "de-DE Command1",
    "command1Tooltip"          : "de-DE Command1 Tooltip",

    "command2Label"            : "de-DE Command2",
    "command2Tooltip"          : "de-DE Command2 Tooltip"
}

功能表範例

這個標記示範如何當地語系化功能表控制項。如同應用程式列範例，它也需要 JavaScript 和資源檔案。

<div id="headerMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item1Label'}}" 
        data-win-options="{id:'firstMenuItem'}">
    </button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item2Label'}}" 
        data-win-options="{id:'secondMenuItem'}">
    </button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{id:'separator',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'itemNLabel'}}" 
        data-win-options="{id:'lastMenuItem'}">
    </button>
</div>

切換開關範例

這個標記示範如何當地語系化 ToggleSwitch 控制項。如同應用程式列範例，它也需要 JavaScript 和資源檔案。

<div data-win-control="WinJS.UI.ToggleSwitch" 
    data-win-res="{winControl: {labelOn:'switch1LabelOn',labelOff:'switch1LabelOff',
    title:'switch1Title'}}"
    data-win-options="">
</div>

共用方式為