r3266 committed - first prototypes for autocomplete and menu
Revision: 3266
Author: joern.zaefferer
Date: Sun Sep 20 11:33:29 2009
Log: first prototypes for autocomplete and menu
http://code.google.com/p/jquery-ui/source/detail?r=3266
Added:
/branches/dev/tests/static/menu
/branches/dev/tests/static/menu/default.html
/branches/dev/tests/visual/autocomplete
/branches/dev/tests/visual/autocomplete/default.html
/branches/dev/tests/visual/menu
/branches/dev/tests/visual/menu/default.html
/branches/dev/themes/base/images/ui-anim.basic.16x16.gif
/branches/dev/themes/base/ui.autocomplete.css
/branches/dev/themes/base/ui.menu.css
Modified:
/branches/dev/tests/static/index.html
/branches/dev/tests/visual/index.html
/branches/dev/themes/base/ui.base.css
/branches/dev/ui/jquery.ui.autocomplete.js
/branches/dev/ui/jquery.ui.menu.js
=======================================
--- /dev/null
+++ /branches/dev/tests/static/menu/default.html Sun Sep 20 11:33:29 2009
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+ <title>Menu Static Test : Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+
+</head>
+<body>
+
+
+<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu
ui-widget ui-widget-content ui-corner-bottom">
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Aberdeen</a></li>
+ <li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a
href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Adamsville</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Addyston</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Adelphi</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Adena</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Adrian</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Akron</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Albany</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alexandria</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alger</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alledonia</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alliance</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alpha</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alvada</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Alvordton</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Amanda</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Amelia</a></li>
+ <li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1"
class="ui-corner-all">Amesville</a></li>
+</ul>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/tests/visual/autocomplete/default.html Sun Sep 20
11:33:29 2009
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<head>
+ <title>Autocomplete Visual Test: Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.position.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.autocomplete.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#tags").autocomplete({
+ source:
["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"],
+ change: function(event, ui) {
+ var message = ui.item ? ("Selected: " + ui.item.result) : "Nothing
selected";
+ $("<div/>").text(message).appendTo("#log");
+ }
+ }).focus();
+ });
+ </script>
+</head>
+<body>
+
+<div>
+ <label>Tags: </label>
+ <input id="tags" />
+</div>
+
+<div id="log"></div>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/tests/visual/menu/default.html Sun Sep 20 11:33:29 2009
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+ <title>Menu Visual Test: Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript"
src="../../../ui/jquery.ui.menu.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").menu({
+ selected: function(event, ui) {
+ $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
+ }
+ });
+ });
+ </script>
+ <style>
+ #menu2 { height: 200px; }
+ </style>
+</head>
+<body>
+
+<ul id="menu1">
+ <li><a href="#">Aberdeen</a></li>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Adamsville</a></li>
+ <li><a href="#">Addyston</a></li>
+ <li><a href="#">Adelphi</a></li>
+</ul>
+
+<ul id="menu2">
+ <li><a href="#">Aberdeen</a></li>
+ <li><a href="#">Ada</a></li>
+ <li><a href="#">Adamsville</a></li>
+ <li><a href="#">Addyston</a></li>
+ <li><a href="#">Adelphi</a></li>
+ <li><a href="#">Adena</a></li>
+ <li><a href="#">Adrian</a></li>
+ <li><a href="#">Akron</a></li>
+ <li><a href="#">Albany</a></li>
+ <li><a href="#">Alexandria</a></li>
+ <li><a href="#">Alger</a></li>
+ <li><a href="#">Alledonia</a></li>
+ <li><a href="#">Alliance</a></li>
+ <li><a href="#">Alpha</a></li>
+ <li><a href="#">Alvada</a></li>
+ <li><a href="#">Alvordton</a></li>
+ <li><a href="#">Amanda</a></li>
+ <li><a href="#">Amelia</a></li>
+ <li><a href="#">Amesville</a></li>
+</ul>
+
+<div id="log"></div>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/themes/base/images/ui-anim.basic.16x16.gif Sun Sep 20
11:33:29 2009
@@ -0,0 +1,43 @@
+GIF89a Ä ÿÿÿîîîÝÝÝ»»»ªªª™™™ˆˆˆwwwfffUUUDDD333""" ÿÿÿ !ÿ NETSCAPE2.0 !ù , w
$B ‰$å¨B # Ï# «(<LàÈÁ¬
+3Ãð ¦D Å æH$^¶”@é ø Pd€°¸"U
+³P# Îa
+‚\;ŸÍƒÃ1ª
+
+oÏ::0
+v @ $|,3 ‚_# d €5 3—" s5 e! !ù , c $ŽÐ ˆ 9*"#
+
+¡Š Ä8ö3ÌbÁ4
+ k” B Óã‘J‰
+`4˜ò†< q8ì² B ø‚_
+™sDP@U Ó d¯×Z„ f* i "‚( )† VY Ž#! !ù , ` $ŽPa ¨ˆˆ
+ K*: Ô u ” Ñ #Á@tX
+ƒ!&0<
+ U#' ž áh€Øm 'Ñ@Yˆ¢^hÂa-k÷Ü(„Áë.
+†ƒ šNò € |$ C f)@‚f|! !ù , b $ŽbAžâ @‰"&
+- ë"è*6C ã È€ *
+‚+`jè 4ˆ 2`È 5’° X ¢ÑpÀ’ á ñh/H±“`.Ð
¦ëh †ÌõR" ]SW B]€~‚†€Š(! !ù , I $ŽÐq ¨˜ˆÏæìÚB
+,
+n[ÐhÒ ÇÂä* G‰Ç
+UÜ‘–¨ÅH )8£GÍtJÕ^SÔ@˜ºŽÆ-*Dm˦ؤ T ‡
+ !ù , q $ŽÐ0 ( ¢qˆ‡ k ÁÈ©€ 7A G d†‚é°(1 ¢ÀÀ0 Œ ‚ dÁ
X¤€¢`U ÎeR!‘P ÎèT Áh Â(Á¢€Âv!_"PQ V e
+ Y
+i) Z `x# '3y |)žŽ! !ù , ` $Ž ¨8ˆEÁ¦ìI¸
+ ‹F0C
+ š ÝÀT@ˆ F‘`˜B4 ¨À
+ð‰‚A €b ZÅbq¸ ¬ ²‚ À° ‚ ·Æà )/a zSS€ & V€
p$! !ù , ^ $B‚8 "1® Ú¢ ®0Š¸ ˜‹B RÂ0
+ v«Ã"ÈBŽ ®Ùlp¨ª¤£XbˆÕݤFŸ‘ a²
+ ƒAA&*X†Ç Á(@ˆ3 ºÔ ,° (
+} Q+> R! !ù , c $ŽP ¨xB‚ +*œ-[Ädචá¢+“i@
+)` L¢
+?'I`¨JG‚ƒ¶øb P¾©âñhŽ
+ƒÊñX¸ B )0 ¢Â׸X ›Q# } N o "tI+ZI! !ù , \
$ŽP` ©Š¦8¬êù®©*ÔÅ „1 ¶• ‚h 0‚r°x8 °BÁ‡ µQa ù ˆÅVÄ
+¥!ÑM
+D„l!¡ 4 %Ø B‡
+öBe
+PDY0 0! !ù , ] $Ž$ ”è ¥À¢ÂI> QÊÁð ôóŽ ]éð ´d"†2 8 G£qH9
¯ A 2– ¢ŸÈ€ðB ª"á, D‡‚H('
+ 4³Á½C
+\0 ` UL" r(! !ù , d $ŽdI `®Ãìkò °øBÂó˜B
+· m è•
+ŽAÉ72,
+ĩ(P
+ X鲪‚ø “’ 8@R%‚a K ‡*¡€ þD¨ ÁŒè2E { $ƒ„f t5†C%! ;
=======================================
--- /dev/null
+++ /branches/dev/themes/base/ui.autocomplete.css Sun Sep 20 11:33:29 2009
@@ -0,0 +1,6 @@
+/* Autocomplete
+----------------------------------*/
+.ui-autocomplete {}
+
+.ui-autocomplete-loading { background: white
url('images/ui-anim.basic.16x16.gif') right center no-repeat; }
+.ui-autocomplete-over { background-color: #0A246A; color: white; }
=======================================
--- /dev/null
+++ /branches/dev/themes/base/ui.menu.css Sun Sep 20 11:33:29 2009
@@ -0,0 +1,8 @@
+/* Menu
+----------------------------------*/
+.ui-menu { width: 200px; overflow: auto; list-style-position: outside;
list-style: none; padding: 0; margin: 0; list-style: none; padding: 0;
margin:.2em 0; display: block; }
+
+.ui-menu .ui-menu-item { margin: 0px; padding: 2px 5px; cursor: default;
display: block; font: menu; font-size: 12px; line-height: 16px; overflow:
hidden; border-collapse: collapse; margin: 0 .2em; display: block;
padding:0; line-height: 1.3em; }
+.ui-menu .ui-menu-item a { text-decoration: none; display: block;
padding: .2em .4em; border: 1px dashed transparent; font-weight:
normal !important; }
+
+.ui-menu .ui-menu-item .ui-state-hover { border: 1px solid #D3D3D3; }
=======================================
--- /branches/dev/tests/static/index.html Fri Feb 20 03:40:25 2009
+++ /branches/dev/tests/static/index.html Sun Sep 20 11:33:29 2009
@@ -25,8 +25,10 @@
<h2>Widgets</h2>
<ul>
<li><a href="accordion/default.html">Accordion</a></li>
+ <li><a href="autocomplete/default.html">Autocomplete</a></li>
<li><a href="datepicker/default.html">Datepicker</a></li>
<li><a href="dialog/default.html">Dialog</a></li>
+ <li><a href="menu/default.html">Menu</a></li>
<li><a href="progressbar/default.html">Progressbar</a></li>
<li><a href="slider/default.html">Slider</a></li>
<li><a href="tabs/default.html">Tabs</a></li>
=======================================
--- /branches/dev/tests/visual/index.html Fri Feb 20 03:40:25 2009
+++ /branches/dev/tests/visual/index.html Sun Sep 20 11:33:29 2009
@@ -25,8 +25,10 @@
<h2>Widgets</h2>
<ul>
<li><a href="accordion/default.html">Accordion</a></li>
+ <li><a href="autocomplete/default.html">Autocomplete</a></li>
<li><a href="datepicker/default.html">Datepicker</a></li>
<li><a href="dialog/default.html">Dialog</a></li>
+ <li><a href="menu/default.html">Menu</a></li>
<li><a href="progressbar/default.html">Progressbar</a></li>
<li><a href="slider/default.html">Slider</a></li>
<li><a href="tabs/default.html">Tabs</a></li>
=======================================
--- /branches/dev/themes/base/ui.base.css Thu Jan 22 17:01:15 2009
+++ /branches/dev/themes/base/ui.base.css Sun Sep 20 11:33:29 2009
@@ -1,8 +1,10 @@
@import url("ui.core.css");
@import url("ui.accordion.css");
+@import url("ui.autocomplete.css");
@import url("ui.datepicker.css");
@import url("ui.dialog.css");
+@import url("ui.menu.css");
@import url("ui.progressbar.css");
@import url("ui.resizable.css");
@import url("ui.slider.css");
=======================================
--- /branches/dev/ui/jquery.ui.autocomplete.js Thu Sep 17 05:30:58 2009
+++ /branches/dev/ui/jquery.ui.autocomplete.js Sun Sep 20 11:33:29 2009
@@ -14,8 +14,101 @@
$.widget("ui.autocomplete", {
_init: function() {
-
+ var self = this;
+ this.element.attr("autocomplete", "off").keyup(function(event) {
+ switch(event.keyCode) {
+ case $.ui.keyCode.UP:
+ self.focusUp();
+ break;
+ case $.ui.keyCode.DOWN:
+ self.focusDown();
+ break;
+ case $.ui.keyCode.ENTER:
+ self.select();
+ break;
+ default:
+ self.search();
+ break;
+ }
+ });
+ this.initSource();
+ },
+
+ // call when source-option is updated
+ initSource: function() {
+ if ($.isArray(this.options.source)) {
+ var array = this.options.source;
+ this.source = function(request, response) {
+ var matcher = new RegExp(request.term, "i");
+ response($.map($.grep(array, function(value) {
+ return matcher.test(value)
+ }), function(text) {
+ return {
+ id: text,
+ label: text,
+ result: text
+ }
+ }));
+ }
+ } else {
+ this.source = this.options.source;
+ }
+ },
+
+ search: function() {
+ var self = this;
+ var value = this.element.val();
+ if (value.length >= this.options.minLength) {
+ this.source({ term: value }, function response(content) {
+ self.suggest(content);
+ });
+ } else {
+ this.menu && this.menu.remove();
+ }
+ },
+
+ suggest: function(items) {
+ if (this.menu) {
+ this.menu.remove();
+ }
+ var self = this;
+ var ul = this.menu = $("<ul/>");
+ $.each(items, function(index, item) {
+ $("<li/>").data("item.autocomplete", item).append("<a>" + item.label
+ "</a>").appendTo(ul);
+ });
+ ul.css({
+ position: "absolute"
+ }).appendTo(document.body).menu({
+ selected: function(event, ui) {
+ var data = ui.item.data("item.autocomplete");
+ self.element.val( data.result );
+ ul.remove();
+ self._trigger("change", null, { item: data });
+ }
+ }).position({
+ my: "left top",
+ at: "left bottom",
+ of: this.element
+ });
+ },
+
+ focusUp: function() {
+ if (!this.menu)
+ return;
+ this.menu.menu("previous");
+ },
+
+ focusDown: function() {
+ this.menu.menu("next");
+ },
+
+ select: function() {
+ this.menu.menu("select");
}
});
+$.ui.autocomplete.defaults = {
+ minLength: 1
+}
+
})(jQuery);
=======================================
--- /branches/dev/ui/jquery.ui.menu.js Thu Sep 17 05:30:58 2009
+++ /branches/dev/ui/jquery.ui.menu.js Sun Sep 20 11:33:29 2009
@@ -14,8 +14,56 @@
$.widget("ui.menu", {
_init: function() {
-
- }
+
this.element.attr("role", "menu").attr("aria-activedescendant", "ui-active-menuitem").addClass("ui-menu
ui-widget ui-widget-content ui-corner-bottom");
+ var items = this.element.children("li");
+ var self = this;
+ items.addClass("ui-menu-item").attr("role", "menuitem")
+ .children("a").attr("tabindex", "-1").addClass("ui-corner-all")
+ // replace with event delegation
+ .click(function(e) {
+ // temporary
+ e.preventDefault();
+ self._trigger("selected", null, { item: $(this).parent() });
+ })
+ .hover(function() {
+ self.activate($(this));
+ }, function() {
+ self.deactivate($(this))
+ });
+
+ },
+
+ activate: function(item) {
+ this.activeitem =
item.addClass("ui-state-hover").attr("id", "ui-active-menuitem");
+ },
+
+ deactivate: function(item) {
+
item.removeClass("ui-state-hover").removeAttr("id", "ui-active-menuitem");
+ },
+
+ next: function() {
+ if (!this.activeitem) {
+ this.activate(this.element.children("li:first").children("a"));
+ return;
+ }
+ this.deactivate(this.activeitem);
+ this.activate(this.activeitem.parent().next().children("a"));
+ },
+
+ previous: function() {
+ if (!this.activeitem) {
+ this.activate(this.element.children("li:last").children("a"));
+ return;
+ }
+ this.deactivate(this.activeitem);
+ this.activate(this.activeitem.parent().prev().children("a"));
+ },
+
+ select: function() {
+ // merge with click handler
+ this._trigger("selected", null, { item: $(this.activeitem).parent() });
+ }
+
});
})(jQuery);