Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/i18next/jquery-i18next
jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
https://github.com/i18next/jquery-i18next
i18n i18next internationalization javascript jquery jquery-i18n jquery-plugin translation
Last synced: 1 day ago
JSON representation
jQuery-i18next is a jQuery based Javascript internationalization library on top of i18next. It helps you to easily internationalize your web applications.
- Host: GitHub
- URL: https://github.com/i18next/jquery-i18next
- Owner: i18next
- License: mit
- Created: 2015-11-16T08:16:18.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-23T15:26:11.000Z (over 1 year ago)
- Last Synced: 2024-04-08T16:04:44.206Z (9 months ago)
- Topics: i18n, i18next, internationalization, javascript, jquery, jquery-i18n, jquery-plugin, translation
- Language: HTML
- Homepage: https://locize.com/blog/jquery-i18next/
- Size: 3.51 MB
- Stars: 168
- Watchers: 12
- Forks: 86
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Introduction
Source can be loaded via [npm](https://www.npmjs.com/package/jquery-i18next), bower or [downloaded](https://github.com/i18next/jquery-i18next/blob/master/jquery-i18next.min.js) from this repo or from a CDN like [CDNJS](https://cdnjs.com/libraries/jquery-i18next).
--------------
**NEWS: localization as a service - locize.com**
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using [locize](http://locize.com/?utm_source=jquery_i18next_readme&utm_medium=github) you directly support the future of i18next and react-i18next.
--------------
## Advice:
To see jquery-i18next in a working app example, check out [this blog post](https://locize.com/blog/jquery-i18next/) and [this example](https://github.com/i18next/jquery-i18next/tree/master/example/landing).
--------------
If you don't use a module loader it will be added to window.jqueryI18next
```
# npm package
$ npm install jquery-i18next
# bower
$ bower install jquery-i18next
```
Simplifies i18next usage in projects built based on jquery, like:
page source:
```html
```
loaded resource file (locales/en/translation.json):
```json
{
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
```
javascript code:
```js
$(".nav").localize();
// results in
//
```
## Initialize the plugin
```js
jqueryI18next.init(i18nextInstance, $, {
tName: 't', // --> appends $.t = i18next.t
i18nName: 'i18n', // --> appends $.i18n = i18next
handleName: 'localize', // --> appends $(selector).localize(opts);
selectorAttr: 'data-i18n', // selector for translating elements
targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if different than itself)
optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
useOptionsAttr: false, // see optionsAttr
parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
});
```
## using options in translation function
```js
$("#btn1").localize(options);
```
or
```js
$("#btn1").localize();
// make sure you set the useOptionsAttr option to true if you want to pass the i18n options via data-i18n-options attribute.
```
`data-i18n-options` attribute must be a valid JSON object.
## usage of selector function
### translate an element
```js
$("#btn1").localize(options);
```
myKey: same key as used in i18next (optionally with namespaces)
options: same options as supported in i18next.t
### translate children of an element
```js
$(".nav").localize();
```
### translate some inner element
```js
$(".outer").localize();
```
### set different attribute
```js
$("#btn1").localize();
```
### set multiple attributes
```js
$("#btn1").localize();
```
### set innerHtml attributes
```js
$("#btn1").localize();
```
### prepend content
```js
insert before me, please!
$("#btn1").localize();
```
### append content
```js
append after me, please!
$("#btn1").localize();
```
### set data
```js
$("#btn1").localize();
```
--------------
Gold Sponsors
