The use of I18next

Source: Internet
Author: User
Tags i18n pack
I18next

I18next is a JavaScript library used to support the internationalization of applications.
Website Link: http://i18next.github.io/i18next/index.html
There are more detailed descriptions and examples. Problems encountered in the actual operation can go to the github:https://github.com/i18next/i18next/issues to ask questions, or Google. I18next method of incomplete use

1.I18N's initialization official web provides three ways, with parameters, with callbacks, with both.

I18n.init ({lng: ' en-us '});
I18n.init (function (err, t) {
    /*loading done*/
})
I18n.init ({
    LNG: ' en-US '
},function (err, t) {
    /*loading done*/
})

2. Parameter LNG: ' ZH-CN ' sets the language of the current translation (if no specific LNG is set up, see if there are any in the Querrustringparameter), check the cookie for the language that i18n has set, or check the browser language) Detectlngqs: ' lang ' sets the name of the query parameter, which corresponds to the previous one. Lang=zh-cn; Similarly, you can also change cookiename, such as cookiename: ' Lang ' Usecookie: False sets whether cookies are used, and if they are not used, they are not found in the cookie when the LNG parameter is not set. preload:[' zh-cn ', ' en-us '] preload a language pack lngwhitelist:[' zh-cn ', ' en-us '] can only load specific languages fallbacklng:false| [' en '] sets the missing alternate language, the language to load has a missing key value, instead of FALLBACKLNG; false does not use the default complement mechanism. uselocalstorage:true|false,localstorageexpirationtime:86400000//In Ms,default 1 week by default is not open caching, can be opened according to actual needs, The new language will not be loaded until the language that has been cached in the localstorage expires. The localstorage cache is the entire language pack, that is, the contents of the Language.json file, corresponding to each loaded language pack, will produce a localstorage storage item. debug:true turn on debug mode resgetpath: ' Locales/__lng__/__ns__.json,resgetpath: ' locales/__ns__-__lng__. The JSON setting loads the path for the language pack, which corresponds to the above two modes, as follows: Locales/en_us/translation.json|locales/translation-en-us.json Getasync: False to set whether to load asynchronously, false to synchronous.
There are more parameters to see the official website

3.jquery Use of i18n

There is no hard dependency on JQuery. If not used I18next would use drop in functions for Ajax,...
But if JQuery is loaded before i18next it can be optionally extended
by default I18next would extend jquery by appending i18n to $ and providing a $.FN to translate DOM elements marked H the data-i18n attribute.
Using i18n in jquery requires a call via $.i18n.functionname ().

Example

<! DOCTYPE html>

The corresponding language pack file Translation.json

{"Nav": {"Home": "Home"  
        ,  
        "Page1": "Pageone",  
        "Page2": "Pagetwo",  
        "button": "Search",  
        " Input ': ' Input your name '  
    }  
}

initialization function

$.i18n.init ({
    LNG: ' en-us ',
    resgetpath: ' Locales/__lng__/__ns__.json '
},function (err, t) {
    $ (' [ DATA-I18N]. i18n (); By the selector collective translation
    var temp = $.t ("Nav.home");//Get a translated value through T function
})

If you are using JQUERY-MOBILE**.CSS, the value of the button is not modified, because using that CSS style, modifications to the values of some special tags need to be refreshed, as shown in the following example:

function changebtnlng () {
    var temp = $.t ("Nav.button")//The translation value of the button is obtained by the T function
    $ ("#btn_query"). Val (temp). Button ("Refresh"); Refresh and modify the button value
}

Sometimes you may want to modify the title of the page, if you click on the page to switch the language button switch, title will often not refresh, until the jump to other pages, title content will be translated, resolved as follows:

$ ("#btn_change"). Click (function () {
    /*your code*/
    var res_lng = "en-US";
    Location.reload (FALSE); Refresh page directly after switching languages
})

for JS automatically generated HTML content, to be generated after the addition of $ ("#id"). i18n (), otherwise not translated into the corresponding content

If there are errors, please correct them.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.