main.html
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切換</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="language.js"></script>
</head>
<body>
<select id="languageID" onchange="html2Cookie()">
</select>
<div align="center" style="border:1px solid red;width:200px;height:200px">
<p set-lan="html:email"></p>
<p set-lan="html:name"></p>
</div>
</body>
</html>
<script type="text/javascript" src="common.js"></script>
language.js
// JavaScript Document
// jquery.cookie.js
// 檢測瀏覽器語言
var baseLang ="zh";
$(function(){
var str="zh,en";
/* get browser default lang */
if (navigator.userLanguage) {
baseLang = navigator.userLanguage.substring(0,2).toLowerCase();
} else {
baseLang = navigator.language.substring(0,2).toLowerCase();
}
var sear=new RegExp(baseLang);
if(sear.test(str)){
setCookie("lan",baseLang);
}else{
setCookie("lan","zh"); //默認中文
}
var tpl ="";
$("#languageID").html("");
if(baseLang == 'en'){
tpl += '<option value="zh">簡體中文</option>';
tpl += '<option selected="selected" value="en">English</option>';
}else{
tpl += '<option selected="selected" value="zh">簡體中文</option>';
tpl += '<option value="en">English</option>';
}
$("#languageID").html(tpl);
});
//寫入cookie函數
function html2Cookie(){
var value = $("#languageID").val();
if(value ==null || value == ''){return;}
setCookie("lan",value);
init.load(1);
}
function setCookie(name,value){
$.cookie(name, null, { path: '/' });
$.cookie(name,value,{expires:7, path: '/'});
}
//獲取cookie
function getCookie(name){
return $.cookie(name);
}
//移除cookie
function removeCookie(name){
return $.removeCookie(name,{expires:-1, path: '/'});
}
var zh = {
"name" : "姓名",
"tel" : "電話",
"email" : "郵箱",
};
var en = {
"name" : "Name",
"tel" : "Tel",
"email" : "Email",
};
common.js
// JavaScript Document
var init = {
load: function() {
$('[set-lan]').each(function(){
var me = $(this);
var a = me.attr('set-lan').split(':');
var p = a[0]; //文字放置位置
var m = a[1]; //文字的標識
//用戶選擇語言後保存在cookie中,這裏讀取cookie中的語言版本
var lan = getCookie('lan');
//選取語言文字
switch(lan){
case 'cn':
var t = zh[m]; //這裏cn[m]中的cn是上面定義的json字符串的變量名,m是json中的鍵,用此方式讀取到json中的值
break;
case 'en':
var t = en[m];
break;
default:
var t = zh[m];
}
//如果所選語言的json中沒有此內容就選取其他語言顯示
if(t==undefined) t = zh[m];
if(t==undefined) t = en[m];
if(t==undefined) return true; //如果還是沒有就跳出
//文字放置位置有(html,val等,可以自己添加)
switch(p){
case 'html':
me.html(t);
break;
case 'value':
me.val(t);
break;
default:
me.html(t);
}
});
}
}
init.load(1);
注意事項:jquery cookie操作爲啥去不到cookie值呢?
$.cookie('the_cookie'); // 獲得cookie
$.cookie('the_cookie', 'the_value'); // 設置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //設置帶時間的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 刪除
$.cookie('the_cookie', null); // 刪除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一個cookie 包括有效期 路徑 域名等
這個是插件的基本語法,你寫的沒錯,錯就錯在你肯定是在本地測試的,cookie是基於域名來儲存的。意思您要放到測試服務器上或者本地localhost服務器上纔會生效。cookie具有不同域名下儲存不可共享的特性。單純的本地一個html頁面打開是無效的。
~
我將該html放tomcat的webapp下,啓動後效果如下