web国际化jQuery.i18n.properties

现在的项目大多数都是面向国际化的了, 国际化英文单词为:internationalization,又称i18n,”i”为单词的第一个字母,”18″为”i”和”n”之间单词的个数,而”n”代表这个单词的最后一个字母。

国际化是现在Web应用程序开发过程中的重要一环,而jQuery.i18n.properties插件是一款轻量级的jQuery国际化插件,通常用它来国际化web项目。

一、文件目录

使用jQuery.i18n.properties的时候需要把jQuery.i18n.properties资源文件放到项目中,通常都是使用i18n的文件夹存放文件。

如图:

《web国际化jQuery.i18n.properties》

其中以后缀(.properties)结尾的文件,例如,string_en.properties文件就是国际化的翻译文件。我们需要把web中需要翻译的文件都写到其中。要注意的是书写的格式,.properties 文件以键值对的形式书写,键不能有空格,可以使用下划线(_)连接。

二、引入脚本文件

另外就是需要引入脚本文件,因为jquery.i18n.properties是依靠jquery实现国际化的插件,所以在引入jquery.i18n.properties插件文件之前,首先要引入jquery文件。
文件可以到网上去下载,有很多,你需要的只是一个js文件。


<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>

三、编写html

再就是编写html文件,例如给文件添加属性data-locale,.properties 文件中键值对的键写到该属性下。这个其中的一种做法,初次之外还可以根据id来识别html标签。

<label data-locale="hupu_username">用户名:</label><input type="text">
    <label data-locale="hupu_password">密码:</label><input type="password">

四、国际化转换

最后就可以在需要的页面添加国际化执行脚本了。

<script type="text/javascript">
    loadProperties();
    function loadProperties() {
         $.i18n.properties({
             name:'hupu-lang',
             path:'i18n/',
       //资源文件路径
             mode:'map',
       // 用Map的方式使用资源文件中的值
             language:$.i18n.browserLang(),
             callback:function(){
                $("[data-locale]").each(function(){
                    $(this).html($.i18n.prop($(this).data("locale")));
                });
             }
         });
     }
</script>


点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注