jquery.i18n 网站呈现各国语言
在做网站的时候可能会遇到不同语言切换的问题,实现的方法有很多种,本篇文章按照 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 网站呈现各国语言的更多相关文章
- 基于jQuery.i18n.properties实现前端网站语言多版本
我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...
- 国际化(i18n) 各国语言缩写
internationalization (国际化)简称:i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n. 一般用语言_地区的形式表示一种语言,如:zh_ ...
- jquery/vue/react前端多语言国际化翻译方案指南
❝ 本文章共3470字,预计阅读时间5-10分钟. ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用,它要求从产品中抽离所有地域语言,国家/地区和文化相关的元素.换种说法,「应用程序 ...
- 本地化web开发的一个例子-jquery.i18n.properties
关键字:Web本地化, jquery,jquery.i18n.properties. 运行环境:Chrome, IE. 本文介绍使用jquery.i18n.properties对网站前端实现本地化,支 ...
- 做网站用UTF-8还是GB2312 & 各国语言对应字符集
经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符, WordPress程序是用的UTF-8,很多cms用的是GB2312. ● 为什么有这么多编码? ...
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
- jQuery之前端国际化jQuery.i18n.properties
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,"i& ...
- jquery.i18n.properties前端国际化解决方案“填坑日记”
但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...
- 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...
随机推荐
- 从入门到入土:Lambda完整学习指南,包教包会!
什么是Lambda表达式 Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替功能接口.lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使 ...
- 小白学 Python 爬虫(14):urllib 基础使用(四)
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
- [TimLinux] Python C3 MRO
MRO:Method Resolution Order,即方法解析顺序,是python中用于处理二义性问题的算法 采用过的算法: 1. DFS(深度优先算法) 2. BFS(广度优先算法) 3. C3 ...
- 使用 Ocelot 匹配路由的方法匹配路由
使用 Ocelot 匹配路由的方法匹配路由 Intro 之前我们在 Ocelot 网关的基础上自定义了一个认证授权的 Ocelot 中间件,根据请求的路径和 Method 进行匹配,找到对应的权限配置 ...
- python之pymysql模块简单应用
众所周知,想要在python程序中执行SQL语句需要使用第三方模块:pymysql. 下面,我将为大家简述一下pymysql第三方库的安装到使用的大体流程. pymysql的安装 1.windows系 ...
- JPEG算法解密
图片压缩有多重要,可能很多人可能并没有一个直观上的认识,举个例子,一张800X800大小的普通图片,如果未经压缩,大概在1.7MB左右,这个体积如果存放文本文件的话足够保存一部92万字的鸿篇巨著< ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- Mint UI 之loadmore组件的坑:内部元素头部被遮挡了一部分
前端经常会遇到数据分页加载的需求,mint-ui组件为大家提供了loadmore组件 但是我在使用的时候,遇到了一个问题:写好布局和样式以及逻辑之后,我的mt-loadmore标签的头部总是不顶在父元 ...
- JS中的深拷贝和浅拷贝
浅拷贝 浅拷贝是拷贝第一层的拷贝 使用Object.assign解决这个问题. let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 co ...
- centos7 7.3php编译安装
1.首先更新依赖包. yum -y update 2.安装依赖包 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bz ...