网站策划怎么做内容,网站空间免费吗,产品设计公司招聘,网站建设 课程项目场景#xff1a;
要对一个前端使用layui的项目进行国际化#xff0c;但是layui好像没有实现国际化#xff0c;所以需要自己手动实现。 软件版本#xff1a;
layui版本#xff1a;layui-v2.5.6
jquery版本#xff1a;3.5.1.min
解决方案#xff1a; 需要国际化的…项目场景
要对一个前端使用layui的项目进行国际化但是layui好像没有实现国际化所以需要自己手动实现。 软件版本
layui版本layui-v2.5.6
jquery版本3.5.1.min
解决方案 需要国际化的内容主要有 日期输入框分页栏弹出框页面的标题、按钮等弹出框页面的内容页面其它内容js方法中的值 解决思路 日期输入框利用layui时间日期控件的lang属性分页栏重写laypage.js弹出框页面的标题、按钮等在js中控制值弹出框页面的内容在js中控制值页面其它内容在dom元素中自定义属性并将对应的国际化code放入页面加载完对dom属性进行遍历替换自定义属性为对应的国际化值js方法中的值在js中控制值 具体实现
编写国际化配置文件引入 jquery.i18n.properties.js点此下载 用于解析国际化配置文件编写language.js用于根据code获取国际化值及替换dom元素中的code为国际化值重写laypage.js点此下载将分页栏国际化 properties配置文件
\resources\static\languages\systemInfo_en_US.properties userNoUser No
userNameUser name
userTypeUser type \resources\static\languages\systemInfo_zh_CN.properties userNo用户编号
userName用户名称
userType用户类型 language.js
以下代码替换页面标签中的data-i18n、placeholder-i18n、href-i18n属性。data-i18n对应的国际化值会放入标签的innerTEXT中placeholder-i18n的国际化值会放入placeholder属性href-i18的国际化值会放入href属性要替换其它属性请自行添加。
language()方法用于根据给定的code返回国际化值。
代码还包括对easyui中linkbutton、window、panel等的处理示例实际没有用。
使用时将initPage()方法放入要国际化页面的onload()方法中即可。 function initPage(){if($.cookie(langType)){loadProperties($.cookie(langType));}else{loadProperties(zh_CN); }}
function loadProperties(language){jQuery.i18n.properties({name:systemInfo_language,path:/languages/,mode:map,callback: function() {$([data-i18n]).each(function () {if($(this).hasClass(easyui-linkbutton)){//初始化按鈕$($(this).children().children()[0]).html($.i18n.prop($(this).attr(data-i18n)))}else if($(this).hasClass(easyui-window)){//初始化彈窗title$($(this).prev().children()[0]).html($.i18n.prop($(this).attr(data-i18n)))}else if($(this).hasClass(easyui-panel)){//初始化彈窗title$($(this).prev().children()[0]).html($.i18n.prop($(this).attr(data-i18n)))}else{//初始化普通標籤$(this).prepend($.i18n.prop($(this).attr(data-i18n)))}});$([placeholder-i18n]).each(function () {$(this).attr(placeholder,$.i18n.prop($(this).attr(placeholder-i18n)));});$([href-i18n]).each(function () {$(this).attr(href,$.i18n.prop($(this).attr(href-i18n)));});} });
}function language(key){return $.i18n.prop(key);
} html示例
div classlayui-form-itemlabel classlayui-form-label data-i18nuserNo/labeldiv classlayui-input-blockinput classlayui-input placeholder-i18nuserNo typetext//div
/div js示例
其中btn: [language(btn.confirm), language(btn.cancel)] 用于替换layui确认框中的按钮。
function delRowOpen(){let selected layTable.checkStatus(qryGrid);if(selected.data.length!1) {layer.msg(language(msg.selectOneToDelete));return;}selected selected.data[0];if(!selected.id){layer.msg(language(msg.selectedKeyIsNull));return;}layer.confirm(language(sys.confirmDel), {icon: 0, title:language(sys.info),btn: [language(btn.confirm), language(btn.cancel)]}, function(index) {let param {id : selected.id,random : Math.random()};$.ajax({url : ctx /kv/del,type : POST,data : param,success : function(res){if(res.success){queryList();}layer.msg(res.msg);}});layer.close(index);});
} 注意事项
如果在js中编辑页面标签要使用language()方法拼接不能使用data-i18n、placeholder-i18n、href-i18n等属性因为页面加载后onload()方法中已经执行过initPage()方法此后再动态添加的页面dom元素不会再进行属性替换。
function aa(d){let value d[machineAttr];if(!value||value.length0){return -;}return a hrefjavascript:void(0); onclickopenParamDetail(\showEquParam\,\d[groupCode]\,JSON.stringify(value))language(show)/a;
}
