Javascript Jquery移动按钮和i18next翻译_Javascript_Jquery_Jquery Mobile_I18next

Javascript Jquery移动按钮和i18next翻译

javascript jquery jquery-mobile

Javascript Jquery移动按钮和i18next翻译,javascript,jquery,jquery-mobile,i18next,Javascript,Jquery,Jquery Mobile,I18next,我一直在努力解决i18下一步按钮翻译的问题有一段时间了。如果从第1页移动到第2页，然后再移动到第1页，则按钮渲染将中断：在从第1页移动到第2页然后再移动到第1页后，是否仍有方法阻止第1页上的按钮断开以下是使用的标记： <!DOCTYPE html> <html> <head> <title>Mbank</title> <meta name="viewport" content="width=device-wid

我一直在努力解决i18下一步按钮翻译的问题有一段时间了。如果从第1页移动到第2页，然后再移动到第1页，则按钮渲染将中断：在从第1页移动到第2页然后再移动到第1页后，是否仍有方法阻止第1页上的按钮断开

以下是使用的标记：

<!DOCTYPE html>
<html>
<head>
    <title>Mbank</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/i18next/i18next-1.7.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div id="home_page" data-role="page">
    <div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>

        <h2 data-i18n>app.title</h2>

    </div>
    <div data-role="content">

        <a href="#home_page2" id="index-conatact" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page2</a>
    </div>

    <div data-role="footer">
        <center>
            <p data-i18n>app.footer</p>
        </center>
    </div>
</div>

<div id="home_page2" data-role="page">
    <div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>

        <h2 data-i18n>app.title</h2>

    </div>
    <div data-role="content">

        <a href="#home_page" id="index-conatactwws" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page1</a>
    </div>

    <div data-role="footer">
        <center>
            <p data-i18n>app.footer</p>
        </center>
    </div>
</div>

<script>
    $(document).on("pagebeforecreate", function () {
        console.log(' sample pagebeforecreate');
        var i18nOpts = {
            resStore: {
                dev: {
                    translation: {
                        app: {
                            button: 'Button i18',
                            home: 'Home i18',
                            label: 'Label i18',
                            footer: 'Footer i18',
                            title: 'i18n Translation!',
                            li: 'Read-only',
                            lilink: 'Linked item',
                            col: 'Collapsible',
                            page1: 'to page 1', page2: 'to page 2',
                            colContent: 'Lorem ipsum dolor sit amet.'

                        }
                    }
                }

            }
        };

        i18n.init(i18nOpts).done(function () {
            $("html").i18n();
        });
    });
</script>
</body>
</html>


姆班克
app.title
app.footer
app.title
app.footer
$（文档）。在（“pagebeforecreate”上，函数（）{
log（'samplepagebeforecreate'）；
变量i18nOpts={
resStore：{
开发人员：{
翻译：{
应用程序：{
按钮：“按钮i18”，
家：“家i18”，
标签：“标签i18”，
页脚：“页脚i18”，
标题：“i18n翻译！”，
李：“只读”，
lilink:“链接项”，
col:'可折叠'，
第1页：“至第1页”，第2页：“至第2页”，
colContent:“Lorem ipsum dolor sit amet。”
}
}
}
}
};
i18n.init（i18nOpts）.done（函数（）{
$（“html”）.i18n（）；
});
});

确保i18Net init只运行一次。pagebeforecreate在导航到每个页面时为其运行。你可以这样做：

var i18nOpts = {
    resStore: {
        dev: {
            translation: {
                app: {
                    button: 'Button i18',
                    home: 'Home i18',
                    label: 'Label i18',
                    footer: 'Footer i18',
                    title: 'i18n Translation!',
                    li: 'Read-only',
                    lilink: 'Linked item',
                    col: 'Collapsible',
                    page1: 'to page 1', page2: 'to page 2',
                    colContent: 'Lorem ipsum dolor sit amet.'
                }
            }
        }
    }
};
var IsInit = false;

$(document).on("pagebeforecreate", function () {
    if (!IsInit){
        i18n.init(i18nOpts).done(function () {
            $("html").i18n();
            IsInit = true;
        });
    }
});

这里有一个

您也只能在主页的pagecreate上运行它：

$(document).on("pagebeforecreate", "#home_page", function () {
    i18n.init(i18nOpts).done(function () {
        $("html").i18n();
        IsInit = true;
    });
});

或者不将其应用于整个$（“html”）。

而不是pagebeforecreate try pagebeforeshow。如果尝试了，它将不起作用，并且根据JQM docs（）您有以下情况：请注意，通过绑定到pagebeforecreate，您可以在jQuery Mobile的默认小部件自动初始化之前操作标记。例如，假设您希望通过JavaScript而不是在HTML源代码中添加数据属性，这就是您要使用的事件。“所以我觉得pagebeforecreate是最好的地方好吧，我现在明白了这个问题。查看我的答案以获得修复…谢谢Ezanker你认为同样的事情也适用于单个页面吗？对于单个页面，你可能应该在加载每个页面时对其进行初始化。