zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

JSjQuery网页语言框架 基于 介绍 I18N
2023-09-14 09:13:03 时间

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