【国际化】用JQuery-i18next的国际化demo,引入json

参考:

使用 i18next 的 jQuery 国际化 (i18n) 渐进式指南 (locize.com)
i18next-http-backend/example/jquery/index.html at master · i18next/i18next-http-backend (github.com)
文档

可能需要解决一下跨域问题,因为浏览器读取本地文件:加载本地文件出现跨域解决方案 - 知乎 (zhihu.com)

先看效果:

在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"
		/>
		<title>Document</title>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/22.5.0/i18next.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.2/i18nextHttpBackend.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.2/i18nextHttpBackend.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@6.1.3/i18nextBrowserLanguageDetector.min.js"></script>
	</head>
	<body>
		<div data-i18n="[html]data"></div>
		<div data-i18n="data2"></div>
	</body>
	<script>
		i18next
			.use(i18nextBrowserLanguageDetector)
			.use(i18nextHttpBackend)
			.init(
				{
					debug: false,
					fallbackLng: "en",
					backend: {
						loadPath: "locales/en/demo.json",
					},
				},
				function (err, t) {
					jqueryI18next.init(i18next, $, { useOptionsAttr: true });
					$("body").localize();
				}
			);
	</script>
</html>

json:

{
	"data": "<b>data</b>",
    "data2":"data123"
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/403644.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Three.js初学(3)

Three.js初学&#xff08;3&#xff09; 动画渲染循环1. 请求动画帧2. 旋转动画 Canvas画布布局和全屏常见几何体渲染器设置GUI.js库1. 库的引入2. 如何使用初步调试进阶调试界面分组 动画渲染循环 1. 请求动画帧 requestAnimationFrame实现周期性循环执行 requestAnimationF…

petalinux_zynq7 驱动DAC以及ADC模块之二:petalinux

petalinux_zynq7 C语言驱动DAC以及ADC模块之一&#xff1a;建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296在上一篇&#xff0c;建立了ADC和DAC两个IP。这里继续。本文在 petalinux默认配置的基础上&#xff0c;添加了python和qt。再编译出sdk可以给x86主…

Linux第62步_备份移植好的所有的文件和文件夹

1、备份“my-tfa”目录下所有的文件和文件夹 1)、打开终端 输入“ls回车”&#xff0c;列出当前目录下所有的文件和文件夹 输入“cd linux回车”&#xff0c;切换“linux”目录下 输入“ls回车”&#xff0c;列出当前目录下所有的文件和文件夹 输入“cd atk-mp1/回车”&am…

Java设计模式-结构型-适配器模式

Java设计模式-结构型-适配器模式 本文我们简单说下设计模式中的适配器模式。 一、概述 ​ 与电源适配器相似&#xff0c;在适配器模式中引入了一个被称为适配器(Adapter)的包装类&#xff0c;而它所包装的对象称为适配者(Adaptee)&#xff0c;即被适配的类。适配器的实现就是…

短剧小程序系统,重塑视频观看体验的科技革命

随着科技的飞速发展&#xff0c;人们对于数字化内容的消费需求也在不断增长。在这个大背景下&#xff0c;短剧小程序作为一种新型的视频观看方式&#xff0c;正逐渐受到大众的青睐。本文将探讨短剧小程序的发展背景、特点以及市场前景&#xff0c;分析其在重塑视频观看体验方面…

WPF 开发调试比较:Visual Studio 原生和Snoop调试控制台

文章目录 前言运行环境简单的WPF代码实现一个简单的ListBoxVisual Studio自带代码调试热重置功能测试实时可视化树查找窗口元素显示属性 Snoop调试使用Snoop简单使用调试控制台元素追踪结构树Visual/可视化结构树Logical/本地代码可视化树AutoMation/自动识别结构树 WPF元素控制…

8个平面设计灵感网站盘点

设计是一件非常令人兴奋的事情。特别是最常见的平面设计&#xff0c;作为一种传达想法或信息的视觉表达形式&#xff0c;被要求不仅突出个性和主题&#xff0c;而且具有创造力和美感&#xff0c;使许多设计师在灵感枯竭时疯狂。此时&#xff0c;浏览一些平面设计网站&#xff0…

Android 仿信号格子强度动画效果实现

效果图 在 Android 中&#xff0c;如果你想要绘制一个圆角矩形并使其居中显示&#xff0c;你可以使用 Canvas 类 drawRoundRect 方法。要使圆角矩形居中&#xff0c;你需要计算矩形的位置&#xff0c;这通常涉及到确定矩形左上角的位置&#xff08;x, y&#xff09;&#xff0…

