#Translation Fields - jQuery form widget #####Version - 0.1.4

Translation Fields is a jQuery widget which you can use to enable sending variables in different languages.

##Demo See example

##Documentation

Preparing your HTML

• You can use this widget in every <form> tag in your HTML document.
• To do it, you need to write this block of code inside your <form>:

    <form action="#" class="form-horizontal">
        <div class="control-group">
            <label class="control-label">Word-to-translate</label>
            <div class="controls">
                <input type="text" name="word-to-translate" class="m-wrap lang-translation" disabled />
            </div>
        </div>
    </form>

All this classes are compatibile with Twitter Bootstrap. Rest of code is dynamicly generated by JQuery script.

• To make widget work you need to add CSS styles and JS script to HTML document:

    <link rel="Stylesheet" type="text/css" href="css/form-widget.css" />
    <script type="text/javascript" src="js/form-widget.js"></script>

• General JQuery script is also needed:

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

• By default we are using basic Twitter Bootstrap CSS and JS, but also you can style it by yourself.
  You can download it from here http://getbootstrap.com/2.3.2/getting-started.html#contents and move unpacked directory to your widget folder and than add lines:

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="bootstrap/js/bootstrap.min.js"></script>

• <label> and <input name=""> should contain the same word which will be word that you want to translate on languages.
  Add as many <div class="control-group"> with content as many words you want to be translated.

JS configuration

######To run Translation Fields just add

    <script>
        $('.lang-translation').translationFields();
    </script>

######Available options:

    <script>
        $('.lang-translation').translationFields({
            inputNamePrefix: "widget-",                 // change name prefix text
            confirmBox: {
                yesText: "Tak, skasuj",                 // change text for delete translation
                noText: "Nie, anuluj!",                 // change text for cancel delete translation
                infoMessage: 'Jesteś pewny?',           // change info message for delete translation
                hText: 'Confirm your request',          // change heading for delete translation
                outerClick: false                       // switch true or false                    
            },
            // add or remove languages
            languages: {
                "select": "Select language",
                "PL": "Polish",
                "EN": "English",
                "FR": "French",
                "ES": "Spanish",
                "DE": "German",
                "JP": "Japanse",
                "PT": "Portuguese",
                "RT": "Russian"
            },
        });
    </script>

• We have some default list of languages which is placed in JS file (that is js/form-widget.js). If you want to add new languages or remove lines, add your options in your settings.

How To Use

• To add new translation click at icon on the left side.
• Select language you want and write this word in this language.
• By clicking "Apply" small box with abbreviation appears.
• You can update this word immidietly or remove this translation by clicking "x" on the right side of language box.
• Add more translations to this word.
• After submit, variables to send look like: word-to-translate[XX]=translation where XX is language abbreviation for example: cat[PL]=kot
• Do with this variables what you want

License

Translation Fields is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License and also available under the MIT License.

Contact/Help

[email protected]
[email protected]
Ariana Las <[email protected]>
[email protected]