aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorjzaefferer <joern.zaefferer@gmail.com>2010-04-21 20:06:56 +0200
committerjzaefferer <joern.zaefferer@gmail.com>2010-04-21 20:06:56 +0200
commitcfa185d962a153aa50c1ec991f37a24d222abce2 (patch)
tree5f747e161a57dbbd2776a4eae68df7d305ecbf03 /demos
parent19b76a14a85c000996e22a6377ff86dc931bbc1e (diff)
parent469d0c52e93fe9e421877eec90489cc06d63e5e5 (diff)
downloadjquery-ui-cfa185d962a153aa50c1ec991f37a24d222abce2.tar.gz
jquery-ui-cfa185d962a153aa50c1ec991f37a24d222abce2.zip
Merge commit '1.8.1' into tooltip
Diffstat (limited to 'demos')
-rw-r--r--demos/autocomplete/custom-data.html8
-rw-r--r--demos/autocomplete/folding.html64
-rw-r--r--demos/autocomplete/index.html2
-rw-r--r--demos/autocomplete/multiple-remote.html75
-rw-r--r--demos/autocomplete/multiple.html69
-rw-r--r--demos/autocomplete/remote-with-cache.html7
-rw-r--r--demos/draggable/visual-feedback.html2
-rw-r--r--demos/effect/index.html2
8 files changed, 222 insertions, 7 deletions
diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html
index 57598fa8c..139b41d99 100644
--- a/demos/autocomplete/custom-data.html
+++ b/demos/autocomplete/custom-data.html
@@ -64,7 +64,13 @@
return false;
}
- });
+ })
+ .data( "autocomplete" )._renderItem = function( ul, item ) {
+ return $( "<li></li>" )
+ .data( "item.autocomplete", item )
+ .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
+ .appendTo( ul );
+ };
});
</script>
</head>
diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html
new file mode 100644
index 000000000..d5bc71e9d
--- /dev/null
+++ b/demos/autocomplete/folding.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Autocomplete Accent Folding Demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
+
+ var accentMap = {
+ 'á':'a',
+ 'ö':'o'
+ };
+ var normalize = function( term ) {
+ var ret = '';
+ for ( var i = 0; i < term.length; i++ ) {
+ ret += accentMap[ term.charAt(i) ] || term.charAt(i);
+ }
+ return ret;
+ };
+
+ $( "#developer" ).autocomplete({
+ source: function( request, response ) {
+ var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
+ response( $.grep( names, function( value ) {
+ value = value.label || value.value || value;
+ return matcher.test( value ) || matcher.test( normalize( value ) );
+ }) );
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+ <form>
+ <label for="developer">Developer: </label>
+ <input id="developer" />
+ </form>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.
+</p>
+<p>
+Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html
index 42f13dc4b..ba96d994e 100644
--- a/demos/autocomplete/index.html
+++ b/demos/autocomplete/index.html
@@ -17,6 +17,8 @@
<li><a href="custom-data.html">Custom data and display</a></li>
<li><a href="xml.html">XML data parsed once</a></li>
<li><a href="categories.html">Categories</a></li>
+ <li><a href="multiple.html">Multiple values</a></li>
+ <li><a href="multiple-remote.html">Multiple, remote</a></li>
</ul>
</div>
</body>
diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
new file mode 100644
index 000000000..5e0f4b50b
--- /dev/null
+++ b/demos/autocomplete/multiple-remote.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Autocomplete multiple demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ function split(val) {
+ return val.split(/,\s*/);
+ }
+ function extractLast(term) {
+ return split(term).pop();
+ }
+
+ $("#birds").autocomplete({
+ source: function(request, response) {
+ $.getJSON("search.php", {
+ term: extractLast(request.term)
+ }, response);
+ },
+ search: function() {
+ // custom minLength
+ var term = extractLast(this.value);
+ if (term.length < 2) {
+ return false;
+ }
+ },
+ focus: function() {
+ // prevent value inserted on focus
+ return false;
+ },
+ select: function(event, ui) {
+ var terms = split( this.value );
+ // remove the current input
+ terms.pop();
+ // add the selected item
+ terms.push( ui.item.value );
+ // add placeholder to get the comma-and-space at the end
+ terms.push("");
+ this.value = terms.join(", ");
+ return false;
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+ <label for="birds">Birds: </label>
+ <input id="birds" size="50" />
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
+</p>
+<p>
+This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html
new file mode 100644
index 000000000..908cfe6ce
--- /dev/null
+++ b/demos/autocomplete/multiple.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery UI Autocomplete multiple demo</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
+ function split(val) {
+ return val.split(/,\s*/);
+ }
+ function extractLast(term) {
+ return split(term).pop();
+ }
+
+ $("#tags").autocomplete({
+ minLength: 0,
+ source: function(request, response) {
+ // delegate back to autocomplete, but extract the last term
+ response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
+ },
+ focus: function() {
+ // prevent value inserted on focus
+ return false;
+ },
+ select: function(event, ui) {
+ var terms = split( this.value );
+ // remove the current input
+ terms.pop();
+ // add the selected item
+ terms.push( ui.item.value );
+ // add placeholder to get the comma-and-space at the end
+ terms.push("");
+ this.value = terms.join(", ");
+ return false;
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div class="ui-widget">
+ <label for="tags">Tag programming languages: </label>
+ <input id="tags" size="50" />
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.
+</p>
+<p>
+This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html
index 3688365d4..a00c741e4 100644
--- a/demos/autocomplete/remote-with-cache.html
+++ b/demos/autocomplete/remote-with-cache.html
@@ -22,12 +22,11 @@
source: function(request, response) {
if (cache.term == request.term && cache.content) {
response(cache.content);
+ return;
}
if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) {
- var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
- response($.grep(cache.content, function(value) {
- return matcher.test(value.value)
- }));
+ response($.ui.autocomplete.filter(cache.content, request.term));
+ return;
}
$.ajax({
url: "search.php",
diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html
index bb54de4fe..4644472f0 100644
--- a/demos/draggable/visual-feedback.html
+++ b/demos/draggable/visual-feedback.html
@@ -27,7 +27,7 @@
return $('<div class="ui-widget-header">I\'m a custom helper</div>');
}
});
- $("#set div").draggable({ stack: { group: '#set div', min: 1 } });
+ $("#set div").draggable({ stack: '#set div' });
});
</script>
</head>
diff --git a/demos/effect/index.html b/demos/effect/index.html
index b914c96c5..cecceb6cd 100644
--- a/demos/effect/index.html
+++ b/demos/effect/index.html
@@ -11,7 +11,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
- <li class="demo-config-on"><a href="easing.html">Easing showcase</a></li>
+ <li><a href="easing.html">Easing showcase</a></li>
<!-- WIP
<li class="demo-config-on"><a href="scale.html">Scale effect</a></li>
<li class="demo-config-on"><a href="size.html">Size effect</a></li>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-19 13:23:40 +0000