没有合适的资源?快使用搜索试试~ 我知道了~
jquery结合html实现中英文页面切换
24 下载量 96 浏览量
2020-10-21
00:34:22
上传
评论 1
收藏 45KB PDF 举报
温馨提示
试读
2页
主要为大家详细介绍了jquery结合html实现中英文页面切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论
jquery结合结合html实现中英文页面切换实现中英文页面切换
主要为大家详细介绍了jquery结合html实现中英文页面切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一
下
目的:目的:前端(只采用thymeleaf模板+jquery) 实现国际化
由:前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量
采用jquery赋值(维护2个模板(中,英)界面) 直接out
方案:方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件
a jQuery plugin that makes it easy to internationalize your web site
步骤:步骤:
1 html
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Language</title>
<!-- 引用三个js文件 language_cookie.js实现记忆功能 下一次用户刷新界面之后 记得之前用户使用了那个语种 -->
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.localize.js" type="text/javascript" charset="utf-8"></script>
<script src="language_cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="top_lan">
<select id="ddlSomoveLanguage" onchange="chgLang();">
<option value="">LAGUAGE</option>
<option value="ja">日本</option>
<option value="en">ENGLISH</option>
</select>
</div>
<div id="prod_navright">
<ul> <!-- data-localize="hpt.management" 固定写法 对应语言包文件中的key -->
<li><a data-localize="hpt.management" href="hospitality_management_ja.html" >MANAGEMENT</a></li>
<li><a data-localize="hpt.support" href="hospitality_support_ja.html">SUPPORT</a></li>
<li><a data-localize="hpt.tutorial" href="hospitality_tutorial_ja.html">TUTORIAL</a></li>
<li><a data-localize="hpt.features" href="hospitality_features_ja.html">FEATURES</a></li>
</ul>
</div>
</body>
</html>
2 语言包文件
text-en.json
{
"hpt":{
"features": "FEATURES",
"tutorial": "TUTORIAL",
"support": "SUPPORT",
"management": "MANAGEMENT"
}
}
text-ja.json
·······
3 language_cookie.js 需要在服务器上执行 本机执行无法获取需要的json文件 主要的代码主要的代码 标记处的代码底层可能使用的是
xmlHttpRequest实现获取.json语言包文件
var name = "somoveLanguage";
function chgLang() {
var value = $("#ddlSomoveLanguage").children('option:selected').val();
SetCookie(name, value);
console.log("come 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);
资源评论
weixin_38732811
- 粉丝: 6
- 资源: 958
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功