ES项目应用

配置: ES存储了2-3亿条&#xff0c;几百GB ES集群有5 个节点 2主2副 ES返回数据量窗口大小设置 index.max_result_window 深度翻页 1.from size 方式 2.scroll相当于维护了一份当前索引段的快照信息&#xff0c;这个快照信息是你执行这个scroll查询时的快照。在这个查询后的任…

【Wio Terminal】使用WiFi(1)- 更新无线核心固件

使用WiFi&#xff08;1&#xff09;- 更新无线核心固件 一、概述1、更新无线核心固件步骤 1 - 擦除初始出厂固件步骤 2 - 刷入最新的固件 2、从Arduino IDE检查RTL8720固件版本安装rpcWiFi库验证 3、更新 SAMD ArduinoCore 一、概述 这篇wiki介绍了如何为Wio Terminal上的Real…

11.CSS3的媒介(media)查询

CSS3 的媒介(media)查询 经典真题 如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30% 媒体查询 媒体查询英文全称 Media Query&#xff0c;顾名思义就是会查询用户所使用的媒体或者媒介。 在现在&#xff0c;网页的浏览终端是越来越多了。用户可…

基于java springboot+mybatis爱游旅行平台前台+后台设计实现

基于java springbootmybatis爱游旅行平台前台后台设计实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 可定制系统 欢迎点赞 收藏…

Http改为Https后该如何测试

需要了解Http和Http之间的关系&#xff0c;他们之间都有哪些优点&#xff0c;哪些缺点&#xff0c;如果使用的产品进行了更改&#xff0c;该如何进行测试等等&#xff0c;Https提供了一个安全层&#xff08;SSL/TLS&#xff09;&#xff0c;这个安全层在客户端和服务器之间提供…

羊大师解读,春季牧场产出的羊奶更好吗?

羊大师解读&#xff0c;春季牧场产出的羊奶更好吗&#xff1f; 由于春季牧场上的牧草新鲜嫩绿且富含各种营养成分&#xff0c;例如蛋白质、维生素和矿物质等&#xff0c;所以春季产出的羊奶可能更加优质。这些营养物质为羊奶提供了丰富的营养来源&#xff0c;使得春季牧场产出…

flutter开发实战-StreamBuilder使用介绍及实例

flutter开发实战-StreamBuilder使用介绍及实例 StreamBuilder是一个Widget&#xff0c;它依赖Stream来做异步数据获取刷新widget。 一、Stream Stream是一种用于异步处理数据流的机制&#xff0c;它允许我们从一段发射一个事件&#xff0c;从另外一段去监听事件的变化.Strea…

HTTP 与 HTTPS-HTTP 解决了 HTTP 哪些问题?

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) HTTP 解决了 HTTP 哪些问题? HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险: 窃听风险&#xff0c;比如通信链路上可以获取通信内容&#xff0c;用户号容易没。篡改风险&#xff0c;比如…

Vue 图片轮播第三方库 介绍

Vue图片轮播是一种在网页上以自动或手动方式展示图片的组件&#xff0c;常用于产品展示、网站banner等场景。有许多第三方库可以帮助Vue开发者轻松实现图片轮播功能。以下是一些流行的Vue图片轮播第三方库的介绍&#xff1a; 1. Vue-awesome-swiper - **简介**&#xff1a;V…

Spring Cloud Alibaba-05-Gateway网关-03-过滤器(Filter)使用

Lison <dreamlison163.com>, v1.0.0, 2023.10.20 Spring Cloud Alibaba-05-Gateway网关-03-过滤器(Filter)使用 文章目录 Spring Cloud Alibaba-05-Gateway网关-03-过滤器(Filter)使用过滤器的简介什么是过滤器&#xff1f;过滤器的生命周期过滤器的分类和作用范围 局部…

从 Elasticsearch 到 Apache Doris,统一日志检索与报表分析,360 企业安全浏览器的数据架构升级实践

导读&#xff1a;随着 360 企业安全浏览器用户规模的不断扩张&#xff0c;浏览器短时间内会产生大量的日志数据。为了提供更好的日志数据服务&#xff0c;360 企业安全浏览器设计了统一运维管理平台&#xff0c;并引入 Apache Doris 替代了 Elasticsearch&#xff0c;实现日志检…

HarmonyOS4.0系统性深入开发36 媒体查询(mediaquery)

媒体查询&#xff08;mediaquery&#xff09; 概述 媒体查询作为响应式设计的核心&#xff0c;在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景&#xff1a; 针对设备和应用的属性信息&#xff08;比如显…