关键字：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. （一）javascript中的数组index属性——获取数组的索引值

    例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过 ...

  2. String使用equals方法和==分别比较的是什么？

    equals方法和==的区别   首先大家知道,String既可以作为一个对象来使用,又可以作为一个基本类型来使用.这里指的作为一个基本类型来使用只是指使用方法上的,比如String s = &quo ...

  3. 在aws ec2上使用root用户登录

    aws ec2默认是使用ec2-user账号登陆的,对很多文件夹是没有权限的.如何使用root账号执行命令就是一个问题了.解决办法如下: 1.根据官网提供的方法登录连接到EC2服务器(官网推荐wind ...

  4. MySQL（17）：Select-union（联合查询）使用注意事项

    1. 需求: 获得0115班所有的代课教师代课天数,结果按照升序排序:同时获得0228班,结果按照降序排序. (1)首先查询原来的0115班和0228班所有代课天数,如下:       (2)使用un ...

  5. Android Partitions Explained: boot, system, recovery, data, cache & misc

    from: http://www.addictivetips.com/mobile/android-partitions-explained-boot-system-recovery-data-cac ...

  6. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...

  7. RecyclerView基本用法

    1. 在gradle.build的dependencies中添加RecyclerView需要的包 compile 'com.android.support:cardview-v7:23.4.0'com ...

  8. Linux系统上安装软件(ftp服务器)

    一:安装ftp服务器 在安装linux系统的时候,自定义软件包安装时,我已经勾选了ftp服务器,所以已经 安装过了,如果没有勾选,需要额外下载ftp的安装包,进行安装. ftp服务器搭建过程中遇到的问 ...

  9. Matlab中tic和toc用法

    简单地说,tic和toc是用来记录matlab命令执行的时间 tic用来保存当前时间,而后使用toc来记录程序完成时间. 两者往往结合使用,用法如下: tic operations toc 显示时间单 ...

  10. UVa 1645 Count（**）

    题目大意:输入n,统计有多少个n个结点的有根树,使得每个深度中所有结点的子结点数相同.结果模1000000007. 思路:根据题意,每个结点的每个子树都是相同的.所以n结果为n-1的所有约数的结果加起 ...