关键字：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. 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联

    概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...

  2. Input

    Input Basic Input Old Input Files Please note that both Input and Request do NOT sanitize your data, ...

  3. IIS 之 启用日志记录

    如何为网站启用日志记录或 在 Microsoft Internet Information Services (IIS) 6.0 中,在 IIS 5.0 中,并在 IIS 4.0 中的FTP 站点.可 ...

  4. Java基础知识强化之网络编程笔记18：Android网络通信之 使用HttpClient的Post / Get 方式读取网络数据（基于HTTP通信技术）

    使用HttpClient进行Get方式通信,通过HttpClient建立网络链接,使用HttpGet方法读取数据,并且通过Response获取Entity返回值. 使用HttpClient进行Post ...

  5. Android版本控制系统及其间的差异

    一.何谓版本控制 它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编辑错误之后还可以回溯到以前的版本 二.可 ...

  6. about semget

    flags must include read,write,execute permission. for examples: semget( 3333, 1, IPC_CREAT | IPC_EXC ...

  7. fiddlercore 抓包获取cookie的方法

    public partial class form1 : Form { public form1() { string cookies = ""; InitializeCompon ...

  8. Entity Framework 学习整理(分播客整理)

    MSDN: http://msdn.microsoft.com/en-us/data/aa937723 台湾博客: http://www.dotblogs.com.tw/yc421206/ http: ...

  9. nopCommerce的配置以及汉化

    这里给大家一些链接,是关于nopCommerce的一些介绍: nopCommerce的源代码 关于nopcommerce Nopcommerce中文资源 第一步  配置nopCommerce 先上一张 ...

  10. xp 中的IIS安装成功之后，访问网页显示没有权限访问解决方法

    在做xp的IIS发布网站时遇到一个问题就是当你访问网站的时候,显示没有权限访问网站,但是我已经开启了匿名访问网站了,怎么还没有权限访问呢?后来经过上网搜资料解决,当时很多网上都说没打开匿名访问,当时我 ...