Multi Lingual resources Implementation & Usage at client side
Declare
all the resources in the .js file ==> Let's its name be LanguageResources.js
Note:
I have declared resourse for Englisn(under EN), Spanish (under SP),Arabic (under
AR) and Chinese (under CH)
1)
Declare in as below:
var
langResource = {
EN: {
1: "office phone",
2: "location",
3: "Save",
4: "Add"
},
SP:
{
1: "teléfono de la oficina",
2: "ubicación" ,
3: "Guardar",
4: "añadir"
},
AR:
{
1: "هاتف المكتب",
2: "موقع",
3: "حفظ",
4: "إضافة"
},
CH
: {
1: "办公电话",
2: "地点",
3: "保存",
4: "添加"
}
};
2)
include hidden field in your html or aspx page è
< input type="hidden" id="hdnSiteLang"/>
< input type="hidden" id="hdnSiteLang"/>
3)
In the aspx or html page where you want the resources to be used include this
file as below
<script src="Scripts/LanguageResources.js "
type="text/javascript"></script>
Use hdnSiteLang hidden field
for defining your application language, for ex: if you want to display text in Arabic assign it with AR è $("#hdnSiteLang").val("AR");
Note1: by default it will take English, if you want to
change then you can assign different language value to this hidden field ex: SP(Spanish),AR(Arabic),CH(Chinese).
Note2:
make sure your page also has
jQuery file included from jquery.com.
4)
Include jQuery function as below
$(document).ready(function () {
/*LANGUAGE
INITIALISATION*/
if
($.cookies.get('siteLang') != null)
siteLang = $.cookies.get('siteLang');
else
if
($("#hdnSiteLang").val().length
> 0)
siteLang = $("#hdnSiteLang").val()
else
siteLang = "EN";
$(".SITELNG").each(function
() {
var
cld = $(this).attr('class').split(" ");
if
(cld[0].substring(0, 2) == "H-")
$(this).html(langResource[siteLang][cld[0].substring(2)]);
if (cld[0].substring(0,
2) == "L-") $(this).html(langResource[siteLang][cld[0].substring(2)].toLowerCase());
if
(cld[0].substring(0, 2) == "T-")
$(this).attr("title", langResource[siteLang][cld[0].substring(2)]);
if
(cld[0].substring(0, 2) == "M-") {
if
($("#hdnMode").val() == "true")
$(this).attr("value",
langResource[siteLang][ parseInt(cld[0].substring(2))
+ 1]);
else
$(this).attr("value",
langResource[siteLang][cld[0].substring(2)]);
}
});
5)
Usage: you may surprise the usage is very tricky can be done by just including the
class.
syntax:
class=’HTML(H)/TITLE(T)/MODIFYTEXT(M) – RESOURCENUMBER(Integer) SITELNG’
syntax:
class=’HTML(H)/TITLE(T)/MODIFYTEXT(M) – RESOURCENUMBER(Integer) SITELNG’
See
below:
Example:
1)
<div id="divID" class="H-2 SITELNG"></div>
Note: When loaded this div will be written by text ‘Location’(its
declared in array second position) with the default language.
2) <img id="imgID" class="T-1 SITELNG "></img>
Note:
When loaded this image tag will have title
text as ‘Office Phone’(its declared in array 1st position) With default language.
3)
<input type="button" class="M-3 SITELNG " id="btnID"/>
This above
button text will change depending upon the hidden field value hdnMode, for example I
want to set its text as SAVE on existing form and ADD when the form is new.
In this case
for the new form I need to set the mode (hdnMode) as ‘true’, based on this the
value to this button will be set.
Note: the text to be changed must be declared one
after other. (ex: 3 & 4 , Save, Add)
Hope this is helpful to you, write your comments
in the box J.
