Localizing jQuery plugins

I’ve spent some time to figure out how to localize my jQuery plugins and I’ve just found out a way that works just fine.
Disclaimer: I’m not 100% sure of how namespacing works in jQuery, so this might not be the correct way.

I’m using the meta header accept-language to control which language to use. It allows me to select the language in my backend (using user settings or whatever) instead of just using the languages defined by the browser. An ASP.NET MVC3 header would look like this in the layout:

<meta name="accept-language" 
content="@System.Globalization.CultureInfo.CurrentCulture.Name" />

You should be able to do the same thing in PHP or whatever language you use.

Next thing to do is to add the localization structure to your plug in script file:

(function($) {
    //globals
    $.yourPluginName = {
        texts: {
            title: 'Please wait, loading..'
        },
        translations: []
    };

    var methods = {
        // your methods here.
    };

    $.fn.yourPluginName = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.yourPluginName');
        }

    };

})(jQuery);

That will make the plug in work if no languages are loaded. The translations will be loaded into the $.yourPluginName.translations array by another script.

We got one thing left to do before we can use the texts in your script. We need to load the correct language. Create another script called jquery.yourpluginnamne.localization.js and load it after:

$(function () {
    $.yourPluginName.translations['sv-SE'] = {
        title: ‘Vänta, laddar..’
    };

    $.yourPluginName.translations['fi-FI'] = {
        title: ‘Yxi yxi, kaxi…’
    };    

    var currentLanguage = $("meta[name='accept-language']").attr("content");
    if (typeof $.yourPluginName.translations[currentLanguage] !== ‘undefined’)
        $.yourPluginName.texts = $.yourPluginName.translations[currentLanguage];
});

That's it!

Use $.yourPluginName.texts.anyTextName in your plug in to use the localized strings.