jquery.i18n 網站呈現各國語言

時間 2019-11-30

標籤 jquery.i18n jquery 網站呈現各國語言欄目 JQuery 简体版

原文原文鏈接

在作網站的時候可能會遇到不一樣語言切換的問題，實現的方法有不少種，本篇文章按照 js 加載的方法的來實現。html

應用到的 js 文件：jquery

jquery.i18n.properties.js

jquery.js

具體繁瑣的功能就不一一介紹實現了，下面作一個簡單的案例。git

文件目錄以下：github

strings_zh.properties 文件內容：瀏覽器

1 title = i18n 案例
2 
3 lang_demo = 這是一個 i18n demo
4 
5 lang_btn = 點擊切換
6 
7 li_lang1 = 一
8 li_lang2 = 二
9 li_lang3 = 三

strings_en.properties 文件內容：網站

1 title = i18n demo
2 
3 lang_demo = This is a i18n demo
4 
5 lang_btn = Change click
6 
7 li_lang1 = one
8 li_lang2 = two
9 li_lang3 = three

index.html 文件內容：spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>i18n 案例</title>
 6 </head>
 7 <body>
 8 <div>
 9     <p data-lang="lang_demo">這是一個 i18n demo</p>
10     <button data-lang="lang_btn" onclick="changeClick()">點擊切換</button>
11     <ul>
12         <li data-lang="li_lang1">一</li>
13         <li data-lang="li_lang2">二</li>
14         <li data-lang="li_lang3">三</li>
15     </ul>
16 </div>
17 <script src="js/jquery-1.11.3.min.js"></script>
18 <script src="js/jquery.i18n.properties-1.0.9.js"></script>
19 <script>
20     let lang = "zh";
21 
22     function changeClick() {
23         if (lang === "zh") {
24             lang = "en"
25         } else {
26             lang = "zh"
27         }
28         jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件
29             name: 'strings', //資源文件名稱
30             path: 'language/', //資源文件路徑
31             language: lang,
32             cache: false,
33             mode: 'map', //用Map的方式使用資源文件中的值
34             callback: function () {//加載成功後設置顯示內容
35                 for (let i in $.i18n.map) {
36                     $('[data-lang="' + i + '"]').text($.i18n.map[i]);
37                 }
38                 document.title = $.i18n.map['title'];
39             }
40         });
41     }
42 
43 </script>
44 </body>
45 </html>