英語のサイトの切り替え方法の三種類

 

  序文

  今、多くの企業は、次のような、英語のスイッチでサイトを作るのが好きスナック公式サイト

  

  そこで問題は、一般的にどのような方法を切り替えるように英語で実装されていますか?私は3つのメソッドを要約してみましょう(間違っている場合は、私にウェルカムメッセージを修正し、原因限られた技術的なレベルまで)

 

  

  ソリューション

      方法1: どうする中国語と英語で、スイッチの言語をクリックしたときに、区別別のフォルダを使用し、ライン上の別のフォルダにジャンプするリンク)

       利点:各バージョンは、比較的安定したから分離され、互いに干渉しない(共通情報データベースを除きます)

       短所:スタイルや機能を変更するには、我々は操作変更する必要があります(画像を置き換えるために、コードのロジックを、スタイルなどを変更する)すべての言語バージョンには、もう一度負担を繰り返します

       シーン:個人的に私はそれがシナリオ以下の2種類を満たしていると思います。この方法を使用することを検討することができます

          注意:あなたは非常に少数の言語バージョンを切り替え、サイト自体が複雑されていない場合(例えば電気の供給サイトとして推奨されません)

             全体的な内容は、レイアウトは、平らな、比較的簡単で、比較的固定され、あまりにも頻繁に変更はない(たとえば、ニュースサイトなどが推奨されません)

 

  

     方法2:(jQueryのプラグインで - jquery.i18n.properties)

      参照:https://blog.csdn.net/aixiaoyang168/article/details/49336709   

         注意:階下感じのコメントを参照答えを与えるだろう誰の質問に、これは非常に良いブロガーです

 

 

     方法3: マイクロソフト辞書翻訳を使用しての全体のポイント)

      参照:https://blog.csdn.net/CSDN_LQR/article/details/78026254

         注:なぜならトラブルやスラグ技術のため、この方法が使用されています。あなたは私に言わせれば、私が原因FQ、FQ、FQに、全体の駅のGoogleの翻訳を持っていない理由

 

 

  デモ(方法③元のサンプルコードの次のコード、Iは表示内容と参照jQueryのCDNを変更します)

<!DOCTYPE HTML > 
< HTML > 

    < ヘッド> 
        < メタのcharset = "UTF-8"  /> 
        < タイトル> </ タイトル> 
        < スタイル> 
            P { 
                テキスト整列センター
            } 
        </ スタイル> 
    </ ヘッド> 

    < ボディ> 

        < ボタンID = "変更" >中英文切换</ ボタン> < BR />
        > Tsuburi </ p型> 

        < divの上記のid =「」> 
            幸せな日は一日で、一日が幸せな日ではない、なぜダウン入れない選択肢について満足し、幸せではない
        。</ divの> 

        < スクリプトSRC =「HTTPS:// CDN。 staticfile.org/jquery/1.11.1/jquery.min.js " > </ スクリプト> 
        < スクリプトSRC =" JS / language.js " > </ スクリプト> 
        < スクリプト> 
            $(" #change " ).click(関数(){ 
                (翻訳); 
            })
        </ スクリプト>
    </ ボディ> 

</ HTML >

  ここに私の方法は、第三に、英語の切り替えデモでは、Microsoftの辞書の翻訳を使用しての全体のポイントに応じてあります

