jQuery移动按钮和i18next转换 [英] Jquery mobile button and i18next translations
问题描述
一段时间以来，我一直在尝试解决i18next按钮转换问题.如果我从第1页移至第2页，然后移至第1页，则按钮呈现会中断: 无论如何，从第1页移到第2页再从第1页移到第1页后，按钮1上的按钮是否不会断裂
I have been trying to solve i18next button translation problem for a while now. The button rendering breaks if I move from page1 to page2 then to page1: is there anyway to stop the button on page1 from breaking after moving from page1 to page 2 then page1
下面是使用的标记:
<!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>
推荐答案
确保i18Net初始化仅运行一次. pagebeforecreate在导航到的每个页面上运行.您可以这样:
Make sure the i18Net init only runs once. pagebeforecreate runs for each page as it is navigated to. You could do it like this:
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;
});
}
});
这是 DEMO
Here is a DEMO
您也只能在主页的页面创建上运行它:
You could also only run it on the pagecreate of the home page:
$(document).on("pagebeforecreate", "#home_page", function () {
i18n.init(i18nOpts).done(function () {
$("html").i18n();
IsInit = true;
});
});
或者不将其应用于整个$("html").
Or not apply it to the whole $("html").
这篇关于jQuery移动按钮和i18next转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
