还有另一个jQuery翻译插件,用于创建国际网页,使您可以在客户端轻松地将网站翻译成任何语言,而无需刷新页面。
重量轻,易于使用,性能高。支持文本、常用属性(title、alt、href、占位符),甚至支持通过AJAX加载的动态内容。
此外,该插件使用cookie记住用户偏好,并以用户上次访问时选择的语言显示网页。
1.在jquery之后加载主脚本jquery-lang.js。
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/js/jquery-lang.js"></script>
2.加载js cookie库,以在cookie中保留当前的语言选择。
- <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
3.加载语言包(JSON)。
- var lang = new Lang();
- lang.dynamic('en', 'js/langpack/en.json');
- lang.dynamic('es', 'js/langpack/es.json');
- // example JSON
- {
- // use custom tokens
- "token": {
- "propertySearch": "à¸à¹à¸à¸«à¸²",
- "translationWithDataObject": "à¸à¸·à¹à¸à¸à¸£à¸´à¸: ${data.firstName} à¸à¸²à¸¡à¸ªà¸à¸¸à¸¥: ${data.lastName}",
- "flagImage": "flat-2.svg",
- },
- // uses regex
- "regex": [
- [
- "Budget",
- "à¸à¸à¸à¸£à¸°à¸¡à¸²à¸"
- ]
- ]
- }
3.使用Regex翻译字符串。
- <input lang="en" type="text" name="budgetFrom" placeholder="Budget" />
4.或者添加数据语言令牌
属性指定给任何希望使用多种语言的元素。
- <div lang="en" data-lang-token="propertySearch"></div>
- <div lang="en" data-lang-token="translationWithDataObject" data-lang-default-data='{"firstName": "Amelia", "lastName": "Earhart"}'></div>
- <img lang="en" data-lang-token="flagImage" src="flag.svg" />
5.初始化插件并确定默认语言。
- lang.init({
- // Default language
- defaultLang: 'en',
- // Current language
- currentLang: 'en',
- // Config cookies
- cookie: {
- name: 'langCookie',
- expiry: 365,
- path: '/'
- },
- // Override the "currentLang" option if the cookie is set
- allowCookieOverride: true
- });
6.翻译元素中的任何字符串。
- window.lang.translate('Translate Text In A Window');
7.在语言之间切换。
- window.lang.change('Language Name');
8.扩展插件以支持更多属性:
- Lang.prototype.attrList.push('data-name');
2023-02-27