jQuery国际化i18n--中文、英文、中文繁体

最新推荐文章于 2024-03-17 09:51:44 发布

慢半拍、

最新推荐文章于 2024-03-17 09:51:44 发布

阅读量2.3k

点赞数 4

分类专栏： jQuery 文章标签： jquery i18n 国际化中英文切换

本文链接：https://blog.csdn.net/huanhuan03/article/details/104907966

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于jquery-i18n的了解，从零零散散的查阅拼凑起来，拼了一份完整的示例，这个博主的这篇给了我很大帮助：
首先，结构目录如下：
在这里插入图片描述
jquery.i18n.js：

(function($) {
    $.fn.extend({
        i18n: function(options) {
            var defaults = {
                lang: "",
                defaultLang: "",
                filePath: "i18n/",
                filePrefix: "i18n_",
                fileSuffix: "",
                forever: true,
                callback: function() {}
            };

            function getCookie(name) {
                var arr = document.cookie.split('; ');
                for (var i = 0; i < arr.length; i++) {
                    var arr1 = arr[i].split('=');
                    if (arr1[0] == name) {
                        return arr1[1];
                    }
                }
                return '';
            };

            function setCookie(name, value, myDay) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + myDay);
                document.cookie = name + '=' + value + '; expires=' + oDate;
            };

            var options = $.extend(defaults, options);

            if (getCookie('i18n_lang') != "" && getCookie('i18n_lang') != "undefined" && getCookie('i18n_lang') != null) {
                defaults.defaultLang = getCookie('i18n_lang');
            } else if (options.lang == "" && defaults.defaultLang == "") {
                throw "defaultLang must not be null !";
            };

            if (options.lang != null && options.lang != "") {
                if (options.forever) {
                    setCookie('i18n_lang', options.lang);
                } else {
                    $.removeCookie("i18n_lang");
                }
            } else {
                options.lang = defaults.defaultLang;
            };

            var i = this;
            $.getJSON(options.filePath + options.filePrefix + options.lang + options.fileSuffix + ".json", function(data) {
                var i18nLang = {};
                if (data != null) {
                    i18nLang = data;
                }

                $(i).each(function(i) {
                    var i18nOnly = $(this).attr("i18n-only");
                    if ($(this).val() != null && $(this).val() != "") {
                        if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "value") {
                            $(this).val(i18nLang[$(this).attr("i18n")])
                        }
                    }
                    if ($(this).html() != null && $(this).html() != "") {
                        if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "html") {
                            $(this).html(i18nLang[$(this).attr("i18n")])
                        }
                    }
                    if ($(this).attr('placeholder') != null && $(this).attr('placeholder') != "") {
                        if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "placeholder") {
                            $(this).attr('placeholder', i18nLang[$(this).attr("i18n")])
                        }
                    }
                });
                options.callback();
            });
        }
    });
})(jQuery);

i18n文件夹下的三个.json文件，放入中英文繁体中文各自对应的翻译：
i18n_cn.json：

{
    "i18n.product": "产品与服务",
    "i18n.success-case": "解决方案",
    "i18n.custom-case": "客户案例"
 }

i18n_en.json：

{
    "i18n.product": "products & service",
    "i18n.success-case": "success-case",
    "i18n.custom-case": "custom-case"
 }

i18n_cnT.json：(注意：这里的后缀cnT是自定义起的，这个json文件放繁体中文)

{
    "i18n.product": "產品與服務",
    "i18n.success-case": "解决方案",
    "i18n.custom-case": "客戶案例"
 }

index.html：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQ国际化</title>
    <style>
        .select_item{float:right;margin:12px 10px;font-family:"microsoft yahei";position:relative}
        .select_result{width:84px;line-height:38px;height: 50px; background: #666; text-align:center;border-radius:4px;text-indent:-8px;cursor:pointer;color:#fff;font-size:14px;cursor:no-drop}
        .select_result .triangle{border:5px solid transparent;border-top:5px solid #fff;position:absolute;top:16px;right:8px}
        .select_item ul{display:none;position:absolute;top:100%;right:0;height:111px;width:83px;background:#202833;border-radius:0 0 4px 4px;border-top-color:#f3f3f3;margin-top:-4px}
        .select_item ul li{text-align:center;cursor:pointer;line-height:35px;height:35px;color:#fff}
        .select_item ul li:hover{background:#000;font-weight:700}
    </style>
</head>
<body>
    <ul>
        <li>
            <span i18n="i18n.product">产品与服务</span>    <!-- 注意i18n这个属性，后面的值就是各个json文件里面的名字 -->
         </li>    
         <li>
            <span i18n="i18n.success-case">解决方案</span>
         </li>
         <li>
            <span i18n="i18n.custom-case">客户案例</span>
         </li>
    </ul>
    <!-- 切换按钮 -->
    <div class="select_item clearfix left">
        <div class="select_module_con left">
            <div class="select_result"> 
                <span></span> 
                <div class="triangle"></div> 
            </div> 
            <ul> 
                <li>中文</li>
                <li>English</li> 
                <li>繁体中文</li> 
            </ul> 
        </div> 
    </div>


    
    <script src="./js/jquery-1.11.3.js"></script>
    <script src="./js/jquery.i18n.js"></script>
    <script>
        /*默认语言en*/
        var defaultLang = "en"
        function languageSelect(defaultLang){
            $("[i18n]").i18n({
                defaultLang: defaultLang,
                filePath: "i18n/",
                filePrefix: "i18n_",
                fileSuffix: "",
                forever: true,
                callback: function(res) {}
            });
        }
        languageSelect(defaultLang);
        
        // 切换按钮
        function select(){
            $(document).click(function(){
                $(".select_module_con ul").slideUp();
            })
            var module=$(".select_result"); 
            module.click(function(e){
            e.stopPropagation();
            var ul=$(this).next();
            ul.stop().slideToggle();
            ul.children().click(function(e){
                e.stopPropagation();
                $(this).parent().prev().children("span").text($(this).text());
                ul.stop().slideUp();
                var condition = $(this).text();  //根据按钮显示  中 文/English  
                if(condition == 'English'){ 
                    defaultLang = "en",
                    languageSelect(defaultLang);
                }else if (condition == '中文'){
                    defaultLang = "cn",
                    languageSelect(defaultLang);
                }else {
                    defaultLang = "cnT",
                    languageSelect(defaultLang);
                }
            })
            })
        }
        $(function(){
            select(); 
        })

    </script>
</body>
</html>

预览效果：
在这里插入图片描述
ok，到这里一切就完了，当你高兴的把这些代码复制过去，准备预览时，发现控制台报了个错：

于是又一次陷入蒙圈，仔细看了一下报错是跨域类的问题，第二个错是读取json文件报错，读取本地json文件的时候，出现了跨域，点进去源码看了报错位置，这个读取的时候用的是ajax方式，于是就把这个代码放在后台搭建的nginx服务器上，完美！！！