Three kinds of Methods of switching sites in English

　　Foreword

　　Now many companies like to make the site in English switch, such as a snack official website

　　So the question is, typically implemented in English to switch what methods? Let me summarize the three methods (due to the limited technical level, if wrong, correct me welcome message)

　　Solution

　　　　 Method 1: ( in Chinese and English to do a, then use a different folder distinguish, when clicked switch languages, links to jump to a different folder on the line)

　　　　　　Advantages: each version is separated from the relatively stable, will not interfere with each other (except for the common information database)

　　　　　　Disadvantages: modify a style or function, we should change operation (code logic, to replace the picture, modify the style, etc.) on all language versions repeated once more burdensome

　　　　　　 Scene: personally I think that meets the following two kinds of scenarios can consider using this method

　　　　　　 Note: If you switch the language version of the very few, and the site itself is not complicated (such as the electricity supplier site is not recommended)

　　　　　　　　 The overall content is relatively fixed, the layout is relatively simple, flat, not too frequent changes (such as news sites is not recommended)

　　　　　Method 2: (With jquery plugins - jquery.i18n.properties)

　　　　　　See: https://blog.csdn.net/aixiaoyang168/article/details/49336709

　　　　　　 Note: see comment downstairs feel this is very good blogger, on the question of who will give answers

　　　　　Method 3: (the whole point of using Microsoft dictionary translation)

　　　　　　See: https://blog.csdn.net/CSDN_LQR/article/details/78026254

　　　　　　 Note: because of the trouble and slag technology, so this method is used. If you ask me why I do not have Google translation of the entire station, due to the FQ, FQ, FQ

　　Demo (the following code for the method ③ original sample code, I modify the display contents and references jquery CDN)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p {
                text-align: center;
            }
        </style>
    </head>

    <body>

        <button id="change">中英文切换</button><br />
        <p> Tsuburi </ the p- > 

        < div the above mentioned id = "" > 
            happy day is the day, the day is not happy day, why not put down is not happy, happy about choice 
        </ div > 

        < Script src = "HTTPS: // CDN. staticfile.org/jquery/1.11.1/jquery.min.js " > </ Script > 
        < Script the src =" JS / language.js " > </ Script > 
        < Script > 
            $ ( " #change " ) .click ( function () { 
                Translate (); 
            }) 
        </script>
    </body>

</html>

　　Here is my method according to Third, the whole point of using Microsoft dictionary translation in English switching Demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>

        <button id="change">中英文切换</button><br />
        <p style="text-align: center;">变变变</p>
        <div>
            "Tu Tu: Programmer has three treasures: Mensao, overtime, product manager for computer repair Sambo: cottage, revision, and then down; boss has three treasures: flicker, find the money, wash the brain SE has three treasures: Che Dan, specifications, CCB. The project manager has three treasures: the progress of the process, the customer has to do a report Sambo, I want, I want, I would like to operations manager has three treasures: data, events, engage in channel; marketing manager has three treasures:! research, planning, job-hopping mad editing has three treasures: topics, overtime, Pibi draft account manager has three treasures: can blow, diligent, good drinker operating treasures: yellow drawing, lottery, soft presentation; product manager has three treasures:! prototypes, wrangling, judgmental team. manager has three treasures: the construction group, meeting, performance evaluations HR has three treasures: recruitment, training, values coaching search consultant has three treasures:. JD, CV, telephone scrambling department manager has three treasures: K people, yourselves, blowing results ... ... consultants have three treasures: program, yourselves, do presentations operations manager has three treasures: registered, active, efficient operation of Commissioners did not have real treasures, demand data, write battlefield agile coach. Sambo: billboards, iteration, mad sermons I remember Sambo is programmers more money, less then die early; extension workers have good activity Sambo ~ ~ ~ beauty draw SQA has three treasures: question, prick, writing reports ......!. Code migrant workers Sambo: Bug, Debug, Newbug designers has three treasures: drawing, overtime, business manager has been pointing treasures: negotiations for the amount, everywhere; testers have three treasures: contests, tender, needed to blow off Johnson had Party. . Sambo: cashier, accounting, operation and maintenance Sambo great leader must be: live, less sleep, good character; reboot, reinstall, change the computer; on call, night does not fall, often see "IT operation and maintenance of the road "." --------- 

        </ div > 

        < Script src = "https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js" > </ Script > 
        <script src="js/language.js"></script>
        <script src="js/microsoft.js"></script>
        <script>
            $("#change").click(function() {
                translate();
            })
        </script>
    </body>

</html>

　　language.js source

$(function(){ 
      // do something 
    var script=document.createElement("script");  
    script.type="text/javascript";  
    script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";  
    document.getElementsByTagName('head')[0].appendChild(script);  


    var value = sessionStorage.getItem("language");
    document.onreadystatechange = function () {
        if (document.readyState == 'complete') {
            if(value==="1"){
                Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
            }
        }
    }
    function onProgress(value) {
    }
    function onError(error) {
    }
    function onComplete() {
        $("#WidgetFloaterPanels").hide();
    }
    function onRestoreOriginal() { 
    }
});

function translate(){
    var value = sessionStorage.getItem("language");
    if(value==="1"){
        sessionStorage.setItem("language", "0"); 
    }else{
        sessionStorage.setItem("language", "1");
    }
    window.location.reload();//刷新当前页面.
}

　　①: above language.js written dead Chinese turn English (zh-CHS turn EN) , if the project needs to be converted to other languages, directly language.js can be custom extensions　　

　　②: Microsoft CDN translation dictionary whole point source (that is, above me microsoft.js)

　　http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**

　 Added: But this method there is a small problem, that is, after each click to switch languages, there will be pop-up box and hover effect, as shown below

　　Pop-up box: 　　 hover effect:

　　After some search, finally found a solution

　　Note: To remove the bomb after the translation box and hover effect, and not directly inside Microsoft introduced translation dictionary language.js CDN link the entire station

　　　　CDN should copy down source, into a single file js introduction,

　　　　同时，修改源码里面的 Pb = "inline-block" 和 B = "block" 分别改成 Pb = "none" 和 B = "none"

Three kinds of Methods of switching sites in English

②: Microsoft CDN translation dictionary whole point source (that is, above me microsoft.js)

完整代码已上传至github，有需要的小伙伴欢迎下载：https://github.com/tujingyu/Chinese-and-English-change

Guess you like