Create Multilingual Web Pages With jQuery And Linked Data - qLabel

File Size: 7.43 MB
Views Total: 673
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Multilingual Web Pages With jQuery And Linked Data - qLabel

qLabel is a lightweight jQuery plugin for creating multilingual web pages that translates any strings within the document using Linked Data you provide.

Licensed under the Apache 2.0.

Basic Usage:

1. Link to jQuery library and the jquery.qlabel.js script in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.qlabel.js"></script>

2. Define URIs that provides Linked Data containing labels in different languages (e.g. Wikipedia) in the its-ta-ident-ref attribute as follows:

<span class="langselect qlabel" id="en" its-ta-ident-ref="http://www.wikidata.org/entity/Q1860">English</span> -
<span class="langselect qlabel" id="de" its-ta-ident-ref="http://www.wikidata.org/entity/Q188">German</span> -
<span class="langselect qlabel" id="uz" its-ta-ident-ref="http://www.wikidata.org/entity/Q9264">Uzbek</span> -
<span class="langselect qlabel" id="hr" its-ta-ident-ref="http://www.wikidata.org/entity/Q6654">Croatian</span> -
<span class="langselect qlabel" id="zh" its-ta-ident-ref="http://www.wikidata.org/entity/Q7850">Chinese</span> -
<span class="langselect qlabel" id="ko" its-ta-ident-ref="http://www.wikidata.org/entity/Q9176">Korean</span> -
<span class="langselect qlabel" id="ar" its-ta-ident-ref="http://www.wikidata.org/entity/Q13955">Arabic</span> -
<span class="langselect qlabel" id="ja" its-ta-ident-ref="http://www.wikidata.org/entity/Q5287">Japanese</span> -
<span class="langselect qlabel" id="hi" its-ta-ident-ref="http://www.wikidata.org/entity/Q1568">Hindi</span> -
<span class="langselect qlabel" id="ru" its-ta-ident-ref="http://www.wikidata.org/entity/Q7737">Russian</span>

3. Switch between languages on the webpage.

$('.langselect').click(function() {
  var lang = $(this).attr('id');
  $.qLabel.switchLanguage(lang);
});

// or
$.qLabel.switchLanguage('en');
$.qLabel.switchLanguage('de')
...

This awesome jQuery plugin is developed by googleknowledge. For more Advanced Usages, please check the demo page or visit the official website.