关键字：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. Apache配置虚拟目录，以及各种操作

    apache配置虚拟目录: 打开并创建虚拟目录的步骤如下: # Virtual hosts # Include conf/extra/httpd-vhosts.conf 去掉conf/http.con ...

  2. 【转】在XCode工程中创建bundle包

    http://www.giser.net/?p=859 Bundle Programming Guide: https://developer.apple.com/library/ios/docume ...

  3. Android Studio配置Dagger2 以及butterknife

    一.配置butterknife 在build.gradle(Module)文件中的dependencies模块添加: dependencies { // add butterknife compile ...

  4. 圆满完成Web安全测试培训课程广州公开班！

    圆满完成Web安全测试培训课程广州公开班! http://gdtesting.com/news.php?id=187 下期<Web安全测试最佳实践>公开课通知:8月9.10日地点:广州 课 ...

  5. SQL学习笔记

    SQL(Structured Query Language)学习笔记 [TOC] Terminal登录数据库 1.登录mysql -u root -p ; 2.显示所有数据库show database ...

  6. gcc的使用

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/6065410. ...

  7. [引]LINQ to XML 类概述

    本文转自:http://msdn.microsoft.com/zh-cn/library/bb387023.aspx 本主题提供 System.Xml.Linq 命名空间中 LINQ to XML 类 ...

  8. Redis的配置

    Redis是一个强大的Key-Value存储系统,在前面我们已遇到了两个问题: 1.redis server 启动后,独占进程,能不能修改为后台服务呢? 2.redis server 服务是单线程的, ...

  9. 301页面转向 php

    新建301.php页面,在程序入口文件index.php引用301.php页面 301.php内容如下,仅用于参考: <?php$the_host = $_SERVER['HTTP_HOST'] ...

  10. vs2010打开vs2012的sln文件

    1.找到**.sln文件,然后选择用记事本打开. 2.最前面找到“Microsoft Visual Studio Solution File, Format Version 12.00  # Visu ...