jquery.i18n的国际化翻译

Myth丶恋晨 2021-10-24 01:32 410阅读 0赞

html中写好样式

<div class="container">
            <div class="top">
                
                <div class="top1">
                    <div id="chinese" class=" AA">切换为中文</div>
                    <div id="english" class=" AA">switch to english</div>
                    <div id="Vietnam" class=" AA">Việt nam</div>
                </div>
            </div>
            
            <div class="register-box">
                <div class="telphone">
                    <input type="text" id="telphone" i18n="footer.phone" placeholder="footer.phone" value="">
                </div>
                <div class="password">
                    <input type="text" id="password" i18n="footer.password" placeholder="footer.password" value="">
                    <span id="code" style="display:none"></span>
                </div>
                <div class="telcode">
                    <input type="text" id="gg" i18n="footer.yanzhen" placeholder="footer.yanzhen" value="">
                    <button id="getcode" i18n="footer.Getverification">Get verification code</button>
                </div>
                <div class="registerbtn" id="registerbtn">
                </div>
                <div class="bottomtitle">
                    <span i18n="footer.Apply">By clicking 'apply now' you agree</span><span id="register"
                        i18n="footer.registration">《User registration agreement》</span>
                </div>
    
    
            </div>
        </div>

引入css文件 如<link rel="stylesheet" href="./style/register.css"> 写好css样式

input {
        border: 0;
        background: #fbe8ea;
    }
    
    button {
        border: 0;
    }
    
    .container {
        width: 7.5rem;
        height: 100%;
        background: #e96459;
    }
    
    .logo,
    .background {
        width: 100%;
    }
    
    .background img,
    .logo img {
        width: 100%;
    }
    
    .register-box {
        margin: auto;
        width: 6.9rem;
        height: 5.2rem;
        background-size: 100% 100%;
        padding-top: 0.5rem;
        background: #fbe8ea
    }
    
    .telphone,
    .password,
    .telcode {
        width: 5.9rem;
        margin-left: .7rem;
        height: .7rem;
        line-height: .7rem;
        border-radius: .14rem;
        border: 1px solid #bfbfbf;
    }
    
    #telphone,
    #password,
    #telcode {
        width: 5rem;
        border: none;
        outline: none;
        margin-left: .2rem;
        font-size: .28rem;
    }
    #gg {
        width: 3rem;
        border: none;
        outline: none;
        margin-left: .2rem;
        font-size: .28rem;
    }
    .password {
        margin-top: .4rem;
        margin-bottom: .4rem;
    }
    
    #code {
        float: right;
        margin-right: 0.5rem;
    }
    
    #codetxt {
        float: right;
        margin-right: .5rem
    }
    
    .registerbtn {
        margin-left: .7rem;
        width: 5.9rem;
        height: .9rem;
        line-height: .9rem;
        border-radius: .9rem;
        margin-top: .35rem;
        border: none;
        background-image:url(../image/enbutton.png);
        background-repeat:  no-repeat ;
        align-items:center;
        background-size: 100% 100%;
        overflow: hidden;
    }
    
    .display{
        display: none;
    }
    
    #getcode {
        margin-top: 0.1rem;
        width: 2.1rem;
        height: 80%;
        text-align: center;
        font-size: .24rem;
        color: #e45849;
        background: #fbe8ea;
        font-weight: 600;
        float: right;
        border-left: 1px solid #bfbfbf;
    }
    
    .bottomtitle {
        width: 6.5rem;
        margin-left: .5rem;
        border: none;
        height: .4rem;
        margin: 0rem auto;
        margin-top: 0.1rem;
        font-size: .16rem;
        color: rgb(177, 177, 177);
        transform: scale(0.8);
    }
    
    #register {
        color: #da362d;
    }
    .top{
        display: inline-block;
       background-color:  #FBE9EB;
       height: 30px;
       width: 100%;
       margin: 0 auto;
    }
    .top1{
       
        
        text-align: center;
        line-height: 30px;
        
        
        
        
    }
    .AA{
        display: inline-block;
        border-right: 1px solid #D2402A;
        text-align: center;
        line-height: 20px;
        padding-right: 5px;
        height: 20px;
        color: #CF3216;
        
        font-weight: 700;
    }

引入jquery.i18n.min.js  如

![20190819165130484.png][]

![20190819164514192.png][]

./i18n/jquery.i18n.min.js通用代码

js代码，ready读取

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

新建文件 cn.json en.json

![20190819164801649.png][]

如cn.json

{
        "footer.about" :"关于",
        "footer.contact": "联系我们",
        "footer.phone": "请输入手机号",
        "footer.yanzhen": "请输入校验码",
        "footer.password": "请输入密码",
        "footer.Getverification": "获取验证码",
        "footer.Apply": "点击“立即申请”即表示您同意",
        "footer.registration": "《用户注册协议》"
    }

最后的效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70 1][]

[20190819165130484.png]: /images/20211023/3a32450b47d445c58b1a38d7bcd8a73a.png
[20190819164514192.png]: /images/20211023/831af52fe65545129129ea2bfe468a83.png
[20190819164801649.png]: /images/20211023/d98f745e03ba4b419d538f8f88100c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190819165356141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70 1]: /images/20211023/c040f75b5f894bc98151f4d9f4bf3ec5.png