loQale, a simple JavaScript library to internationalize your web applications.
loQale automatically maps the localized strings to their corresponding HTML elements, so that your web application can be translated on the fly.
#####Prerequisites
To start using loQale you need:
-
The latest version of loQale available here.
-
jQuery 1.7+.
-
One or more JSON files containing your localized strings.
<script src="http://code.jquery.com/jquery.min.js"></script> <script src="loqale.js"></script> <script type='text/javascript' src='strings.en.json'></script> <script type='text/javascript' src='strings.fr.json'></script>
#####Localized strings files
A JSON file is needed every locale you want the application to support. Each JSON file contains the mapping between your string names and their values in the corresponding locale.
For the English locale, create strings.en.json:
loQale.en={
strings : {
"firstname":"First Name",
"lastname":"Last Name",
"register":"Register",
"submit":"Submit"
}
};
For the French locale, create strings.fr.json:
loQale.fr={
strings : {
"firstname":"Prénom",
"lastname":"Nom",
"register":"Inscrivez-vous",
"submit":"Envoyer",
}
};
#####HTML
Add the data-string
attribute to the HTML elements that need to be localized. The value of data-string
is the string name corresponding to this element.
<form>
<fieldset>
<legend data-string="register"></legend>
<label data-string="firstname"></label>
<input type="text"/>
<label data-string="lastname"></label>
<input type="text"/>
<input type="submit" data-string="submit"/>
</fieldset>
</form>
#####Initializing loQale
Inside jQuery's $(document).ready()
, call loQale.init()
to initialize the library.
$(document).ready(function(){
loQale.init();
}
#####Applying localization
To apply the localization call loQale.setLocale(localname)
to change the current locale and then loQale.translate()
to translate the application.
loQale.setLocale('en'); // sets the locale to English
loQale.translate(); // translates the application into English
loQale.setLocale('fr'); // sets the locale to French
loQale.translate(); // translates the application into French
loQale is based on the jquery-i18n plugin by Bryan Berry
loQale is a free software, licensed under the MIT license. See the file LICENSE.md in this distribution for more details.