sample.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <html>
  2. <head>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/8.1.0/i18next.min.js" ></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.0/jquery-i18next.min.js" ></script>
  6. <!-- <script src="/jquery-i18next.min.js" ></script> -->
  7. </head>
  8. <body>
  9. <ul class="nav">
  10. <li><a href="#" data-i18n="nav.home"></a></li>
  11. <li><a href="#" data-i18n="nav.page1"></a></li>
  12. <li><a href="#" data-i18n="nav.page2"></a></li>
  13. </ul>
  14. <div class="content">
  15. <input data-i18n="[placeholder]input.placeholder; [title]input.placeholder" />
  16. </div>
  17. <script>
  18. // use plugins and options as needed, for options, detail see
  19. // http://i18next.com/docs/
  20. i18next.init({
  21. lng: 'en', // evtl. use language-detector https://github.com/i18next/i18next-browser-languageDetector
  22. resources: { // evtl. load via xhr https://github.com/i18next/i18next-xhr-backend
  23. en: {
  24. translation: {
  25. input: {
  26. placeholder: "a placeholder"
  27. },
  28. nav: {
  29. home: 'Home',
  30. page1: 'Page One',
  31. page2: 'Page Two'
  32. }
  33. }
  34. }
  35. }
  36. }, function(err, t) {
  37. // for options see
  38. // https://github.com/i18next/jquery-i18next#initialize-the-plugin
  39. jqueryI18next.init(i18next, $);
  40. // start localizing, details:
  41. // https://github.com/i18next/jquery-i18next#usage-of-selector-function
  42. $('.nav').localize();
  43. $('.content').localize();
  44. });
  45. </script>
  46. </body>
  47. </html>