Question

我想使用this page of the jQuery Mobile Demo site（jQuery Mobile 1.4.2）中的代码和i18next翻译工具，但是在移动设备上查看表格时表格标题会消失。

我理解当窗口小于某个阈值时，jQM会获取标头标记文本并将其放在每行的值前面。

我制作了一个演示here 。要查看它的实际效果，请更改浏览器的宽度。

顶部表格具有预期的行为，但是表格标题的内联文字，下表格显示了问题，i18n表格标题在宽屏幕上正确显示为一，二，三，四，并且它们消失在狭窄的屏幕。

我正在寻找一种在移动视图标题中使用i18n翻译的方法，因为它已经在网站的其他部分实施，并且效果很好。

感谢您的帮助！

Answer 1

您需要做的就是在翻译文本后rebuild表格。

为什么呢？ table 小部件复制thead的标头，在内容之前将其添加到tbody并隐藏它们。在小屏幕上，thead被隐藏，复制的标题可见。

翻译后，您只对thead标题应用更改，而不对tbody中的隐藏标题应用。

i18n.init({
    preload: ['en', 'dev']
});
i18n.init({
    detectLngQS: 'lang'
});
i18n.init(function (t) {
    $("body").i18n();
    var appName = t("app.name");
    $("tableID").table("rebuild"); /* this */
});

<强> Demo

具有i18next翻译的jQuery Mobile Table Reflow Headers

1 个答案: