zoukankan      html  css  js  c++  java

  • 关于在静态html中实现语言切换的思路与实现

     

    在项目中只用到了三种语言：英文、中文简体、中文繁体。所以我首先想到了最笨的方法：1.直接将三种语言写在html中，显示当前设置的语言隐藏其它两种来实现。2.使用css伪元素的content:attr(en)形式，将语言写在元素属性中，这种也是一种笨方法。3.前两种由于自己觉得不够完美不适合更多语言的情况，所以又想到了一种更方便一点的方法，原理与第2种类似。

    实现

    说明：以下所代码自己测试在firefox新版本和ie8中有效，如果自己测试兼容性不好，请网友们自己改一下代码吧微笑

    文档目录

    languagetest/

    ├───test.html

    ├───zh.css

    └───en.css

    原理

    三种方法都是通过加载对应语言的css来实现，一般在vc或其它程序嵌套浏览器内核中使用不了cookie来存放当前设置的语言（我同事那个不行，他是通过读取注册表来设置的），读取当前设置的语言部分在本文中不体现。

    第一种

    代码如下test.html：

    [html] view plain copy
     
    1. <!doctype html>  
    2. <html>  
    3. <head>  
    4. <script>  
    5. //创建一个link来引入控制语言的css  
    6.  function languageLink (type) {  
    7.     var link = document.createElement('link');  
    8.     link.id = "lang";  
    9.     link.type = "text/css";  
    10.     link.rel = "stylesheet";  
    11.     link.href = type+".css";  
    12.     link.langType = type;  
    13.     return link;  
    14. }  
    15. //根据语言类型切换  
    16.  function changeLang(type){  
    17.     var defaultLang = "zh";  
    18.     if(type) defaultLang= type;  
    19.     var link = document.getElementById('lang');  
    20.     if(link) {  
    21.         if(link.langType == defaultLang) return;  
    22.         link.parentNode.removeChild(link);  
    23.     }  
    24.     var head = document.getElementsByTagName('head');  
    25.     head[0].appendChild(languageLink(defaultLang));  
    26. }  
    27. //文档加载到这里时加载默认语言  
    28.  +function () {  
    29.     changeLang();  
    30. }();  
    31. //toggle 两种语言切换  
    32.  function changeLanguage (){  
    33.     var link = document.getElementById('lang');  
    34.     var currentLangType = 'zh';  
    35.     if(link){  
    36.         var langtype = link.langType;  
    37.         switch(langtype){  
    38.             case 'zh': currentLangType = 'en';break;  
    39.             case 'en': currentLangType = 'zh';break;  
    40.         }  
    41.     }  
    42.         changeLang(currentLangType);  
    43. }  
    44. </script>  
    45. </head>  
    46. <body>  
    47. <button onclick="changeLanguage()">切换</button>  
    48. <button onclick="changeLang('en')">英文</button>  
    49. <button onclick="changeLang('zh')">中文</button>  
    50. <span style="font-size:14px;"><strong></strong></span><pre name="code" class="html"><!-- 一种方法 显示隐藏元素法-->  
    <h2>一种方法 利用伪元素显示属性法 该方法不能选中文字</h2> <div class="language" lang-zh = "这里中文1" lang-en = "here Enlish1"></div> <div class="language" lang-zh = "这里中文2" lang-en = "here Enlish12"></div> <div class="language" lang-zh = "这里中文3" lang-en = "here Enlish13"></div> <div class="language" lang-zh = "这里中文4" lang-en = "here Enlish14"></div>
    [html] view plain copy
     
    1.  <!-- 第二种方法 利用伪元素显示属性法-->  
    2.    <h2>另一种方法 显示隐藏元素法  该方法比较合适，麻烦一点点</h2>  
    3.    <div><span class="language-zh">我是中文</span><span class="language-en"> i am English</span></div>  
    4.    <div><span class="language-zh">我是中文111</span><span class="language-en"> i am English111</span></div>  
    5.      
    6.    <br/>  
    7.    <br/>  
    8.    <br/>  
    9.    <h2>两种方法都是通过切换css实现</h2>  
    10. </body>  
    11. </html>  
    
zh.css：



    

    

    [css] view plain copy

     
    

    

    

      

    1. <span style="font-size:14px;"><strong><span style="font-size:14px;"><strong></strong></span></strong></span><pre name="code" class="css">/* 显示lang-zh属性内容 */  
      2. 

    
.language:before{content:attr(lang-zh);}
    

    

    

    [css] view plain copy

     
    




    




    

      

    1. /* 隐藏英文 */  
      2. 




    



 .language-en{display:none;}



    
en.css：



    

    

    [css] view plain copy

     
    

    

    

      

    1. /* 显示lang-en属性内容 */  
      2. 

    2. .language:before{  
      3. 

    3.     content:attr(lang-en);  
      4. 

    4. }  
      5. 

    5. /* 隐藏中文 */  
      6. 

    6.  .language-zh{  
      7. 

    7.     display:none;  
      8. 

    8. }  
      9. 

    
