For narrow ULS show one column without separators

2014-12-09 16:35:16 +02:00
parent 94e867f62e
commit f44302106b
3 changed files with 109 additions and 26 deletions
--- a/examples/index-narrow.html
+++ b/examples/index-narrow.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8">
+
+		<title>Universal Language Selector</title>
+		<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.compact.css" rel="stylesheet">
+		<!-- demo -->
+		<link href="resources/demo.css" rel="stylesheet">
+		<!-- Libs -->
+		<script src="https://code.jquery.com/jquery-1.11.1.min.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( {
+				languages: {
+					ca: 'català',
+					es: 'español',
+					he: 'עברית',
+					ml: 'മലയാളം',
+					ru: 'русский'
+				},
+				onSelect: function ( language ) {
+					var languageName = $.uls.data.getAutonym( language );
+					$( '.uls-trigger' ).text( languageName );
+				},
+				menuWidth: 'narrow',
+				compact: true
+			} );
+		} );
+		</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 - In compact mode
+			</p>
+		</div>
+		<div class="container"></div>
+	</body>
+</html>