<!DOCTYPE HTML > 
< HTML > 

    < ヘッド> 
        < メタのcharset = "UTF-8"  /> 
        < タイトル> </ タイトル> 
    </ ヘッド> 

    < 身体> 

        < ボタンのid = "変更" >中英文切换</ ボタン> < BR /> 
        < p個のスタイル= "テキスト整列:センター;" >变变变</ P > 
        < divの>
            「火火:コンピュータの修理サンボのためのMensao、残業、プロダクトマネージャー:プログラマーは三宝あり、その後ダウンコテージ、リビジョン、およびを、上司は三宝あり:ちらつき、SEは三宝ている脳洗って、お金を見つける:チェダン、仕様、CCBを。三宝を持っている顧客はレポートサンボを行う必要があり、私は、欲しい私が欲しい、私は運用管理者への希望、プロセスの進捗::;マーケティングマネージャーは、三宝:!研究、企画、ジョブホッピング怒っていたデータ、イベントは、チャネルに従事するプロジェクトマネージャは三宝を持っています編集は三宝を持っている:トピック、残業、Pibiドラフトアカウントマネージャは三宝あり:吹くことができるが、勤勉、良い酒飲みオペレーティング宝物:黄色、描画、宝くじ、ソフト、プレゼンテーション、プロダクトマネージャーは、三宝:!プロトタイプ、論争、批判のチームを持っています。管理者は、三宝を持っています、採用、研修電話が部長をスクランブル三宝あり、三宝:. JD、CVを持っているコーチングの検索コンサルタント値:建設グループ、会議、性能評価のHRは三宝を持って結果を吹いて、自分をKの人々を...プログラム、自分、プレゼンテーションの運用管理者は、三宝ています:登録し、委員の積極的、効率的な運用が本当の宝物を持っていなかった、需要データ、戦場アジャイルコーチを書く...コンサルタントが3つの宝物を持っています。サンボは:!;:......質問、刺す、執筆レポート看板、反復、私はサンボはプログラマーより多くのお金であることを覚えている、少ないし、早く死ぬ狂っ説教普及員が良好な活性を有するサンボ~~~美しさは、SQAは三宝を持って描きます。コードの出稼ぎ労働者サンボ:描画、残業、ビジネスマネージャが指してきた宝物:どこでも量、交渉、テスターは三宝を持っている:バグ、デバッグ、Newbugデザイナーは三宝ているジョンソンは党を持っていた吹き飛ばすために必要なコンテスト、入札を、。 。サンボ:レジ、会計、運用、保守サンボ偉大な指導者でなければなりません:ライブ、少ない睡眠、良い性格、再起動、再インストールし、コンピュータを変更;呼び出しで、夜は落ちない、多くの場合、道路の「ITオペレーションとメンテナンスを参照してください"" --------- 

        </ divの> 

        < スクリプトSRC = "https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js" > </ スクリプト> 
        <スクリプトSRC = "JS / language.js" > </ スクリプト> 
        < スクリプトSRC = "JS / microsoft.js" > </ スクリプト> 
        < スクリプト> 
            $(" #change " ).click(関数(){ 
                変換( ); 
            })
        </ スクリプト> 
    </ ボディ> 

</ HTML >

  language.jsソース

$(関数(){ 
       // 何かを行う
    のvarスクリプト=のdocument.createElement( "スクリプト" );   
    script.type = "テキスト/ javascriptの" ;   
    script.src = "http://www.microsoftTranslator.com/ajax/v3 /WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**」;   
    document.getElementsByTagName( '頭')[0 ] .appendChild(スクリプト)、   


    VaRの値= sessionStorage.getItem( "言語" ); 
    document.onreadystatechange = 関数(){
         もし(document.readystateで== '完了'){
             場合(値=== "1"){ 
                Microsoft.Translator.Widget.Translate( 'ZH-CHS'、 'EN'、onProgress、のonError、onCompleteの、onRestoreOriginal、2000年)。
            } 
        } 
    } 
    関数onProgress(値){ 
    } 
    関数のonError(エラー){ 
    } 
    関数onCompleteの(){ 
        $( "#WidgetFloaterPanels" ).hide(); 
    } 
    関数onRestoreOriginal(){ 
    } 
})。

関数{()変換
     VaRの値= sessionStorage.getItem( "言語" )。
    もし(値=== "1" ){
        sessionStorage.setItem( "言語"、 "0" )。
    } { 
        sessionStorage.setItem( "言語"、 "1" )。
    } 
    window.location.reload()。// 刷新当前页面。
}

  

  ①:上記の記述された死んだ中国人のターン英語をlanguage.js (ZH-CHSは、ENを回す)、プロジェクトは他の言語に変換する必要がある場合に、カスタム拡張することができ、直接language.js  

  ②:マイクロソフトCDN翻訳辞書全体のポイントソース(それは私microsoft.jsの上、です)

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

 

 

 

    追加:各後、つまり、しかし、この方法は、小さな問題があることは、言語を切り替えるためにクリックし、ポップアップボックスがあるでしょうし、以下に示すように、効果をホバー

 

  ポップアップボックス:   効果を置きます:

 

  いくつか検索した後、最終的に解決策を見つけました

  注意:翻訳ボックスの後に爆弾を削除し、効果をホバー、およびMicrosoftが翻訳辞書を導入していない直接の内側には、ステーション全体CDNリンクをlanguage.jsするには

    CDNは、単一のファイルjsの導入に、ソースを下にコピーする必要があります

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

 

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

  

おすすめ

転載: www.cnblogs.com/tu-0718/p/10942201.html