Custom no-results message support (#286)

* Custom no-results message support
* Refactoring and clean up for LanguageCategoryDisplay class
* Document the options for LanguageCategoryDisplay class
* Reduce the spreading of no results handler code
* Add an option to accept no results template
* Remove unwanted, unused constructor too
* Use CSS to hide or show the no-results view
* Remove the unwanted noresults method in jquery.uls.core, directly
  call the same method of lcd.
* Add an example
* Support a function returning jquery element as the no-result handler
This commit is contained in:
Santhosh Thottingal
2018-01-12 19:35:11 +05:30
committed by Niklas Laxström
parent 84e82520c8
commit 2aa43148bb
5 changed files with 136 additions and 57 deletions

View File

@@ -30,7 +30,7 @@
<script>
$( document ).ready( function() {
$( '.uls-trigger' ).uls( {
onSelect : function( language ) {
onSelect: function( language ) {
var languageName = $.uls.data.getAutonym( language );
$( '.uls-trigger' ).text( languageName );
},
@@ -42,12 +42,11 @@
<body>
<div class="navbar navbar-fixed-top">
<span class="active uls-trigger">Select Language</span>
<span class="active uls-trigger">Select language</span>
<h1>Universal Language Selector</h1>
<p>
Demonstration of jQuery plugin
Demonstration of jQuery.uls plugin
</p>
</div>
<div class="container"></div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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="https://code.jquery.com/jquery-3.2.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.core.js"></script>
<script>
$( document ).ready( function() {
$( '.uls-trigger' ).uls( {
onSelect: function( language ) {
var languageName = $.uls.data.getAutonym( language );
$( '.uls-trigger' ).text( languageName );
},
noResultsTemplate: function( query ) {
return $( '<div>No article exists in the language ' + query + '</div>' )
}
} );
} );
</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.uls plugin
</p>
</div>
</body>
</html>