双语切换
2019獨角獸企業重金招聘Python工程師標準>>>
<!DOCTYPE html> <html><head><title>demo_language_local.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html"><meta charset="utf-8"><link rel="stylesheet" href="../assets/css/bootstrap.min.css" /><script src="../assets/js/jquery.min.js"></script><script src="../assets/js/bootstrap.min.js"></script><script src="../assets/js/bootbox.min.js"></script> </head><body><div class="page-content-area"><div class="col-sm-offset-10 col-sm-2"><a href="#" id="enBtn">English</a> <a href="#" id="zhBtn">簡體中文</a> </div></div><!--//label--><div class="col-sm-12"><div class="col-sm-offset-4 col-sm-2"><label name="username" lang>This is a paragraph</label></div></div><!--//js append到dom中的文本--><div class="col-sm-12"><div class="col-sm-offset-4 col-sm-2"><button id="clickBtn" class="form-control btn btn-primary" lang>Click here</button></div></div><script>$(document).ready(function(){$.ajaxSetup({contentType: "application/json"});var dict = {}; $(function() { registerWords(); setLanguage("en"); $("#enBtn").click(function() { setLanguage("en"); var enflag=1;var zhflag=0;}); $("#zhBtn").click(function() { setLanguage("zh"); var enflag=0;var zhflag=1;}); }); function setLanguage(lang) { setCookie("lang=" + lang + "; path=/;"); translate(); } function getCookieVal(name) { var items = document.cookie.split(";"); for (var i in items) { var cookie = $.trim(items[i]); var eqIdx = cookie.indexOf("="); var key = cookie.substring(0, eqIdx); if (name == $.trim(key)) { return $.trim(cookie.substring(eqIdx+1)); } } return null; } function setCookie(cookie) { document.cookie = cookie; } function translate() { loadDict(); $("[lang]").each(function() { switch (this.tagName.toLowerCase()) { case "input": $(this).val( __tr($(this).attr("lang")) ); break; default: $(this).text( __tr($(this).attr("lang")) ); } }); } function __tr(src) { return (dict[src] || src); } function loadDict() { var lang = (getCookieVal("lang") || "en"); $.ajax({ async: false, type: "GET", url: lang + "json.json", success: function(msg) { dict = eval("(" + msg + ")"); } }); } function registerWords() { $("[lang]").each(function() { switch (this.tagName.toLowerCase()) { case "input": $(this).attr("lang", $(this).val()); break; default: $(this).attr("lang", $(this).text()); } }); } $("#clickBtn").click(function(){bootbox.dialog({message: __tr("Thank you!"), buttons: {"success" : {"label" : "OK","className" : "btn-sm btn-primary"}}}); });});</script></body> </html>enjson.json:
{ "This is a paragraph" : "This is a paragraph","Click here" : "Click here","Thank you!" : "Thank you!"}zhjson.json:
{ "This is a paragraph" : "這是一段話","Click here" : "點擊這里","Thank you!" : "謝謝"}轉載于:https://my.oschina.net/AnymoreCoder/blog/741696
總結
- 上一篇： 《HTML5实战》——A.2 常见的HT
- 下一篇： Docker折腾手记-安装