切换语言select选择框的自定义设置

这里介绍对切换语言的select选择框进行的一系列自定义设置,也就是 https://res.wang.market/translate/demo.html 中的这个位置:



指定切换语言选择框在代码中的位置

你想在你页面什么地方显示,就吧下面这个放到哪即可。

  1. <div id="translate"></div>

主要是这个 id=”translate” 切换语言的按钮会自动赋予这个id里面。当然你也不一定非要是div的,也可以这样

  1. <span id="translate"></span>

另外,如果您网页中不存在任何元素的id为translate时, translate.js 会自动创建一个 <div id="translate"> 用来显示语言切换

美化切换语言按钮

可使用css来控制切换语言选择的显示位置及美观。如:

  1. <style>
  2. .translateSelectLanguage{
  3. position: absolute;
  4. top:100px;
  5. right:100px;
  6. }
  7. </style>

这就是控制切换语言的 <select> 标签

设定是否自动出现 select 切换语言

  1. /*
  2. * 是否显示 select选择语言的选择框,true显示; false不显示。默认为true
  3. * 注意,这行要放到 translate.execute(); 上面
  4. */
  5. translate.selectLanguageTag.show = false;
  6. translate.execute();

使用场景,比如如果使用了:

  1. <a href="javascript:translate.changeLanguage('english');">切换为英语</a>

这种切换方式,那么 select下拉选择的就用不到了,就可以用此方式来不显示。
当然你也可以使用css的方式来控制其不显示。比如:

  1. <style>
  2. #translate{
  3. display:none;
  4. }
  5. </style>

设定select切换语言所支持的语种

  1. translate.selectLanguageTag.languages = 'english,chinese_simplified,korean';

每个语种之间用英文,分割。比如这里设置的是支持英语、简体中文、韩语 的切换。根据后端翻译服务不同,支持的语言也不同。
这里设置后,出现的切换语言的select下拉选择框中出现的语种便是这里所设置的,而不是一下出来百多个了。
具体支持哪些,可通过 http://api.zvo.cn/translate/service/20230807/language.json.html 获取 (如果您私有部署的,接口文档中将请求域名换为您自己私有部署的域名)
注意,这行要放到 translate.execute(); 上面

重新绘制 select 下拉语种下拉选择。

比如进行二次开发translate.js,手动进行了设置语种(当前页面语种) ,但是手动改动后的,在select语种选择框中并不会自动进行改变,这是就需要手动重新绘制一下 select语种选择的下拉选择框

  1. translate.selectLanguageTag.refreshRender();

需要 translate.js v3.0.5.20240224 及更高版本

重写select点切换后触发动作

这里是select切换语言的下拉选择框,如果点开,然后选中了某个语种后,触发的动作。

  1. translate.selectLanguageTag.selectOnChange = function(event){
  2. var language = event.target.value;
  3. translate.changeLanguage(language);
  4. };

其中传入的 event 便是 select 值发生改动后,select 本身,可以用 console.log(event); 打印出来详细看看
注意,要放到 translate.execute(); 上面

整个重写select语言切换及HTML等

比如切换语言这里你不想用select选择框来切换,比如想使用这种形式

这种就是对切换语言进行了重写,不再采用丑爆了的 select 选择标签,而是自己写了一个弹出窗,将语言以及相应国家国旗一并显示,看上去非常美观,上档次!
重写的方式为:

  1. //languageList 便是当前支持的能切换的语种,你可以 console.log(languageList); 打印出来看看
  2. translate.selectLanguageTag.customUI = function(languageList){
  3. //select的onchange事件
  4. var onchange = function(event){ translate.selectLanguageTag.selectOnChange(event); }
  5. //创建 select 标签
  6. var selectLanguage = document.createElement("select");
  7. selectLanguage.id = translate.selectLanguageTag.documentId+'SelectLanguage';
  8. selectLanguage.className = translate.selectLanguageTag.documentId+'SelectLanguage';
  9. for(var i = 0; i<languageList.length; i++){
  10. var option = document.createElement("option");
  11. option.setAttribute("value",languageList[i].id);
  12. //判断 selectLanguageTag.languages 中允许使用哪些
  13. if(translate.selectLanguageTag.languages.length > 0){
  14. //设置了自定义显示的语言
  15. //都转小写判断
  16. var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
  17. //console.log(langs_indexof)
  18. if(langs_indexof.indexOf(','+languageList[i].id.toLowerCase()+',') < 0){
  19. //没发现,那不显示这个语种,调出
  20. continue
  21. }
  22. }
  23. /*判断默认要选中哪个语言*/
  24. if(translate.to != null && typeof(translate.to) != 'undefined' && translate.to.length > 0){
  25. //设置了目标语言,那就进行判断显示目标语言
  26. if(translate.to == languageList[i].id){
  27. option.setAttribute("selected",'selected');
  28. }
  29. }else{
  30. //没设置目标语言,那默认选中当前本地的语种
  31. if(languageList[i].id == translate.language.getLocal()){
  32. option.setAttribute("selected",'selected');
  33. }
  34. }
  35. option.appendChild(document.createTextNode(languageList[i].name));
  36. selectLanguage.appendChild(option);
  37. }
  38. //增加 onchange 事件
  39. if(window.addEventListener){ // Mozilla, Netscape, Firefox
  40. selectLanguage.addEventListener('change', onchange,false);
  41. }else{ // IE
  42. selectLanguage.attachEvent('onchange',onchange);
  43. }
  44. //将select加入进网页显示
  45. document.getElementById(translate.selectLanguageTag.documentId).appendChild(selectLanguage);
  46. }

注意,要放到 translate.execute(); 上面

其中,这个方法传入的 languageList 参数,便是当前支持的能切换的语种,你可以 console.log(languageList); 打印出来看看。 而且如果你采用不同的翻译通道,这个支持的语种数量也是不一样的。
不同的翻译通道支持的语种数量可以点此查看
上面代码便是当前 translate.js 中输出 select 语言选择的代码,你可以改成任何你自己想要的效果。

需要 translate.js v3.2.4.20240424 及更高版本