靜態頁面(html)的中英文切換 小筆記

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下,啓動後效果如下

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章