common.js
$(document).ready(function (){ 
    $.i18n.init({ 
        resGetPath: '/locales/__lng__.json', 
        load: 'unspecific', 
        fallbackLng: false, 
        lng: 'ko' 
    }, function (t){ 
        $('#tabContainer').i18n(); 
        $('#side-menu').i18n(); 
        $('.navbar-top-links').i18n(); 
    }); 

    $('.set_en').on('click', function (){ 
        i18n.setLng('en', function(){ 
            $('#tabContainer').i18n(); 
            $('#side-menu').i18n(); 
            $('.navbar-top-links').i18n(); 

            $('.set_en').addClass('active'); 
            $('.set_ko').removeClass('active'); 
        }); 
    }); 

    $('.set_ko').on('click', function (){ 
        i18n.setLng('ko', function(){ 
            $('#tabContainer').i18n(); 
            $('#side-menu').i18n(); 
            $('.navbar-top-links').i18n(); 

            $('.set_ko').addClass('active'); 
            $('.set_en').removeClass('active'); 
        }); 
    }); 
});

resGetPath - json 이 있는 위치 경로만 맞춰주면 그안에 모든 json을 인식
괜히 저기다가 /locales/ko.json 쓰지 마시길.......
$('#tabContainer').i18n();   이건 변환할 태그 ID  
메뉴 이동시 호출해주면됩니다.
귀찮으면 body에 ID주고 그걸로 걸어버리는것도 방법
--------------------------------------------------------------------------------------
html
버튼추가
<div class="row" style="float:right; margin-right:50px;"> 
    <a class="btn btn-white set_ko"> <img src="/img/South-Korea.png">KOR</a> 
    <a class="btn btn-white set_en"> <img src="/img/United-States.png">EN</a> 
</div>

변경할 태그에 data-i18n="json지정이름"
<span class="nav-label" data-i18n="nav.prjtList">프로젝트현황</span>
<span class="nav-label" data-i18n="nav.prjtJoin">프로젝트생성</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.9.0/i18next.min.js" type="text/javascript"></script>


-------------------------------------------------------------------------------------
en.json
{
    "app":{
        "name": "INSPINIA 2.4"
    },
    "nav":{
        "prjtManager": "project Manager",
        "prjtList": "project List",
        "prjtJoin": "project Join",
    },
    "prjt":{
        "prjtList": "project List",
        "prjtJoin": "project Join"
    }
}

ko.json
{
    "app": {
        "name": "INSPINIA 2.4"
    },
    "nav": {
        "prjtManager": "프로젝트 관리",
        "prjtList": "프로젝트 현황",
        "prjtJoin": "프로젝트 생성"
    },
    "prjt":{
        "prjtList": "프로젝트 현황", 
        "prjtJoin": "프로젝트 생성"
    }
}

json 만들어서 필요한 카테고리 구분하고 불러다 쓰시면 됩니다.

저도 오늘 겨우 성공한거라...

더 좋은 방법 있으시면 공유좀....ㅠ_ㅠ

+ Recent posts