언어 번역 qLabel 사용 방법(Google qLabel)

구글이 언어 번역 자바스크립트 라이브러리를 오픈 소스로 공개했다.
qLabel 간단하게 사용 가능하니 따라해보자.

1단계: 설치(선택 사항)

웹 서버에 아래 자바스크립트 라이브러리가 없다면 다운로드 후 업로드한다.
업로드 하지 않고 직접 로드할려면 2단계로 넘어가라.

2단계: 스크립트 입력

1단계의 라이브러리를 로드하기 위해 입력한다.
다운로드 받았다면 업로드한 주소로 지정하고 다운로드 받지 않았다면 그대로 입력해라.
(qLabel은 jQuery 플러그인으로 제작되었다.)

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//googleknowledge.github.io/qlabel/src/jquery.qlabel.js"></script>

3단계: 주석 요소 추가

번역을 사용할 문자에 qLabel 주소를 넣어 줘야하는데,
its-ta-ident-ref 요소에 Wikidata 의 주소를 넣어주면된다.
그리고 반드시 class 요소에 qlabel 요소가 있어야 한다.
(qLabel 라이브러리에서 class="qlabel" 요소를 찾아서 실행된다.)

<span class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q9176">Korean</span>

4단계: 사용자 언어 선택

준비된 언어를 번역하기 위한 이벤트를 만들어줘야 한다.
$.qLabel.switchLanguage('언어선택') 원하는 언어 지정 후 사용 가능하다.

<button onclick="$.qLabel.switchLanguage('ko')">한국어 번역</button>

5단계: 샘플 페이지 페이지

- 데모 페이지 보기

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qLabel Test</title>
</head>
<body>
    <!-- 번역 테스트 -->
    <span class="qlabel" its-ta-ident-ref="http://www.wikidata.org/entity/Q9176">Korean</span>
    <button onclick="$.qLabel.switchLanguage('ko')">한국어 번역</button>

    <!-- 자바스크립트 라이브러리 -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//googleknowledge.github.io/qlabel/src/jquery.qlabel.js"></script>
</body>
</html>

개발자스럽다