8f7382b242
Default value of this option will be $.uls.data.autonyms(). It can be set to limit language selection to a set of languages. Updated examples, used a config variable wgULSLanguages to set this. Change-Id: Ia322cbdcdb14f08619d2e4df5b23e2702841d147
121 lines
4.3 KiB
HTML
121 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
|
|
<!--
|
|
Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
|
Remove this if you use the .htaccess
|
|
-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
|
|
|
<title>Universal Language Selector</title>
|
|
<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
|
|
<!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> -->
|
|
<!-- <meta name="description" content=""/> -->
|
|
<meta name="author" content="Santhosh Thottingal"/>
|
|
<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"/>
|
|
<!-- demo -->
|
|
<link href="resources/demo.css" rel="stylesheet"/>
|
|
<!-- Libs -->
|
|
<script src="resources/jquery.js"></script>
|
|
<!-- Source -->
|
|
<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.core.js"></script>
|
|
<script>
|
|
$( document ).ready( function() {
|
|
$( '.uls-trigger' ).uls( {
|
|
onSelect : function( language ) {
|
|
var languageName = $.uls.data.autonym( language );
|
|
$('a#pageLanguage').text( languageName );
|
|
}
|
|
} );
|
|
} );
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<span class="active uls-trigger"> <a id="pageLanguage" href="#">Select Language</a> </span>
|
|
<h1>Universal Language Selector</h1>
|
|
<p>
|
|
Demonstration of jquery plugin
|
|
</p>
|
|
</div>
|
|
<div class="container">
|
|
<div class="uls-menu">
|
|
<div class="row">
|
|
<span class="icon-close"></span>
|
|
</div>
|
|
<div class="row">
|
|
<div class="four columns">
|
|
<h1> Select language </h1>
|
|
</div>
|
|
<div class="three columns" id="settings-block"></div>
|
|
<div class="five columns" id="map-block">
|
|
<div class="row">
|
|
<div data-regiongroup="4" id="uls-region-4" class="three columns uls-region">
|
|
<a>Worldwide</a>
|
|
</div>
|
|
<div class="nine columns">
|
|
<div class="row uls-worldmap">
|
|
<div data-regiongroup="1" id="uls-region-1" class="four columns uls-region">
|
|
<a>America</a>
|
|
</div>
|
|
<div data-regiongroup="2" id="uls-region-2" class="four columns uls-region">
|
|
<a>Europe
|
|
<br>
|
|
Middle east
|
|
<br>
|
|
Africa</a>
|
|
</div>
|
|
<div data-regiongroup="3" id="uls-region-3" class="four columns uls-region">
|
|
<a>Asia
|
|
<br>
|
|
Australia
|
|
<br>
|
|
Pacific</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="search">
|
|
<div class="row">
|
|
<div class="one column">
|
|
<span class="search-label"></span>
|
|
</div>
|
|
<div class="ten columns">
|
|
<div id="search-input-block">
|
|
<input type="text" class="filterinput" id="filtersuggestion" disabled="true" autocomplete="off"/>
|
|
<input type="text" class="filterinput" id="languagefilter" data-clear='languagefilter-clear' data-suggestion="filtersuggestion" placeholder="Language search" autocomplete="off"/>
|
|
</div>
|
|
</div>
|
|
<div class="one column">
|
|
<span id="languagefilter-clear"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row uls-language-list"></div>
|
|
<div class="row uls-no-results-view">
|
|
<h2 class="ten columns end offset-by-one">No results found for "<span id="uls-no-found-search-term">Esapnol</span>"</h2>
|
|
<div id="uls-no-found-more">
|
|
<div class="ten columns end offset-by-one">
|
|
<p>
|
|
You can search by language name, script name, ISO code of language or you can browse by region: <a class="uls-region-link" data-region="NA" href="#">America</a>, <a class="uls-region-link" data-region="EU" href="#">Europe</a>, <a class="uls-region-link" data-region="ME" href="#">Middle East</a>, <a class="uls-region-link" data-region="AF" href="#">Africa</a>, <a class="uls-region-link" data-region="AS" href="#">Asia</a>, <a class="uls-region-link" data-region="PA" href="#">Pacific</a> or <a class="uls-region-link" data-region="WW" href="#">Worldwide languages</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|