关键字：Web本地化， jquery，jquery.i18n.properties。

运行环境：Chrome， IE。

本文介绍使用jquery.i18n.properties对网站前端实现本地化，支持多语言。网站内容根据浏览器设置的语言来显示。

1.前端文件夹结构如下：

2.index.html文件

<!DOCTYPE html>

<html>

<head>

    <title data-localize="common.title"></title>

    <script src="/javascripts/3p/jquery-1.8.2.min.js"></script>

    <script src="/javascripts/3p/jquery.i18n.properties-min-1.0.9.js"></script>

    <script src="/javascripts/main.js"></script>

</head>

<body>

    <div class="home-area" id="home" data-localize="common.text"></div>

</body>

</html>

需要本地化common.title和common.text。

3.properties

main.properties是被默认使用如果没有找到匹配的语言。

common.title = Loc Sample - Home

common.text = Welcome!

main_en.properties，如果浏览器语言是en_*，该文件将被使用。

common.title = Loc Sample - Home

common.text = Welcome!

main_zh.properties，如果浏览器语言是zh_*，该文件将被使用。

common.title = Loc Sample - 主页
common.text = 欢迎光临!

4.main.js

$(document).ready(function(){

    loadProperties('main', '/strings/main/');

});

function loadProperties(name, path, lang){

    var lang = lang || navigator.language;

    jQuery.i18n.properties({

        name:name,

        path:path,

        mode:'map',

        language: lang,

        callback: function() {

            $("[data-localize]").each(function() {

                var elem = $(this),

                    localizedValue = jQuery.i18n.map[elem.data("localize")];

                if (elem.is("input[type=text]") || elem.is("input[type=password]") || elem.is("input[type=email]")) {

                    elem.attr("placeholder", localizedValue);

                } else if (elem.is("input[type=button]") || elem.is("input[type=submit]")) {

                    elem.attr("value", localizedValue);

                } else {

                    elem.text(localizedValue);

                }

            });

        }

    });

}

loadProperties函数在页面加载完毕后被调用。loadProperties根据浏览器语言来找到匹配的properties文件，然后替换页面字符串内容。

5.建立一个web服务器来运行index.html。

直接打开index.html，会有跨域访问的问题，导致不能访问properties文件。

所以需要建立一个web服务器。如何建立web服务器请参考：http://www.cnblogs.com/ldlchina/p/4054974.html

6.运行结果：

英文：

中文：

本地化web开发的一个例子-jquery.i18n.properties的更多相关文章

  1. 使用 jQuery.i18n.properties 实现 Web 前端的国际化

    jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...

  2. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  3. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  4. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  5. jQuery之前端国际化jQuery.i18n.properties

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

  6. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  7. jQuery之前端国际化jQuery.i18n.properties[转]

    http://www.ibm.com/developerworks/cn/web/1305_hezj_jqueryi18n/ jQuery.i18n.properties是一款轻量级的jQuery国际 ...

  8. jquery.i18n.properties.js hacking

    /****************************************************************************** * jquery.i18n.proper ...

  9. jquery.i18n.properties前端国际化方案

    如果新项目要做系统国际化, 时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl ...

随机推荐

  1. android124 zhihuibeijing 新闻中心-组图

    package com.itheima.zhbj52.base.menudetail; import java.util.ArrayList; import android.app.Activity; ...

  2. log_slave_updates在线修改

    http://planet.mysql.com/entry/?id=20450 mysql> show variables like 'log_slave_updates'; +-------- ...

  3. 深入探索 Java 热部署--转

    在 Java 开发领域,热部署一直是一个难以解决的问题,目前的 Java 虚拟机只能实现方法体的修改热部署,对于整个类的结构修改,仍然需要重启虚拟机,对类重新加载才能完成更新操作.本文将探索如何在不破 ...

  4. 聊一聊ES5数组（Array）新增的那些方法

    一.前言 ES5中新增的一些处理数组(Array)的方法, 对于用JavaScript处理数据非常有用.我总结了一下,给这些方法分了类,大体如下: 2个索引方法:indexOf() 和 lastInd ...

  5. Javascript之基本包装类型

    一．基本包装类型概述 var box = 'Mr. Lee';//定义一个字符串 var box2 = box.substring(2);//截掉字符串前两位 alert(box2);//输出新字符串 ...

  6. RecyclerView, ListView 只显示一行内容 问题解决

    Adapter 中的data有多行,但是RecyclerView只显示一行. 原因出在item的layout xml, 用了自动生成的RelativeLayout, 她的默认高度height属性是ma ...

  7. 开启nginx缓存

    proxy_cache_path和proxy_cache可以开启基础缓存 proxy_cache_path:缓存路径 proxy_cache:用来启用缓存

  8. logstash input jdbc连接数据库

    示例 以下配置能够实现从 SQL Server 数据库中查询数据,并增量式的把数据库记录导入到 ES 中. 1. 查询的 SQL 语句在 statement_filepath => " ...

  9. 解决linux联网问题的方法论

    解决linux联网问题的方法论 */--> 解决linux联网问题的方法论 Table of Contents 1. ip网络配置流程 1.1. 1.确认电脑能和路由器ping通 1.2. 2. ...

  10. #291 div.2

    A.水题 数字翻转,将每一位大于等于5的数字t翻转成9-t,注意不要有前导0,且翻转后数字的位数不变(即9999->9000...刚开始以为应该翻转成0了= =) #include<ios ...