diff options
Diffstat (limited to 'demos')
21 files changed, 108 insertions, 24 deletions
diff --git a/demos/addClass/default.html b/demos/addClass/default.html index 1bb33b362..e2d9a79b0 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -11,7 +11,7 @@ .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script type="text/javascript"> $(function() { diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 3001f7d17..4cc98d8f9 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -54,6 +54,12 @@ minLength: 0 }) .addClass("ui-widget ui-widget-content ui-corner-left"); + input.data("autocomplete")._renderItem = function( ul, item) { + return $( "<li></li>" ) + .data( "item.autocomplete", item ) + .append( "<a>" + item.label + "</a>" ) + .appendTo( ul ); + }; $("<button> </button>") .attr("tabIndex", -1) .attr("title", "Show All Items") @@ -96,19 +102,28 @@ <label>Your preferred programming language: </label> <select id="combobox"> <option value="">Select one...</option> - <option value="a">asp</option> - <option value="c">c</option> - <option value="cpp">c++</option> - <option value="cf">coldfusion</option> - <option value="g">groovy</option> - <option value="h">haskell</option> - <option value="j">java</option> - <option value="js">javascript</option> - <option value="p1">perl</option> - <option value="p2">php</option> - <option value="p3">python</option> - <option value="r">ruby</option> - <option value="s">scala</option> + <option value="ActionScript">ActionScript</option> + <option value="AppleScript">AppleScript</option> + <option value="Asp">Asp</option> + <option value="BASIC">BASIC</option> + <option value="C">C</option> + <option value="C++">C++</option> + <option value="Clojure">Clojure</option> + <option value="COBOL">COBOL</option> + <option value="ColdFusion">ColdFusion</option> + <option value="Erlang">Erlang</option> + <option value="Fortran">Fortran</option> + <option value="Groovy">Groovy</option> + <option value="Haskell">Haskell</option> + <option value="Java">Java</option> + <option value="JavaScript">JavaScript</option> + <option value="Lisp">Lisp</option> + <option value="Perl">Perl</option> + <option value="PHP">PHP</option> + <option value="Python">Python</option> + <option value="Ruby">Ruby</option> + <option value="Scala">Scala</option> + <option value="Scheme">Scheme</option> </select> </div> <button id="toggle">Show underlying select</button> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index 139b41d99..b9de20576 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -60,7 +60,7 @@ $('#project').val(ui.item.label); $('#project-id').val(ui.item.value); $('#project-description').html(ui.item.desc); - $('#project-icon').attr('src', '../images/' + ui.item.icon); + $('#project-icon').attr('src', 'images/' + ui.item.icon); return false; } @@ -78,7 +78,7 @@ <div class="demo"> <div id="project-label">Select a project (type "j" for a start):</div> - <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default"/> + <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> <input id="project"/> <input type="hidden" id="project-id"/> <p id="project-description"></p> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index d78b0576c..110263dac 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -12,7 +12,7 @@ <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"]; + var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; $("#tags").autocomplete({ source: availableTags }); diff --git a/demos/images/jquery_32x32.png b/demos/autocomplete/images/jquery_32x32.png Binary files differindex 1cd42c9fe..1cd42c9fe 100644 --- a/demos/images/jquery_32x32.png +++ b/demos/autocomplete/images/jquery_32x32.png diff --git a/demos/images/jqueryui_32x32.png b/demos/autocomplete/images/jqueryui_32x32.png Binary files differindex 23ca0f8b9..23ca0f8b9 100644 --- a/demos/images/jqueryui_32x32.png +++ b/demos/autocomplete/images/jqueryui_32x32.png diff --git a/demos/images/sizzlejs_32x32.png b/demos/autocomplete/images/sizzlejs_32x32.png Binary files differindex 8d7ae1e0b..8d7ae1e0b 100644 --- a/demos/images/sizzlejs_32x32.png +++ b/demos/autocomplete/images/sizzlejs_32x32.png diff --git a/demos/images/transparent_1x1.png b/demos/autocomplete/images/transparent_1x1.png Binary files differindex 209a43864..209a43864 100644 --- a/demos/images/transparent_1x1.png +++ b/demos/autocomplete/images/transparent_1x1.png diff --git a/demos/autocomplete/images/ui-anim_basic_16x16.gif b/demos/autocomplete/images/ui-anim_basic_16x16.gif Binary files differnew file mode 100644 index 000000000..085ccaeca --- /dev/null +++ b/demos/autocomplete/images/ui-anim_basic_16x16.gif diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index ba96d994e..9d5ba3a87 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -13,10 +13,12 @@ <li><a href="remote.html">Remote datasource</a></li> <li><a href="remote-with-cache.html">Remote with caching</a></li> <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li> + <li><a href="maxheight.html">Scrollable results</a></li> <li><a href="combobox.html">Combobox</a></li> <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="folding.html">Accent folding</a></li> <li><a href="multiple.html">Multiple values</a></li> <li><a href="multiple-remote.html">Multiple, remote</a></li> </ul> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html new file mode 100644 index 000000000..97de724ba --- /dev/null +++ b/demos/autocomplete/maxheight.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Autocomplete Scrollable Results 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" /> + <style type="text/css"> + .ui-autocomplete { + max-height: 100px; + overflow-y: auto; + } + /* IE 6 doesn't support max-height + * we use height instead, but this forces the menu to always be this tall + */ + * html .ui-autocomplete { + height: 100px; + } + </style> + <script type="text/javascript"> + $(function() { + var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; + $("#tags").autocomplete({ + source: availableTags + }); + }); + </script> +</head> +<body> + +<div class="demo"> + +<div class="ui-widget"> + <label for="tags">Tags: </label> + <input id="tags" /> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> +<p> +When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through. +</p> +</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 2046db614..520505159 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -10,6 +10,9 @@ <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" /> + <style type="text/css"> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> <script type="text/javascript"> $(function() { function split(val) { diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index d8cb7e403..742c7d857 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -12,7 +12,7 @@ <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"]; + var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; function split(val) { return val.split(/,\s*/); } diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index ab8a600a8..127298e36 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -10,6 +10,9 @@ <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" /> + <style type="text/css"> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> <script type="text/javascript"> $(function() { function log(message) { diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index b7f688175..bd261f44e 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -10,6 +10,9 @@ <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" /> + <style type="text/css"> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> <script type="text/javascript"> $(function() { var cache = {}; diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 9414102e6..2dd0eb733 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -10,6 +10,9 @@ <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" /> + <style type="text/css"> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> <script type="text/javascript"> $(function() { function log(message) { diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php index 01206489a..8fa9d28f8 100644 --- a/demos/autocomplete/search.php +++ b/demos/autocomplete/search.php @@ -3,8 +3,8 @@ $q = strtolower($_GET["term"]); if (!$q) return; $items = array( -"Great <em>Bittern</em>"=>"Botaurus stellaris", -"Little <em>Grebe</em>"=>"Tachybaptus ruficollis", +"Great Bittern"=>"Botaurus stellaris", +"Little Grebe"=>"Tachybaptus ruficollis", "Black-necked Grebe"=>"Podiceps nigricollis", "Little Bittern"=>"Ixobrychus minutus", "Black-crowned Night Heron"=>"Nycticorax nycticorax", diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index 3a5dadab9..c00868cac 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -10,6 +10,9 @@ <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" /> + <style type="text/css"> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> <script type="text/javascript"> $(function() { function log(message) { diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html index 15a5a5756..0d3b10e8d 100644 --- a/demos/removeClass/default.html +++ b/demos/removeClass/default.html @@ -11,7 +11,7 @@ .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script type="text/javascript"> $(function() { diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html index bfb0c9c8b..81c69c879 100644 --- a/demos/switchClass/default.html +++ b/demos/switchClass/default.html @@ -11,8 +11,8 @@ .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect {position: relative; } - #effect.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; } - #effect.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } + .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script type="text/javascript"> $(function() { diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html index b679c96b7..4c045097e 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -11,7 +11,7 @@ .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> <script type="text/javascript"> $(function() { |
