将网页翻译成不同 语言 Lang.js

  • 源码大小:27.3KB
  • 所需积分:1积分
  • 源码编号:19JP-3170
  • 浏览次数:719次
  • 最后更新:2023年05月14日
  • 所属栏目:文本
本站默认解压密码:19jp.com 或 19jp_com

简介

还有另一个jQuery翻译插件,用于创建国际网页,使您可以在客户端轻松地将网站翻译成任何语言,而无需刷新页面。

重量轻,易于使用,性能高。支持文本、常用属性(title、alt、href、占位符),甚至支持通过AJAX加载的动态内容。

此外,该插件使用cookie记住用户偏好,并以用户上次访问时选择的语言显示网页。

如何使用它:

1.在jquery之后加载主脚本jquery-lang.js。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="/path/to/js/jquery-lang.js"></script>

2.加载js cookie库,以在cookie中保留当前的语言选择。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>

3.加载语言包(JSON)。

  1. var lang = new Lang();
  2. lang.dynamic('en', 'js/langpack/en.json');
  3. lang.dynamic('es', 'js/langpack/es.json');
  1. // example JSON
  2. {
  3.  
  4. // use custom tokens
  5. "token": {
  6. "propertySearch": "ค้นหา",
  7. "translationWithDataObject": "ชื่อจริง: ${data.firstName} นามสกุล: ${data.lastName}",
  8. "flagImage": "flat-2.svg",
  9. },
  10.  
  11. // uses regex
  12. "regex": [
  13. [
  14. "Budget",
  15. "งบประมาณ"
  16. ]
  17. ]
  18. }

3.使用Regex翻译字符串。

  1. <input lang="en" type="text" name="budgetFrom" placeholder="Budget" />

4.或者添加数据语言令牌属性指定给任何希望使用多种语言的元素。

  1. <div lang="en" data-lang-token="propertySearch"></div>
  2. <div lang="en" data-lang-token="translationWithDataObject" data-lang-default-data='{"firstName": "Amelia", "lastName": "Earhart"}'></div>
  3. <img lang="en" data-lang-token="flagImage" src="flag.svg" />

5.初始化插件并确定默认语言。

  1. lang.init({
  2.  
  3. // Default language
  4. defaultLang: 'en',
  5. // Current language
  6. currentLang: 'en',
  7. // Config cookies
  8. cookie: {
  9. name: 'langCookie',
  10. expiry: 365,
  11. path: '/'
  12. },
  13. // Override the "currentLang" option if the cookie is set
  14. allowCookieOverride: true
  15. });

6.翻译元素中的任何字符串。

  1. window.lang.translate('Translate Text In A Window');

7.在语言之间切换。

  1. window.lang.change('Language Name');

8.扩展插件以支持更多属性:

  1. Lang.prototype.attrList.push('data-name');

更新日志:

2023-02-27

  • 专长:工厂支持窗口节点环境

预览截图