关键字：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. [Effective C++ --021]必须返回对象时，别妄想返回其reference

    引言 在条目20中,我们知道了值传递和引用传递的效率问题,因此在设计程序时,我们可能就尽可能来返回引用而不是值. 可是,可能会犯下面的一些错误:传递一些引用指向其实并不存在的对象. 第一节:返回临时变 ...

  2. [017]string类使用注意事项

    最近自己写着玩,写了一个这样的函数: void foo(const string& iStr) { ; i < iStr.length(); ++i) { string str = iS ...

  3. 实例源码--Android简单团购应用源码

      下载源码   技术要点: 1.HTTP通信技术 2.XML数据解析 3.控件的简单应用 4.源码带有非常详细的中文 注释 ...... 详细介绍: 1. HTTP通信技术 通 过HTTP通信技术, ...

  4. windows 7文件共享方法

    现在家里有几台电脑是很常见的,把家里的几台电脑组成局域网,共享文件.联机游戏是非常有必要的,但是组建局域网又是很多朋友永远的痛,需要设置工作组.设置登录方式.打开服务等等,时常还会出点小问题而无法共享 ...

  5. C# 之 用NPOI类库操作Excel

    1.需引用以下命名空间: using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using NPOI.HPSF; using NPOI.HSSF.Ut ...

  6. 面试体验：Google 篇（转）

    http://www.cnblogs.com/cathsfz/archive/2012/08/08/google-interview-experience.html 尝试在自己的博客上搜索点东西,结果 ...

  7. web前端开发前景怎么样？

    对于web前端开发,对现今前端的发展,中国的发展还很落后,中国没有Jquery,没有Node.js,其中最主要的一点是,中国的前端比较封锁,大家都没有分享的觉悟.回头看看,那些发展比较快的行业.软件, ...

  8. 全新的手势，侧滑返回、全局右滑返回都OUT啦！

    前言 Android快速开发框架-ZBLibrary 最近将以前的 全局右滑返回 手势功能改成了 底部左右滑动手势. 为什么呢?为了解决滑动返回手势的问题. 目前有3种滑动返回手势 一.侧滑返回 代表 ...

  9. 分布式 ES 操作流程解析

    概念解析 CURD 操作 CURD 操作都是针对具体的某个或某些文档的操作,每个文档的 routing 都是确认的,所以其所在分片也是可以事先确定的.该过程对应 ES 的 Document API. ...

  10. 使用jQuery获取Bootstrap Switch的值

    $('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleStat ...