- Internationalization and localization

- I18N (internationalization) , L10N (localization) , M17N (multilingualization)


jquery i18n 라이브러리

https://github.com/wikimedia/jquery.i18n



//================

* 언어 번역 자료 파일 설정


'i18n/jq_ko.json'

{

"num_1": "일",

"num_2": "이"

}



'i18n/jq_en.json'

{

"num_1": "One",

"num_2": "Two"

}



//================

* 언어 설정

<html lang="ko">


또는


$.i18n().locale = "ko";



//================

* 스크립트 로드

<script src="i18n/jquery.i18n.js"></script>

<script src="i18n/jquery.i18n.messagestore.js"></script>



//================

* 설정 로드

$(document).ready(function() {

    //i18n로드

    $.i18n().load( {

'ko': 'i18n/jq_ko.json',        

'en': 'i18n/jq_en.json'        

    });



//================

* 다국어 출력

$.i18n('num_1');




//=================================

* 기본 언어를 한국어로 변경하기
    - 별도로 ko.json 파일을 작성하지 않고 사용하기


    - 예) $.i18n('옵션')

- locale = 'ko'인 경우 '옵션' 출력

- locale = 'en'인 경우 en.json 파일에서 '옵션' 해당 항목 출력



//============
    - en.json 파일 예제

{
    "옵션": "Option",
    ...
}


//====================
    - jquery.i18n.js 수정 (v1.0.5)

     - fallbacklocale을 en이 아닌 다른 언어로 전환가능하게 수정하기

    - 67줄
https://github.com/wikimedia/jquery.i18n/commit/d9f2b57a9a23573394010c4426d0c64f93eaed4b
//if ( locale === 'en' ) {
if ( locale === this.options.fallbackLocale ) {

   
    - 285줄 수정
        fallbackLocale: 'ko', // 'en'




//============================

예제


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>


<script src="i18n/jquery.i18n.js"></script>

<script src="i18n/jquery.i18n.messagestore.js"></script>


</head>


<body>


<p>Click Me</p>


<script>

$(document).ready(function() {

    //i18n로드

    $.i18n().load( {

        'ko': 'i18n/jq_ko.json',

'en': 'i18n/jq_en.json'

    });


//디버깅 설정

$.i18n.debug = true;


//언어 설정 변경

$.i18n().locale = "en";


$("p").click(function(){

//출력

$(this).text( $.i18n('num_1') );

});


})


</script>

</body>

</html>




//======================

//참고

https://phraseapp.com/blog/posts/jquery-i18n-the-advanced-guide/



반응형

'Code > JavaScript' 카테고리의 다른 글

[jQuery] Ajax  (0) 2018.12.14
[JavaScript] Ajax 예제  (0) 2018.12.14
[W3School] jQuery 정리  (0) 2018.11.07
[W3Schools] JavaScript 정리  (0) 2018.11.07
자바스크립트 모듈 시스템  (0) 2018.10.26
Posted by codens