前台页面的国际化处理

本文以登录页面为例,探讨如何实现前端页面的国际化处理,详细阐述了在前端开发中进行多语言支持的关键步骤和技术要点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下面我就以登录为例子。

 <script src="./login/login.js"></script>
<script type="text/javascript" src="./resources/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./resources/lib/jquery.i18n.properties-1.0.9.js"></script>

  <form class="ui large form">

      <div class="column">
        <div class="ui form">
          <div class="field">

            <div class="ui left icon input">
              <input type="text" placeholder="Username" name="account" id="account">
              <i class="user icon"></i>
            </div>
          </div>
          <div class="field">
            <div class="ui left icon input">
              <input type="password" name="password" placeholder="password" id="pwd">
              <i class="lock icon"></i>
            </div>
          </div>
          <div class="ui  buttons">
            <button class="ui teal button" id = "login" value="login"></button>
            <div class="or"></div>
            <button class="ui button" id="register" value="register" οnclick="window.location='http://localhost:8080/webpages/signup.html';return false;"></button>
          </div>
        </div>
      </div>
    </form>
js部分代码

$(document).ready(function() {
	/*var lang;
	var type=navigator.appName;
	if (type=="Netscape"){
	 lang = navigator.language;
	}
	else{
	 lang = navigator.userLanguage;
	}
	//取得浏览器语言的前两个字母
	var language = lang.substr(0,2);*/
	loadProperties();
	
	
});
function loadProperties(){
	jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
		name:'strings', //资源文件名称
		path:'./resources/i18n/', //资源文件路径
		mode:'map', //用Map的方式使用资源文件中的值
		callback: function() {//加载成功后设置显示内容
			//用户名
			$("#account").attr("placeholder",$.i18n.prop('string_username'));
			//密码
			$("#pwd").attr("placeholder",$.i18n.prop('string_password'));
		    //登录
			$('#login').html($.i18n.prop('string_login'));
			$('#login1').html($.i18n.prop('string_login'));
			//注册
			$('#register').html($.i18n.prop('string_register'));
		}
	});
}

配置文件 strings_en.properties

string_username=User name
string_password=Password
string_login=Login

项目目录结构







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值