如何本地化 WinJS 控件 (HTML)

项目
01/28/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本地化 WinJS 控件的标签和图标以及应用内容的其余部分。

先决条件

本地化属性

WinJS 控件可能具有需要本地化的属性，如：

应用栏命令上的标签和图标
菜单项标签
在“设置”浮出控件中切换开关标签
用于实现辅助功能的 ARIA 标签

将资源标识符添加到 WinJS 控件的标记以引用本地化字符串。

在下面的应用栏示例中，按以下模式将 data-win-res 属性添加到每个应用栏命令：

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

每个 propertyName 映射到控件的一个属性（如标签或标题），resourceID 引用要从资源文件加载的字符串的资源标识符。请参见下面的 strings/en-US/resources.resjson 示例。

在此标记附带的 JavaScript 代码中，当加载 HTML 时必须调用 WinJS.Resources.processAll 函数才能使用资源字符串替换每个 data-win-res 属性中的属性。

应用栏示例

本示例演示如何本地化应用栏上的命令字符串。

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

通过