web界面 初识jquery

web界面完成中英文切换，主要是使用jquery+xml来实现。

切换的代码如下

function change_lang()
{
var lang = 2;
if(lang==2)
{
var xmlDoc=null;
//支持IE浏览器
if(window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
//支持Mozilla浏览器
else if(document.implementation && document.implementation.createDocument){
xmlDoc = document.implementation.createDocument('','',null);
}
else{
alert("not support");
return;
}

if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load("xml/network-set.xml");
}
//解析

var elements = xmlDoc.getElementsByTagName('zn');

$(xmlDoc).find('zn').find('log_in').each(function(){
alert("done");
$("#m_network").text($( this ).children('m_network').text());
$("#m_advance").text($( this ).children('m_advance').text());
$("#m_about").text($( this ).children('m_about').text());
$("#m_productSet").text($( this ).children('m_productSet').text());
$("#m_quit").text($( this ).children('m_quit').text());
$("#net_setting").text($( this ).children('net_setting').text());
$("#net_dhcp").text($( this ).children('net_dhcp').text());
$("#net_dhcp_on").text($( this ).children('net_dhcp_on').text());
$("#net_dhcp_off").text($( this ).children('net_dhcp_off').text());
$("#net_eth_interface").text($( this ).children('net_eth_interface').text());
$("#net_ip_address").text($( this ).children('net_ip_address').text());
$("#net_network_mask").text($( this ).children('net_network_mask').text());
$("#net_gateway").text($( this ).children('net_gateway').text());
$("#net_dns1_adress").text($( this ).children('net_dns1_adress').text());
$("#net_cmi_port").text($( this ).children('net_cmi_port').text());
$("#net_dns2_adress").text($( this ).children('net_dns2_adress').text());
$("#net_ntp_setting").text($( this ).children('net_ntp_setting').text());
$("#net_ntp_enable").text($( this ).children('net_ntp_enable').text());
$("#net_ntp_server").text($( this ).children('net_ntp_server').text());
$("#net_time_zone").text($( this ).children('net_time_zone').text());
$("#net_time_interval").text($( this ).children('net_time_interval').text());
$("#save").val($( this ).children('save').text());
$("#reset").val($( this ).children('cancel').text());
});
en_lang=true;
}
}

也有对应的xml文件

<?xml version="1.0" encoding='gb2312' ?>

<zn>

<log_in>

<m_videoin>Video Input</m_videoin>

<m_videoout>Video Output</m_videoout>

<m_encode>encode Setting</m_encode>

<m_streamSender>Streams Sender</m_streamSender>

<m_network>NetWork</m_network>

<m_advance>Advanced</m_advance>

<m_about>About</m_about>

<m_productSet>Product Setting</m_productSet>

<m_quit>Quit</m_quit>

<net_setting>NetWork Setting</net_setting>

<net_dhcp>DHCP:</net_dhcp>

<net_dhcp_on>On</net_dhcp_on>

<net_dhcp_off>Off</net_dhcp_off>

<net_eth_interface>ETH Interface</net_eth_interface>

<net_ip_address>IPV4 Address:</net_ip_address>

<net_network_mask>Network Mask:</net_network_mask>

<net_gateway>GateWay:</net_gateway>

<net_dns1_adress>DNS1 Address:</net_dns1_adress>

<net_cmi_port>CMI Port:</net_cmi_port>

<net_dns2_adress>DNS2 Address:</net_dns2_adress>

<net_ntp_setting>NTP Param:</net_ntp_setting>

<net_ntp_enable>NTP Enable:</net_ntp_enable>

<net_ntp_server>NTP Server Address:</net_ntp_server>

<net_time_zone>Time Zone:</net_time_zone>

<net_time_interval>Time Interval:</net_time_interval>

<save>Save</save>

<cancel>Cancel</cancel>

</log_in>

</zn>

这样就可以见界面上的中文置换为英文了。

1. 注意xml文件标签的匹配，若是不匹配则失效。 检查这个问题花费了好多时间才搞定。。。。