jQuery Plugin For Universal Language Selector - ULS

ULS is a jQuery plugin that allows you to implement a clean Wikimedia Universal Language Selector on your website.

How to use it:

1. Include the latest jQuery library on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>

2. Include necessary jQuery ULS files on the page

<link href="../css/jquery.uls.css" rel="stylesheet"/>
<link href="../css/jquery.uls.grid.css" rel="stylesheet"/>
<link href="../css/jquery.uls.lcd.css" rel="stylesheet"/>
<script src="../src/jquery.uls.data.js"></script>
<script src="../src/jquery.uls.data.utils.js"></script>
<script src="../src/jquery.uls.lcd.js"></script>
<script src="../src/jquery.uls.languagefilter.js"></script>
<script src="../src/jquery.uls.regionfilter.js"></script>
<script src="../src/jquery.uls.core.js"></script>

3. Create a container for the Language Selector

<span class="active uls-trigger">Select Language</span>

4. The javascript.

<script>
$( document ).ready( function() {
$( '.uls-trigger' ).uls( {
onSelect : function( language ) {
var languageName = $.uls.data.getAutonym( language );
$( '.uls-trigger' ).text( languageName );
},
quickList: ['en', 'hi', 'he', 'ml', 'ta', 'fr'] //FIXME
} );
} );
</script>

5. All default options.

{
// Callback function to be called when a language is selected
onSelect: null, 
// Language search API
searchAPI: null, 
// Languages to be used for ULS, default is all languages
languages: $.uls.data.getAutonyms(), 
quickList: [], // Array of language codes or function that returns such
// The options are wide (4 columns), medium (2 columns), and narrow (1 column).
// If not specified, it will be set automatically.
menuWidth: null,
// Regions to show.
showRegions: [ 'WW', 'AM', 'EU', 'ME', 'AF', 'AS', 'PA' ],
// Callback function to be called when a language link is prepared - for custom decoration.
languageDecorator: null 
}

Change log:

2018-01-05

This awesome jQuery plugin is developed by wikimedia. For more Advanced Usages, please check the demo page or visit the official website.