當前位置:編程學習大全網 - 網絡軟體 - 如何實現html頁面的雙語切換

如何實現html頁面的雙語切換

目的:前端(只采用thymeleaf模板+jquery) 實現國際化

由:前端沒有采用流行的vue.js angular 等框架,純html不可以引用js中定義的常量?

采用jquery賦值(維護2個模板(中,英)界面) 直接out

方案:采用/coderifous/jquery-localize/?壹個本地化插件?

a jQuery plugin that makes it easy to internationalize your web site

步驟:?

1 html

<!DOCTYPE>

<html?lang="en">

<head>

<meta?e?in?chgLang"?+?name?+?value);

location.reload();

}

function?SetCookie(name,?value)?{

var?Days?=?30;?//此?cookie?將被保存?30?天

var?exp?=?new?Date();?//new?Date("December?31,?9998");

exp.setTime(exp.getTime()?+?Days?*?24?*?60?*?60?*?1000);

document.cookie?=?name?+?"="?+?escape(value)?+?";expires="?+?exp.toGMTString();

}

function?getCookie(name){?//取cookies函數

var?arr?=?document.cookie.match(new?RegExp("(^|?)"?+?name?+?"=([^;]*)(;|$)"));

if?(arr?!=?null)?return?unescape(arr[2]);

return?null

}

$(function()?{

var?uulanguage?=?(navigator.language?||?navigator.browserLanguage).toLowerCase();

console.log("come?in?readly"?+?uulanguage);

if?(uulanguage.indexOf("en")?>?-1)?{

$("[data-localize]").localize("text",?{?//**主要的代碼**?jquery.localize.js?底層實現切換邏輯

pathPrefix:?"lang",

language:?"en"

});

console.log("come?in?en");

}?else?if?(uulanguage.indexOf("ja")?>?-1)?{

$("[data-localize]").localize("text",?{

pathPrefix:?"lang",

language:?"ja"

});

console.log("come?in?ja");

}?else?{

$("[data-localize]").localize("text",?{

pathPrefix:?"lang",

language:?"en"

});

console.log("come?in?moren?en");

};

//根據cookie選擇語言

if?(getCookie(name)?!=?"")?{

if?(getCookie(name)?==?"ja")?{

$("[data-localize]").localize("text",?{

pathPrefix:?"lang",

language:?"ja"

});

console.log("come?in?cookie?ja");

}

if?(getCookie(name)?==?"en")?{

$("[data-localize]").localize("text",?{

pathPrefix:?"lang",

language:?"en"

});

console.log("come?in?cookie?en");

}

}

});

  • 上一篇:壹體化攝錄機大致可分為幾種
  • 下一篇:怎樣系小方巾簡單又好看
  • copyright 2024編程學習大全網