언어 번역 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>

관련 페이지



javascript
4월 8, 2014
0

Menu

Search

Popular Posts

디자이너를 위한 최고의 영화 (디자이너에게 영감을 주는 영화)

개인적으로 직접 조립하고 만드는걸 좋아했는데 만들기전에 만들어질 모습을 스케치하는 것을 즐겼습니다. 스케치 할때 머리 속에 있는 멋진 모습…

Bash 입문자를 위한 핵심 요약 정리 (Shell Script)

Bash 입문자를 위한 기본적인 문법과 알고 있으면 좋은 것들만 정리했다. (이런 것도 있구나 싶을 정도만 이해하도록 간단한 설명과 예제로 …

PHP7 공개 전 참고 사이트 소개

PHP7 공개가 2015년 10월이라고 한다. 그래서 인지 모르겠지만 부쩍 PHP7에 대한 글들을 많이 찾아볼 수 있어 참고해볼 만한 …

Contact Me