网页中英文语言切换解决方案
2012-10-09 10:52
337 查看
很多公司都喜欢把公司网站搞成双语言的,常见的办法是:做两份相同的程序,然后用不同的文件夹区分开来,然后点切换语言时,链接到不同的文件夹去就OK了,这种办法呢,如下:
好处是:各自的版本是分离开来的,比较稳定,不会出现互相干扰(共用数据库资料的除外!)等情况;
弊端是:改动一个功能,要把变更的操作(代码逻辑啊、图片PS啊、还有数据库等等)在所有的语言版本上面再重复一次,加重了操作量。
本来打算这样子搞的,但上头发话了,这样子代码管理比较麻烦,让哥哥想别的办法喔...那就想咯,别说,还真的想出了一个方法,虽然还未成熟,也不太稳定,但胜在不用修改原来的逻辑代码,而且只有一份代码够用了(是“够用”,不“是完美哦”!),我就不卖关子了,反正也不是什么秘密:说白了,其实就是用 js的replace()方法处理的,嘿嘿,只不过为了能让它能够快速布置,所以,需要做一些规范,怎么规范呢?还不太成熟哈,接着往下看就清楚了。
页面在客户端处显示给user看的都是<body>...</body>中的内容,既然如此,我直接把<body>...</body>中的内容中需要replace的中文全部replace掉再呈现出来就OK了吧,说干就干,直接先写一个“翻译字典”方法,如下:
dict.js
PS:这个方法就是把传进来的东西进行翻译后,再把翻译的结果return回去的,注意:js里面没有replaceAll这个方法的,上面的是我自己加上去的,后面会给出;还有,根据翻译的字段长短,先把replace长的,再replace短的,长的一般用replace()就够了,短的最好用replaceAll(),当然有特殊情况的,这里不多说,反正遇到了就明白怎么整了;另外,怎么这么长的?呵呵,这部分可以找别人提供,还有,上面这些“result = result.replaceAll(.....)”是我直接在Excel导出来的(当然,中英对照表是让别的同事搞的,不必亲自出马),网上会的人应该比较多,排序麻,需要一点点技巧,但不难,所以不用怕,当然,我QQ空间日志有一篇日志里有提到,没加到俺QQ的,可以让你妹妹或姐姐啊加我也行,我这个人比较随和的,哈。
有了这个方法还不够,还要考虑一下用户体验的东西,比如:要用cookie记住user目前的语言种类,以便下次直接默认。
有了想法,那需要什么,就去做了,比如cookie的处理类,replaceAll()方法的定义,还有切换语言的逻辑等等,下面都有了,我先贴上网上搜集的一个cookie处理方法,源码如下:
cookiesHelper.js
PS:自己看一下方法,觉得不错的话,可以果断收走了,最后一个方法就是为字符串对象追加一个replaceAll()方法,有了这个,才能执行上面的替换所有字符的对象(这个有虾米用?要是有个GridView控件呢,下面一大堆重复的内容,单纯的replace()只能替换第一个匹配到的字符串,后面的就无能为力了,除非你多替换几次咯),这个方法也出来以后啊,就剩最后一步的啦~
在需要进行翻译的页面<head>...</head>加入如下代码:
PS:Jquery是神马?这个必须引用的,我写的是基于jquery的(没有jquery的日子很难过啊,哈哈~)。原网页是中文的,当cookie("somoveLanguage")的值为"en"时,才调用replace方法,否则不鸟它。
神奇吧?翻译就这样搞定了!但是呢,使用过程中总会有一些毛病的,我大概说点吧,比如DropDownList控件,假如像下面的个的话
看到上面了吗?如果调用replaceAll("哥只是个传说","Seasons1987")的话,第一项的value跟text都会发生改变了,这样子在asp.net中有一个叫做ViewStatus的东东就会找你麻烦了,一个折中的办法是把replace语句改为replaceAll(">哥只是个传说<",">Seasons1987<")就可以避免这个问题啦。又比如,一些写在<body>...</body>里面的<script ...> ...</script>的js方法,经过jquery的html()方法重新写入之后,会破坏它的功用的,也就是翻译之后,就失效了,我遇到的一个问题是:某个用js动态的修改<td>的width跟height的方法失效了,应该是涉及到“用js修改css属性”的功能就会有毛病,我也不太明白,目前的研究只止步于此,毕竟还要忙着解决单身问题啊,呵呵。当然,解决办法还是有的,举个例如下:
假定,上面的input有一个onclick的事件,当我把<body>全部传进行翻译时,onclick会失效的话,可以这样子改一下<body>的代码,大概如下:
然后,<head>中的代码可以这样子写:
最最后,怎么切换语言呢?随便咯,我提供一个,大家按照自己的想法来做就行了,比如弄个下接框选择语言啊,或者搞两幅小国旗,点哪切哪都行,两种都用过,这里贴下拉框的,如下:
OK,收队了!
好处是:各自的版本是分离开来的,比较稳定,不会出现互相干扰(共用数据库资料的除外!)等情况;
弊端是:改动一个功能,要把变更的操作(代码逻辑啊、图片PS啊、还有数据库等等)在所有的语言版本上面再重复一次,加重了操作量。
本来打算这样子搞的,但上头发话了,这样子代码管理比较麻烦,让哥哥想别的办法喔...那就想咯,别说,还真的想出了一个方法,虽然还未成熟,也不太稳定,但胜在不用修改原来的逻辑代码,而且只有一份代码够用了(是“够用”,不“是完美哦”!),我就不卖关子了,反正也不是什么秘密:说白了,其实就是用 js的replace()方法处理的,嘿嘿,只不过为了能让它能够快速布置,所以,需要做一些规范,怎么规范呢?还不太成熟哈,接着往下看就清楚了。
页面在客户端处显示给user看的都是<body>...</body>中的内容,既然如此,我直接把<body>...</body>中的内容中需要replace的中文全部replace掉再呈现出来就OK了吧,说干就干,直接先写一个“翻译字典”方法,如下:
dict.js
function setEnglish(bodyString) { var result = bodyString; result = result.replaceAll('發料量','Issue Qty'); result = result.replaceAll('單位別','Unit'); result = result.replaceAll('待交運','To be Delivered'); result = result.replaceAll('應發量','Shoulsd Issue'); result = result.replaceAll('應用量','Should Use'); result = result.replaceAll('操作者','Operator'); result = result.replaceAll('編輯中','Editing'); result = result.replaceAll('確認者','Confirmed By'); result = result.replaceAll('需求量','Required Qty'); result = result.replaceAll('需求日','Required Day'); result = result.replaceAll('實用量','Used Qty'); result = result.replaceAll('跨工單','Inter-Shop Order'); result = result.replaceAll('經辦人','Prepared by'); result = result.replaceAll('損耗率','Yield Loss Rate'); result = result.replaceAll('超耗量','Over Consumption '); result = result.replaceAll('超比例','Over-proportional'); result = result.replaceAll('結案日','Close Date'); result = result.replaceAll('發料量','Issue Qty'); result = result.replaceAll('換工單','Change Shop Order'); result = result.replaceAll('提報數','Report Qty'); result = result.replaceAll('報廢量','Scrap Form'); result = result.replaceAll('報廢單','Scrap Form'); result = result.replaceAll('報廢品','Scrap Unit'); result = result.replaceAll('單位別','Unit'); result = result.replaceAll('移轉數','Transfer Qty'); result = result.replaceAll('移入量','Move In Qty'); result = result.replaceAll('異動碼','Transaction Code'); result = result.replaceAll('接受量','Received Qty'); result = result.replaceAll('庫存量','Inventory'); result = result.replaceAll('凈移轉','Net Transfers'); result = result.replaceAll('待發量','To be Issued'); result = result.replaceAll('待報廢','To be Scrapped'); result = result.replaceAll('待處理','To be Processed'); result = result.replaceAll('待重工','To be Reworked'); result = result.replaceAll('待交運','To Be Delivered'); result = result.replaceAll('待分配','To be Assigned'); result = result.replaceAll('物流中','Logistics'); result = result.replaceAll('來料量','Incoming Qty'); result = result.replaceAll('良品數','Good Unit Qty'); result = result.replaceAll('材料批','Component Part Lot Batch'); result = result.replaceAll('投入數','Input Qty'); result = result.replaceAll('完成日','Completion Date'); result = result.replaceAll('在製量','WIP'); result = result.replaceAll('在移量','Transit Qty'); result = result.replaceAll('全 部','All'); result = result.replaceAll('分派數','Distribute Qty'); result = result.replaceAll('不良數','Reject Qty'); result = result.replaceAll('已檢驗','Inspected'); result = result.replaceAll('已移轉','Transferred'); result = result.replaceAll('已交運','Shipped'); result = result.replaceAll('工單號','Shop Order No.'); result = result.replaceAll('下工站','Next Operation'); result = result.replaceAll('上工站','Previous Operation'); result = result.replaceAll('入檢序','Incoming Inspection Operation '); result = result.replaceAll('入料量','Incoming Qty'); result = result.replaceAll('創建者','Founder'); result = result.replaceAll('請選擇','Please Choose'); result = result.replaceAll('編輯中','Editing'); result = result.replaceAll('物流中','In Logistics'); result = result.replaceAll('待處理','To be Processed'); result = result.replaceAll('待重工','To be Reworked'); result = result.replaceAll('待報廢','To be Scrapped'); result = result.replaceAll('待分配','To be Assigned'); result = result.replaceAll('待交運','To be Delivered'); result = result.replaceAll('已檢驗','Inspected'); result = result.replaceAll('已移轉','Transferred'); result = result.replaceAll('全 部','All'); result = result.replaceAll('移轉單','Transfer Form'); result = result.replaceAll('報廢單','Scrap Form'); result = result.replaceAll('待交運','To be Delivered'); result = result.replaceAll('淨移轉','Net Transfers'); result = result.replaceAll('經辦人','Operator'); result = result.replaceAll('确定者','Affirmant'); result = result.replaceAll('日期起','Start Date'); result = result.replaceAll('測試區','Test'); result = result.replaceAll('導出','Export'); result = result.replaceAll('料號','Part No.'); result = result.replaceAll('工單','Shop Order'); result = result.replaceAll('鏈接','Hyperlink'); result = result.replaceAll('儲位','Location'); result = result.replaceAll('選擇','Option'); result = result.replaceAll('機種','Model'); result = result.replaceAll('導出','Export'); result = result.replaceAll('確定','OK'); result = result.replaceAll('標記','Symbol'); result = result.replaceAll('標工','Standard'); result = result.replaceAll('廠商','Supplier'); result = result.replaceAll('新建','New'); result = result.replaceAll('搜索','Search'); result = result.replaceAll('用戶','User ID'); result = result.replaceAll('密碼','Password'); result = result.replaceAll('語言','Language'); result = result.replaceAll('確認','Confirm'); result = result.replaceAll('損耗','Yield Loss'); result = result.replaceAll('移出','Move Out'); result = result.replaceAll('料號','Part No.'); result = result.replaceAll('料件','Material Part'); result = result.replaceAll('倉庫','Store'); result = result.replaceAll('重工','Rework'); result = result.replaceAll('客戶','Customer Name'); result = result.replaceAll('品保','QA'); result = result.replaceAll('時間','Date'); result = result.replaceAll('返回','Back'); result = result.replaceAll('注解','Remarks'); result = result.replaceAll('類型','Type'); result = result.replaceAll('周數','Weeks'); result = result.replaceAll('其他','Others'); result = result.replaceAll('良品','Good Unit'); result = result.replaceAll('材料','Component Part'); result = result.replaceAll('批號','Lot Batch No.'); result = result.replaceAll('批量','Lot Size'); result = result.replaceAll('作成','Made'); result = result.replaceAll('余量','Margin'); result = result.replaceAll('用量','Used Qty'); result = result.replaceAll('方式','Approach'); result = result.replaceAll('工單','Shop Order'); result = result.replaceAll('工序','Operation No.'); result = result.replaceAll('工序','Operation '); result = result.replaceAll('人工','Manpower'); result = result.replaceAll('狀態','Status'); result = result.replaceAll('其他','Others'); result = result.replaceAll('工單','Shop Order'); result = result.replaceAll('新建','New'); result = result.replaceAll('導出','Export'); result = result.replaceAll('其他','Others'); result = result.replaceAll('搜尋','Search'); result = result.replaceAll('料號','Part No.'); result = result.replaceAll('全部','All'); result = result.replaceAll('返回','Back'); result = result.replaceAll('廠區','Factory'); result = result.replaceAll('查詢','Search'); result = result.replaceAll('确定','Confirm'); result = result.replaceAll('部門',' Department'); result = result.replaceAll('操作','Operation'); result = result.replaceAll('移入','Move In'); result = result.replaceAll('單位','Unit'); result = result.replaceAll('說明','Description'); result = result.replaceAll('數量','Qty'); result = result.replaceAll('保存','Save'); result = result.replaceAll('儲','Store'); result = result.replaceAll('倉','Store'); result = result.replaceAll('批','Batch'); result = result.replaceAll('迄','Until'); result = result.replaceAll('入','In'); result = result.replaceAll('出','Out'); return result; }
PS:这个方法就是把传进来的东西进行翻译后,再把翻译的结果return回去的,注意:js里面没有replaceAll这个方法的,上面的是我自己加上去的,后面会给出;还有,根据翻译的字段长短,先把replace长的,再replace短的,长的一般用replace()就够了,短的最好用replaceAll(),当然有特殊情况的,这里不多说,反正遇到了就明白怎么整了;另外,怎么这么长的?呵呵,这部分可以找别人提供,还有,上面这些“result = result.replaceAll(.....)”是我直接在Excel导出来的(当然,中英对照表是让别的同事搞的,不必亲自出马),网上会的人应该比较多,排序麻,需要一点点技巧,但不难,所以不用怕,当然,我QQ空间日志有一篇日志里有提到,没加到俺QQ的,可以让你妹妹或姐姐啊加我也行,我这个人比较随和的,哈。
有了这个方法还不够,还要考虑一下用户体验的东西,比如:要用cookie记住user目前的语言种类,以便下次直接默认。
有了想法,那需要什么,就去做了,比如cookie的处理类,replaceAll()方法的定义,还有切换语言的逻辑等等,下面都有了,我先贴上网上搜集的一个cookie处理方法,源码如下:
cookiesHelper.js
//寫cookies函數 //作者:翟振凯 function SetCookie(name,value)//兩個參數,一個是cookie的名字,一個是值 { 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 delCookie(name)//刪除cookie { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); } //示例 //SetCookie ("xiaoqi", "3") //alert(getCookie('xiaoqi')); //URL字符串操作 function request(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } //為系統追加replaceAll方法 String.prototype.replaceAll = function(oldStr, newStr) { return this.replace(new RegExp(oldStr,"gm"),newStr); }
PS:自己看一下方法,觉得不错的话,可以果断收走了,最后一个方法就是为字符串对象追加一个replaceAll()方法,有了这个,才能执行上面的替换所有字符的对象(这个有虾米用?要是有个GridView控件呢,下面一大堆重复的内容,单纯的replace()只能替换第一个匹配到的字符串,后面的就无能为力了,除非你多替换几次咯),这个方法也出来以后啊,就剩最后一步的啦~
在需要进行翻译的页面<head>...</head>加入如下代码:
<script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/cookiesHelper.js" type="text/javascript"></script> <script src="js/dict.js" type="text/javascript"></script> <script type="text/javascript"> //add by seasons.zhang 2012/09/20 $(function () { //根據cookie切換語言種類 if (getCookie("somoveLanguage") == "en") { var result = setEnglish($("body").html()); $("body").html(result); } }); </script>
PS:Jquery是神马?这个必须引用的,我写的是基于jquery的(没有jquery的日子很难过啊,哈哈~)。原网页是中文的,当cookie("somoveLanguage")的值为"en"时,才调用replace方法,否则不鸟它。
神奇吧?翻译就这样搞定了!但是呢,使用过程中总会有一些毛病的,我大概说点吧,比如DropDownList控件,假如像下面的个的话
<select name="seasons1987"> <option value="哥只是个传说">哥只是个传说</option> <option value="哥不止是个传说">哥不止是个传说</option> <option value="哥一直都是个传说">哥一直都是个传说</option> <option value="不要迷恋哥">不要迷恋哥</option> </select>
看到上面了吗?如果调用replaceAll("哥只是个传说","Seasons1987")的话,第一项的value跟text都会发生改变了,这样子在asp.net中有一个叫做ViewStatus的东东就会找你麻烦了,一个折中的办法是把replace语句改为replaceAll(">哥只是个传说<",">Seasons1987<")就可以避免这个问题啦。又比如,一些写在<body>...</body>里面的<script ...> ...</script>的js方法,经过jquery的html()方法重新写入之后,会破坏它的功用的,也就是翻译之后,就失效了,我遇到的一个问题是:某个用js动态的修改<td>的width跟height的方法失效了,应该是涉及到“用js修改css属性”的功能就会有毛病,我也不太明白,目前的研究只止步于此,毕竟还要忙着解决单身问题啊,呵呵。当然,解决办法还是有的,举个例如下:
<body> <p>哥只是个传说啊</p> <input name="Seasons1987" value="2012-10-04" onclick="XXXX" /> <p>哥还是个传说啊</p> 5 <p>征婚啊...</p> 6 </body>
假定,上面的input有一个onclick的事件,当我把<body>全部传进行翻译时,onclick会失效的话,可以这样子改一下<body>的代码,大概如下:
<body> <span id="body1"><p>哥只是个传说啊</p></span> <input name="Seasons1987" value="2012-10-04" onclick="XXXX" /> <span id="body2"> <p>哥还是个传说啊</p> 5 <p>征婚啊...</p> </span> 7 </body>
然后,<head>中的代码可以这样子写:
<script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/cookiesHelper.js" type="text/javascript"></script> <script src="js/dict.js" type="text/javascript"></script> <script type="text/javascript"> //add by seasons.zhang 2012/09/20 $(function () { //根據cookie切換語言種類 if (getCookie("somoveLanguage") == "en") { var body1= setEnglish($("#body1").html()); var body2= setEnglish($("#body2").html()); $("#body1").html(body1); $("#body2").html(body2); } }); </script>
最最后,怎么切换语言呢?随便咯,我提供一个,大家按照自己的想法来做就行了,比如弄个下接框选择语言啊,或者搞两幅小国旗,点哪切哪都行,两种都用过,这里贴下拉框的,如下:
<head> <script src="js/jquery-1.6.js" type="text/javascript"></script> <script src="js/cookiesHelper.js" type="text/javascript"></script> <script src="js/dict.js" type="text/javascript"></script> <script type="text/javascript"> //add by seasons.zhang 2012/09/20 function chgLang() { SetCookie("somoveLanguage", $("#ddlSomoveLanguage").children('option:selected').val()); //alert(getCookie("somoveLanguage")); window.location = 'Default.aspx'; } </script> </head> <body> <select id="ddlSomoveLanguage" onchange="return chgLang();"> <option value="ch">中文</option> <option value="en">英文</option> </select> </body>
OK,收队了!
相关文章推荐
- 网页中英文语言切换解决方案
- ecshop优化5-多语言切换中英文切换
- 网页语言编码及asp乱码问题解决方案
- 小记!华为 8.0系统切换APP内语言(中英文)无效(其他版本手机均有效)。
- web,jsp,html网站中英文切换,资源国际化解决方案及代码(其中包含动态切换数据源及URL拦截器).
- iOS 应用程序内切换语言 中英文切换
- 程序实现多国语言的动态切换解决方案
- 怎么用wordpress建中英文双语及多语言切换的网站
- PHP网页根据来访者的浏览器语言不同自动跳转中英文页面
- 【转】网页中英文混排行高不等问题的解决方案探讨
- 【Vegas原创】网页中英文自动/手动切换方法
- WPF & Sivlerlight 多语言解决方案-动态切换软件使用的语言
- iOS 切换语言开发 中英文切换
- CAD编辑器的语言可以进行中英文切换吗?要怎么来操作呀?
- 多种语言(big5\gbk\gb2312\utf8\Shift_JIS\iso8859-1)的网页编码切换解决方案归纳
- 程序实现多国语言的动态切换解决方案(转)
- 网页语言编码及asp乱码问题解决方案
- 静态网站的中英文等多语言切换
- 程序实现多国语言的动态切换解决方案
- eclipse中文版 中英文切换 + 全语言转换