还有另一个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