GithubHelp home page GithubHelp logo

briantani / jquery-i18n Goto Github PK

View Code? Open in Web Editor NEW

This project forked from recurser/jquery-i18n

0.0 2.0 1.0 214 KB

A jQuery plugin for doing client-side translations in javascript.

Home Page: http://www.daveperrett.com/articles/2008/02/21/jquery-i18n-translation-plugin/

License: MIT License

JavaScript 93.75% CSS 6.25%

jquery-i18n's Introduction

About

jQuery-i18n is a jQuery plugin for doing client-side translations in javascript. It is based heavily on javascript i18n that almost doesn't suck by Marko Samastur, and is licensed under the MIT license.

Installation

You'll need to download the jQuery library, and include it before jquery.i18n.js in your HTML source. See the examples folder for examples.

This library is also available as a bower component under the name jquery-i18n.

Usage

Before you can do any translation you have to initialise the plugin with a 'dictionary' (basically a property list mapping keys to their translations).

var my_dictionary = {
    'some text':      'a translation',
    'some more text': 'another translation'
}
$.i18n.load(my_dictionary);

Once you've initialised it with a dictionary, you can translate strings using the $.i18n._() function, for example:

$('div#example').text($.i18n._('some text'));

or using $('selector')._t() function

$('div#example')._t('some text');

Wildcards

It's straightforward to pass dynamic data into your translations. First, add %s in the translation for each variable you want to swap in :

var my_dictionary = {
    "wildcard example"  : "We have been passed two values : %s and %s."
}
$.i18n.load(my_dictionary);

Next, pass values in sequence after the dictionary key when you perform the translation :

$('div#example').text($.i18n._('wildcard example', 100, 200));

or

$('div#example')._t('wildcard example', 100, 200);

This will output We have been passed two values : 100 and 200.

Because some languages will need to order arguments differently to english, you can also specify the order in which the variables appear :

var my_dictionary = {
    "wildcard example"  : "We have been passed two values : %2$s and %1$s."
}
$.i18n.load(my_dictionary);

$('div#example').text($.i18n._('wildcard example', 100, 200));

This will output: We have been passed two values: 200 and 100.

If you need to explicitly output the string %s in your translation, use %%s :

var my_dictionary = {
    "wildcard example"  : "I have %s literal %%s character."
}
$.i18n.load(my_dictionary);

$('div#example').text($.i18n._('wildcard example', 1));

This will output: I have 1 literal %%s character.

Building From Scratch

Use npm install to install the dependencies, and grunt to run the build.

Change history

  • Version 1.1.1 (2014-01-05) : Use html() instead of text() when rendering translations.
  • Version 1.1.0 (2013-12-31) : Use grunt, update printf implementation, setDictionary is now load (thanks to ktmud).
  • Version 1.0.1 (2013-10-11) : Add bower support.
  • Version 1.0.0 (2012-10-14) : 1.0 release - addition of a test suite (huge thanks to alexaitken), plus a major cleanup.

Bug Reports

If you come across any problems, please create a ticket and we'll try to get it fixed as soon as possible.

Contributing

Once you've made your commits:

  1. Fork jquery-i18n
  2. Create a topic branch - git checkout -b my_branch
  3. Push to your branch - git push origin my_branch
  4. Create a Pull Request from your branch
  5. That's it!

Author

Dave Perrett :: [email protected] :: @daveperrett

Copyright

Copyright (c) 2010 Dave Perrett. See License for details.

jquery-i18n's People

Contributors

recurser avatar alexaitken avatar ktmud avatar bvleur avatar eikes avatar madpilot avatar

Watchers

James Cloos avatar  avatar

Forkers

prisisforks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.