在做网站的时候可能会遇到不同语言切换的问题，实现的方法有很多种，本篇文章按照 js 加载的方法的来实现。

应用到的 js 文件：

jquery.i18n.properties.js
jquery.js

具体繁琐的功能就不一一介绍实现了，下面做一个简单的案例。

文件目录如下：

strings_zh.properties 文件内容：

 title = i18n 案例

 lang_demo = 这是一个 i18n demo

 lang_btn = 点击切换

 li_lang1 = 一

 li_lang2 = 二

 li_lang3 = 三

strings_en.properties 文件内容：

 title = i18n demo

 lang_demo = This is a i18n demo

 lang_btn = Change click

 li_lang1 = one

 li_lang2 = two

 li_lang3 = three

index.html 文件内容：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>i18n 案例</title>

 </head>

 <body>

 <div>

     <p data-lang="lang_demo">这是一个 i18n demo</p>

     <button data-lang="lang_btn" onclick="changeClick()">点击切换</button>

     <ul>

         <li data-lang="li_lang1">一</li>

         <li data-lang="li_lang2">二</li>

         <li data-lang="li_lang3">三</li>

     </ul>

 </div>

 <script src="js/jquery-1.11.3.min.js"></script>

 <script src="js/jquery.i18n.properties-1.0.9.js"></script>

 <script>

     let lang = "zh";

     function changeClick() {

         if (lang === "zh") {

             lang = "en"

         } else {

             lang = "zh"

         }

         jQuery.i18n.properties({//加载资浏览器语言对应的资源文件

             name: 'strings', //资源文件名称

             path: 'language/', //资源文件路径

             language: lang,

             cache: false,

             mode: 'map', //用Map的方式使用资源文件中的值

             callback: function () {//加载成功后设置显示内容

                 for (let i in $.i18n.map) {

                     $('[data-lang="' + i + '"]').text($.i18n.map[i]);

                 }

                 document.title = $.i18n.map['title'];

             }

         });

     }

 </script>

 </body>

 </html>

我们根据在标签内添加  data-lang=" "  标签来与 strings_zh.properties 和 strings_en.properties 文件内的键值配对，然后通过点击 button 按钮来切换 lang 值，也就是达到中英切换。运行结果如下：

1、页面加载完成：

2、button 按钮点击后：

jquery.i18n 网站呈现各国语言的更多相关文章

  1. 基于jQuery.i18n.properties实现前端网站语言多版本

    我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...

  2. 国际化(i18n) 各国语言缩写

    internationalization (国际化)简称:i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n. 一般用语言_地区的形式表示一种语言,如:zh_ ...

  3. jquery/vue/react前端多语言国际化翻译方案指南

    ❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...

  4. 本地化web开发的一个例子-jquery.i18n.properties

    关键字:Web本地化, jquery,jquery.i18n.properties. 运行环境:Chrome, IE. 本文介绍使用jquery.i18n.properties对网站前端实现本地化,支 ...

  5. 做网站用UTF-8还是GB2312 & 各国语言对应字符集

    经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符, WordPress程序是用的UTF-8,很多cms用的是GB2312. ● 为什么有这么多编码? ...

  6. 使用 jQuery.i18n.properties 实现 Web 前端的国际化

    jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...

  7. jQuery之前端国际化jQuery.i18n.properties

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...

  8. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  9. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

随机推荐

  1. 【JZOJ2019.10.07】模拟赛C组

    \(T1\) 题目描述&大意 贝西牛在每个点左右撞来撞去,不能出去 的情况下能活动(达到)的空间总共有多少? 思路 部分过程为: 反正就是能撞的撞 代码:

  2. 用launchscreen.storyboard适配启动图方法

    wwdc2019有session提出.到2020年4月,上架APP的启动图必须使用launchscreen.storyboard,不能再使用assert方式了.但是session没有给出如何适配.网上 ...

  3. JAVA学习第一课－手工笔记

    JVM:JAVA虚拟机,JAVA核心,跨平台,作用是翻译. JRE:运行环境,包含JVM和运行的核心类库. JDK:全新开发使用,包含JRE,编译工具: 核心是JVM 以下是关系库 安装路径不要有空格 ...

  4. Git 如何优雅地回退代码

    前言 从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码.提交.合并等,更复杂的操作没有使用过, ...

  5. luogu P1976 鸡蛋饼

    题目背景 Czyzoiers 都想知道小 x 为什么对鸡蛋饼情有独钟.经过一番逼问,小 x 道出了实情:因为他喜欢圆. 题目描述 最近小 x 又发现了一个关于圆的有趣的问题:在圆上有 2N 个不同的点 ...

  6. IOS中获取各个文件的目录路径的方法和NSFileManager类

    转自:http://blog.sina.com.cn/s/blog_5fb39f910101di92.html IOS中获取各种文件的目录路径的方法 iphone沙箱模型的有四个文件夹,分别是什么,永 ...

  7. Codeforces-501b

    Misha hacked the Codeforces site. Then he decided to let all the users change their handles. A user ...

  8. 分享和探讨——如何测试Java类的线程安全性？

    缺乏线程安全性导致的问题很难调试,因为它们是零星的,几乎不可能有意复制.你如何测试对象以确保它们是线程安全的? 我在最近的学习中和优锐课老师谈到了这个问题.现在,是时候以书面形式进行解释了.线程安全是 ...

  9. 基于 HTML5 + WebGL 的 3D 太阳系系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  10. Linux-（2）Linux安装

    二.Linux 安装 2.1 物理机安装 使用相关镜像制作软件(软碟通等)制作U盘启动盘即可,按照正常的安装步骤安装即可,一般来说(迷你版本)有线网卡直接会有驱动,无线网卡的驱动需要自行编译或者查找. ...