i18n 和 基于js的网页多语言框架 jquery.i18n的介绍

i18n = internationalization， 这个单词 i 开头， n 结尾，中间18个字母，所以简称 i18n。

 

jquery.i18n，是一个基于jquery的在网页上实现多语言支持的js框架。Repo: https://gitee.com/mirrors/jquery.i18n

这个框架本质上就是自动读取json文件，然后用json文件中的文本渲染页面。

使用很简单，有如下几步：

1. 引用jquery和jquery.i18n的js文件

<script src="../jquery.min.js"></script>
<script src="../jquery.i18n.min.js"></script>

2. 对显示文字的标签，加上一个 i18n 的属性：

<div i18n="footer.about">About</div>

3. 在html中加入如下这段html代码：

 <script>
        $(document).ready(function() {
            /*默认语言*/
            var defaultLang = "en";
            $("[i18n]").i18n({
                defaultLang: defaultLang,
                filePath: "i18n/",
                filePrefix: "i18n_",
                fileSuffix: "",
                forever: true,
                callback: function() {
                    console.log("i18n is ready.");
                }
            });
            /*切换为中文 - 按钮*/
            $(".chinese").click(function() {
                $("[i18n]").i18n({
                    defaultLang: "cn",
                    filePath: "i18n/"
                });
            });
            /*切换为英文 - 按钮*/
            $(".english").click(function() {
                $("[i18n]").i18n({
                    defaultLang: "en",
                    filePath: "i18n/"
                });
            });

        });
</script>

这段代码就是在告诉框架，存放不同语言的json文件的路径（filePath: "i18n/"）和文件名的前缀（filePrefix: "i18n_"），比如中文就是 i18n/i18n_cn.json