ecfa8756bf
This provides support for adapting the ULs to small screens: * A mobile-specific CSS, that is only applied when the ULS uses .uls-mobile class, has been created (based on Foundation.css mobile rules + some specifics) to support mobile-specific classes. * The core HTML has been modified to include some clases that in case mobile CSS is enabled dictate which elements can behidden and the number of columns to use in the mobile grid (4-column based). * An index-mobile.html example has been set-up to illustrate the changes. Some of the changes required for a correct mobile experience are still done with JQuery modifications. Someone should probably update the ULS API to allow the inclusion of optional classes (such as uls-mobile) and overriding positioning parameters.
62 lines
2.2 KiB
HTML
62 lines
2.2 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"/>
|
|
<meta name="viewport" content="width=320">
|
|
<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"/>
|
|
<link href="../css/jquery.uls.mobile.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.regionfilter.js"></script>
|
|
<script src="../src/jquery.uls.core.js"></script>
|
|
<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
|
|
} );
|
|
$('.uls-trigger').click(function() {
|
|
//Hacks I need to make afterwards. ULS API should be probably modified to allow optional classes and not force position:
|
|
$('.uls-menu').removeClass('uls-wide');
|
|
$('.uls-menu').addClass('uls-mobile');
|
|
$('.uls-menu').css('left',"2.5%")
|
|
});
|
|
} );
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<span class="active uls-trigger">Select Language</span>
|
|
<h1>Universal Language Selector</h1>
|
|
<p>
|
|
Demonstration of jquery plugin
|
|
</p>
|
|
</div>
|
|
<div class="container"></div>
|
|
</body>
|
|
</html>
|