第二种方法




    代码同上（第一种方法）
    


    第三种方法
    

    下面就介绍第三种方法
    

    由于上面两种方法都是把语言写在html中，这样不容易维护和实现更多种语言，其实我们可以将语言包定义为css文件，通过切换css来实现不同语言的展现。下面看一下代码片段:
    

    test.html
    

    下面是一个展示姓名和地址表单的列表
    


    

    

    [html] view plain copy

     
    




    




    

      

    1. <table>  
      2. 

    2.     <tr>  
      3. 

    3.         <td><label for="name"><span class="language-name"></span></label></td>  
      4. 

    4. <pre class="html" name="code">        <td><label for="address"><span class="language-address"></span></label></td>  
      5. 




    

    

    

    [html] view plain copy

     
    




    




    

      

    1. </tr>  
      2. 




    

    

    

    [html] view plain copy

     
    




    




    

      

    1. <tr>  
      2. 

    2.     <td><input type="text" id="name" name="name"/></td>  
      3. 

    3.     <td><input type="text" id="address" name="address"/></td>  
      4. 

    4. </tr>  
      5. 




    



</table>

    

    

    zh.css
    


    

    

    [html] view plain copy

     
    




    




    

      

    1. .language-name:before{  
      2. 

    2.     content:"名称";  
      3. 

    3. }  
      4. 

    4. .language-address:before{  
      5. 

    5.     content:"地址";  
      6. 

    6. }  
      7. 




    



en.css


    

    

    [html] view plain copy

     
    




    




    

      

    1. .language-name:before{  
      2. 

    2.     content:"name";  
      3. 

    3. }  
      4. 

    4. .language-address:before{  
      5. 

    5.     content:"address";  
      6. 

    6. }  
      7. 




    




    原理不多说了，就是css引用的切换。至于css的伪元素有不太明白的自行查询一下吧。
    

     
    

     
    

     
    

     
    

     
    

    

    前端开发中的多语言切换，可使用js动态替换内容
    

    1、在用户点击切换语言后，把选择的语言版本保存在cookie中
    

    //写入cookie函数
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取cookie
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
    else
    return null;
}

//setCookie('lan','hk');    繁体中文
//setCookie('lan','cn');    简体中文
//setCookie('lan','en');    英文

    

    2、在包含静态文本的标签中，添加一个属性：set-lan=”html:name” 
    属性值中的html代表内容的位置，name代表要替换的文字的标识 
    例如：
    

    <span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />

这些就需要前端工程师在开发过程中添加进去，并且，要切换语言文字的外面都必须要有一个标签包裹，否则无法进行切换；
如：
<span set-lan="html:name"><i class="icon"></i>名字</span>
这样的代码，是无法把“名字”替换成“Name”的，会把“名字”前面的i标签也一起替换掉，如果不想把i标签也替换掉，就要在“名字”外面添加一个标签，改成：
<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>


    

    3、定义3个语言的标识+内容的json字符串
    

    var cn = {
            "name" : "姓名",
            "tel" : "电话",
            "email" : "邮箱",
        };

var hk = {
            "name" : "姓名",
            "tel" : "電話",
            "email" : "郵箱",
        };

var en = {
            "name" : "Name",
            "tel" : "Tel",
            "email" : "Email",
        };


    

    4、遍历带set-lan属性的标签，进行文本替换
    

    $('[set-lan]').each(function(){
    var me = $(this);
    var a = me.attr('set-lan').split(':');
    var p = a[0];   //文字放置位置
    var m = a[1];   //文字的标识

    //用户选择语言后保存在cookie中，这里读取cookie中的语言版本
    var lan = getCookie('lan');

    //选取语言文字
    switch(lan){
        case 'cn':
            var t = cn[m];  //这里cn[m]中的cn是上面定义的json字符串的变量名，m是json中的键，用此方式读取到json中的值
            break;
        case 'en':
            var t = en[m];
            break;
        default:
            var t = hk[m];
    }

    //如果所选语言的json中没有此内容就选取其他语言显示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) return true;   //如果还是没有就跳出

    //文字放置位置有（html,val等，可以自己添加）
    switch(p){
        case 'html':
            me.html(t);
            break;
        case 'val':
        case 'value':
            me.val(t);
            break;
        default:
            me.html(t);
    }

});


    

    以上是html中的文字替换，但是写在js中的文字怎么办？ 
    可以定义一个函数，来读取
    

    function get_lan(m)
{
    //获取文字
    var lan = getCookie('lan');     //语言版本
    //选取语言文字
    switch(lan){
        case 'cn':
            var t = cn[m];
            break;
        case 'hk':
            var t = hk[m];
            break;
        default:
            var t = en[m];
    }

    //如果所选语言的json中没有此内容就选取其他语言显示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) t = m; //如果还是没有就返回他的标识

    return t;
}

    

    

     
    


    

    那么在js中使用的文字就只要用此函数来读取就可以了 
    如
    

    alert('姓名');
改成
alert(get_lan('name'));
    

    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  JEDEC标准(JESD216)S FDP对串行Flash在系统中的应用
                    
    Gerrit使用简介
                    
    Gerrit2安装配置
                    
    SSH原理与运用（二）：远程操作与端口转发
                    
    SSH原理与运用（一）：远程登录
                    
    常用的几个工具网站
                    
    MQTT、CoAP
                    
    Gerrit代码Review实战
                    
    net share
                    
    Gitlab+Gerrit+Jenkins完整对接
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/gluncle/p/8631003.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看