My favorites | Sign in
Project Home Downloads Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Project Information
Members

JQuery Messages Plugin

A plugin for JQuery to manage labels in applications.


Description

Loads the labels for your application and re-use they when are needed:

var labels = {
    greetings : 'Hello world!!!',
    greetingsTo : 'Hello {name}'
}
$.loadMessages(labels);

The labels can be tokenized and replaced when are required with the correct values:

alert($.message('greetings')); // --> Hello world!!!
alert($.message({key : 'greetingsTo', params: {name: 'Manuel'}}); // --> Hello Manuel

or you can change directly the content of a tag:

$('h1').message({key : 'greetingsTo', params: {name: 'Manuel'}}); //Change the content of all 'h1' to "Hello Manuel"

There is the possibility of use the element's id as key of the message:

<script type="text/javascript">
$(function(){
    var labels = {
        greetings : 'Hi at all!',
        greetingsTo : 'Hello {name}'
    };
    $.loadMessages(labels);
    $('div').message({useId : true, params: {name: 'Manuel'}}); //Will change the contents of the div using the id as key
})
</script>
<div id="greetingsTo"></div>
<div id="greetings" class="smallText"></div>

If the message remains the same but the parameters have to change you can use the $.data function to get the values.

<script type="text/javascript">
$(function(){
    var labels = {
        greetings : 'Hi at all!',
        greetingsTo : 'Hello {name}'
    };
    $.loadMessages(labels);

    $('#greetingsToManuel').data('name', 'Manuel');
    $('#greetingsToNobody').data('name', 'Nobody');

    $('div').message({key: 'greetingsTo', useData: true}); //Will use 'greetingsTo' as key and the '$.data()' for the parameters
})
</script>
<div id="greetingsToManuel"></div>
<div id="greetingsToNobody"></div>

Load messages

There are 4 ways to load the messages, you can pass at the loadMessages method:

  • an object
  • a string
  • a function
  • an array

Load by object

You can load a key-value mapped object, where the value is a string representing the message. Example:

var labels = {
    greetings : 'Hello world!!!',
    greetingsTo : 'Hello {name}'
}
$.loadMessages(labels);

Load by string

You can pass a string formatted as 'key1=value1\nkey2=value2' and it will be parsed and loaded. Example:

var labels = 'greetings=Hello world!!!\n'+
             'greetingsTo=Hello {name}';
$.loadMessages(labels);

Load by function

You can pass a function that retrieves one of the possibile object to load a message (object, string, function or array). Example:

//It doesn't seems so useful...
$.loadMessage(function(){
    return 'key=value';
});

Load by array

You can pass an array of all the supported object (mixed too) and each value of the array will be added. Example:

var txt = 'title=Messages JQuery Plugin\n' +
          'author=Created By <em>{author}</em>';
var obj = {greetings : 'Hello {name}', test: 'this is a \{test\}'};
var fn = function(){
    return 'helloWorld=Hello World';
}
$.loadMessages([txt, obj, fn]);

The message static function

$.message(settings, object) Replace the content of an object with a message specified in the settings object.

  • settings is an object to define how have to work the function, the possible properties are:
    • key A string representing the key of the label
    • params An object with the parameters for the label
    • extendedLabels An object with some labels to add only for this time (if we don't want to load all the labels)
    • useData A boolean/string value. If 'true' is specified the params object will be extended with $(object).data(), while if a string is specified we can access directly a property in the data object, like: $(object).data(useData)
    • useId A boolean value. If true the 'id' of the element will be used. It override the 'key' parameter.
  • object A JQuery object or a selector. Its content will be replaced with the message.

$.message(settings) Retrieves a message specified from the settings object.

  • settings is an object to define how have to work the function, the possible properties are:
    • key A string representing the key of the label
    • params An object with the parameters for the label
    • extendedLabels An object with some labels to add only for this time (if we don't want to load all the labels)
    • useData A boolean/string value. If 'true' is specified the params object will be extended with $(object).data(), while if a string is specified we can access directly a property in the data object, like: $(object).data(useData)
    • useId A boolean value. If true the 'id' of the element will be used. It override the 'key' parameter.

$.message() Retrieves an object with all the messages previously loaded.


The message function for a JQuery object

The message function is just a shortcut like:

$('div').message({key: 'greetings'});
//is the same as
$.message({key: 'greetings'}, $('div'));
//or
$.message({key: 'greetings'}, 'div');

Powered by Google Project Hosting