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 만들어서 필요한 카테고리 구분하고 불러다 쓰시면 됩니다.
저도 오늘 겨우 성공한거라...
더 좋은 방법 있으시면 공유좀....ㅠ_ㅠ
'개발 > JAVASCRIPT' 카테고리의 다른 글
ActiveX 설치여부 확인하기 (0) | 2017.03.17 |
---|---|
자바스크립트 get방식 parameter값 꺼내기 (0) | 2017.03.17 |
[자바스크립트] SNS공유하기 (0) | 2017.03.17 |
JavaScript replace all 하기 (0) | 2017.03.17 |
자바스크립트 hidden onchange 함수 (0) | 2017.03.14 |