Multi variant input jQuery plugin
This plugin lets you input easily different variants of the input value. Best example is translation into different languages. Let's say that you want to enter the name English, but also optionally in German and French. This is very unobtrusive plugin, which detects focus of the input and then displays little HTML popup to enter optional translations. When you click out of the input and out of the popup, it seemlessly disappears.
First specified variant is used as primary default and is shown as input. Other specified variants are shown in popup box.
Requirements
jQuery 1.6 (because of use of ":focus" selector)
Configuration
$('#id_of_text_input').multi_variant_input(options);
Right now there are 2 options you can specify:
var options = {
// key of the variants object is appended to the name of the input box and value is used as label in popup
// key is appended at the end of the input name like this: input_name => input_name[key]
variants : {'en':'English','de':'German', 'es':'Spanish'},
// in values you can specify values for each input using its keys
values: {'en':'Hello','de':'Hallo','fr':'Bonjour'},
// if hoverable is true (default) then popup appears also when input box is hovered
hoverable : true
};
Usage example
Below is HTML and JS code used for demo, which can you try yourself below.
Javascript
$('#multi_variant_input').multi_variant_input({
variants: {'en':'English','de':'German','fr':'French'}
values: {'en':'Hello','de':'Hallo','fr':'Bonjour'}
});
HTML
<input type="text" id="multi_variant_input" input_name="multi_variant_input" value="" />
Demo
Try to click the input box. When the input box has focus, little popup window appears and you can fill variants of the input names. In this example - name in different languages (those are specified in plugin config - see code example)
Download
Zip version (4 kB)
Changelog
October 27, 2011 - released 1.0