jquery-i18next
Version:
jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
61 lines (53 loc) • 2.19 kB
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/22.5.0/i18next.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js" ></script>
<!-- <script src="/jquery-i18next.min.js" ></script> -->
</head>
<body>
<ul class="nav">
<li><a href="#" data-i18n="nav.home"></a></li>
<li><a href="#" data-i18n="nav.page1"></a></li>
<li><a href="#" data-i18n="nav.page2"></a></li>
</ul>
<div class="content">
<input data-i18n="[placeholder]input.placeholder; [title]input.placeholder" />
<p data-i18n="[html]userMessagesUnread" data-i18n-options='{ "name": "John", "count": 3 }'>
Hello <strong>{{name}}</strong>, you have {{count}} unread messages
</p>
</div>
<script>
// use plugins and options as needed, for options, detail see
// http://i18next.com/docs/
i18next.init({
// debug: true,
lng: 'en', // evtl. use language-detector https://github.com/i18next/i18next-browser-languageDetector
resources: { // evtl. load via xhr https://github.com/i18next/i18next-xhr-backend
en: {
translation: {
input: {
placeholder: "a placeholder"
},
nav: {
home: 'Home',
page1: 'Page One',
page2: 'Page Two'
},
userMessagesUnread_one: 'Hello <strong>{{name}}</strong>, you have an unread message',
userMessagesUnread_other: 'Hello <strong>{{name}}</strong>, you have {{count}} unread messages'
}
}
}
}, function(err, t) {
// for options see
// https://github.com/i18next/jquery-i18next#initialize-the-plugin
jqueryI18next.init(i18next, $, { useOptionsAttr: true });
// start localizing, details:
// https://github.com/i18next/jquery-i18next#usage-of-selector-function
$('.nav').localize();
$('.content').localize();
});
</script>
</body>
</html>