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

news2024/9/24 3:27:48

参考:

使用 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"
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Java+小程序点餐系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

ABCDE联合创始人BMAN确认出席Hack .Summit() 2024香港Web3盛会

ABCDE联合创始人和普通合伙人BMAN确认出席Hack .Summit() 2024&#xff01; ABCDE联合创始人和普通合伙人BMAN确认出席由 Hack VC 主办&#xff0c;并由 AltLayer 和 Berachain 联合主办&#xff0c;与 SNZ 和数码港合作&#xff0c;由 Techub News 承办的Hack.Summit() 2024区…

保护你的Web应用——CSRF攻击与防御

在Web应用开发过程中&#xff0c;保护用户的隐私和安全至关重要。而CSRF&#xff08;Cross-Site Request Forgery&#xff0c;跨站请求伪造&#xff09;攻击是一种常见的安全威胁&#xff0c;通过利用受信任用户的身份进行恶意操作&#xff0c;威胁到用户的账户和数据安全。本文…

django配置视图并与模版进行数据交互

目录 安装django 创建一个django项目 项目结构 创建视图层views.py 写入视图函数 创建对应视图的路由 创建模版层 配置项目中的模版路径 创建模版html文件 启动项目 浏览器访问结果 安装django pip install django 创建一个django项目 这里最好用命令行完成&#xf…

为什么需要MDL锁

点击上方蓝字关注我 在数据库管理中&#xff0c;元数据&#xff08;metadata&#xff09;的保护至关重要&#xff0c;而MySQL中的"元数据锁"&#xff08;MDL锁&#xff09;就是它的守护者。 1. 什么是MDL锁MDL锁&#xff0c;全名Metadata Lock&#xff0c;是MySQL中…

用windbg调试uefi在hyper-v

添加环境变量 CLANG_BINC:\Program Files\NASM\ NASM_PREFIXC:\Program Files\NASM\ 添加path C:\Program Files (x86)\Windows Kits\10\Tools\x64\ACPIVerify 修改edk2-master\Conf\target.txt TARGET_ARCH X64 编译这两个包 #ACTIVE_PLATFORM EmulatorPkg/…

去新加坡旅游,你必须要收藏了解的当地电商欺诈风险!

目录 多元化发展的新加坡电商 平台和消费者面临的欺诈风险 电商平台应如何防控&#xff1f; 2月9日&#xff0c;除夕&#xff0c;中国与新加坡免签正式生效。免签政策简化了持普通护照中国游客入境新加坡的程序&#xff0c;使通关更为便捷。根据协定&#xff0c;双方持普通护照…

【复现】某尔顿 安全审计系统任意文件读取漏洞_56

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 某尔顿网络安全审计产品支持1-3线路的internet接入、1-3对网桥&#xff1b;含强大的上网行为管理、审计、监控模块&#xff1b;用…

计算机网络-局域网和城域网(一)

1.什么是局域网&#xff1f; 单一机构所拥有的专用计算机网络&#xff0c;中等规模地理范围&#xff0c;实现多种设备互联、信息交换和资源共享。 2.逻辑链路控制LLC&#xff1a; 目的是屏蔽不同的介质访问控制方法&#xff0c;以向高层&#xff08;网络层&#xff09;提供统…

代理模式笔记

代理模式 代理模式代理模式的应用场景先理解什么是代理&#xff0c;再理解动静态举例举例所用代码 动静态的区别静态代理动态代理 动态代理的优点代理模式与装饰者模式的区别 代理模式 代理模式在设计模式中是7种结构型模式中的一种&#xff0c;而代理模式有分动态代理&#x…

使用单一ASM-HEMT模型实现从X波段到Ka波段精确的GaN HEMT非线性仿真

来源&#xff1a;Accurate Nonlinear GaN HEMT Simulations from X- to Ka-Band using a Single ASM-HEMT Model 摘要&#xff1a;本文首次研究了ASM-HEMT模型在宽频带范围内的大信号准确性。在10、20和30 GHz的频率下&#xff0c;通过测量和模拟功率扫描进行了比较。在相同的频…

【C++初阶】系统实现日期类

目录 一.运算符重载实现各个接口 1.小于 (d1)<> 2.等于 (d1d2) 3.小于等于&#xff08;d1<d2&#xff09; 4.大于&#xff08;d1>d2&#xff09; 5.大于等于&#xff08;d1>d2&#xff09; 6.不等于&#xff08;d1!d2&#xff09; 7.日期天数 (1) 算…

Nginx网络服务三-----(三方模块和内置变量)

1.验证模块 需要输入用户名和密码 我们要用htpasswd这个命令&#xff0c;先安装一下httpd 生成文件和用户 修改文件 访问页面 为什么找不到页面&#xff1f; 对应的路径下&#xff0c;没有这个文件 去创建文件 去虚拟机浏览器查看 有的页面不想被别人看到&#xff0c;可以做…

MongoDB的介绍和使用

目录 一、MongoDB介绍 二、MongoDB相关概念 三、MongoDB的下载和安装 四、SpringBoot 整合 MongoDB 一、MongoDB介绍 MongoDB是一种NoSQL数据库管理系统&#xff0c;采用面向文档的数据库模型。它以C语言编写&#xff0c;旨在满足大规模数据存储和高性能读写操作的需求。Mo…

BUGKU-WEB 文件包含

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 你说啥我就干啥&#xff1a;点击一下试试你会想到PHP伪协议这方面去嘛&#xff0c;你有这方面的知识储备吗&#xff1f; 相关工具 解题步骤 查看源码 看到了一点提示信息&#xff1a; ./index.…

【压缩感知基础】Nyquist采样定理

Nyquist定理&#xff0c;也被称作Nyquist采样定理&#xff0c;是由哈里奈奎斯特在1928年提出的&#xff0c;它是信号处理领域的一个重要基础定理。它描述了连续信号被离散化为数字信号时&#xff0c;采样的要求以避免失真。 数学表示 Nyquist定理的核心内容可以描述如下&…

06 内存管理

目录 c/c内存分布c语言中动态内存管理方式c中动态内存管理方式operator new与operator delete函数new和delete的实现原理定位new表达式(placement-new)常见题 1. c/c内存分布 看一段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticV…

sql server想要小数点后向下取整怎么搞

select FORMAT(3.169, N2) as 四舍五入1, CAST(3.169 AS decimal(9,2)) as 四舍五入2, ROUND(3.169, 2) as 四舍五入3, CAST(FLOOR(3.169 * 100) / 100 AS decimal(9,2)) as 向下取整1, FLOOR(3.169 * 100) / 100 as 向下取整2, ceiling(3.169 * 100) / 100 as 向上取整—…

Studio One 6免费下载安装激活教程

一、Studio One 6安装 1.双击Studio One6安装包&#xff08;见文章尾部&#xff09;&#xff0c;如下图&#xff0c;可以切换语言&#xff0c;点击【OK】。 2.根据安装导航&#xff0c;点击【下一步】 3.阅读许可证协议后&#xff0c;点击【我接受】。 4.选择安装位置&#xf…

服务器开发

服务器开发涉及多个领域和技术&#xff0c;包括但不限于以下方面&#xff1a; 网络编程&#xff1a;服务器开发需要深入理解网络协议&#xff0c;如TCP/IP&#xff0c;UDP等&#xff0c;以及套接字编程。同时&#xff0c;对于常用的网络通信模型&#xff0c;如socket网络编程&…