diff options
37 files changed, 977 insertions, 749 deletions
@@ -7,3 +7,20 @@ If you want to use jQuery UI, go to [jqueryui.com](http://jqueryui.com) to get s If you are interested in helping developing jQuery UI, you are in the right place. To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui). + +For commiters +--- +When looking at pull requests, first check for [proper commit messages](http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide). + +Unless everything is fine and you can merge directly via GitHub's interface, fetch the remote first: + + git remote add [username] [his-fork.git] -f + +If you want just one commit and edit the commit message: + + git cherry-pick -e [sha-of-commit] + +If it should go to the stable brach, cherry-pick it to stable: + + git checkout 1-8-stable + git cherry-pick -x [sha-of-commit] diff --git a/demos/demos.css b/demos/demos.css index f5f2dbe64..cf6da8bd1 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -129,8 +129,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi .normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; } .normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; } -.normal a:link, -.normal a:visited { color:#1b75bb; text-decoration:none; } +#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; } .normal a:hover, .normal a:active { color:#0b559b; } diff --git a/demos/index.html b/demos/index.html index 22dbfc5c5..b1cfcdd44 100644 --- a/demos/index.html +++ b/demos/index.html @@ -20,6 +20,8 @@ <script src="../ui/jquery.ui.draggable.js"></script> <script src="../ui/jquery.ui.droppable.js"></script> <script src="../ui/jquery.ui.menu.js"></script> + <script src="../ui/jquery.ui.menubar.js"></script> + <script src="../ui/jquery.ui.popup.js"></script> <script src="../ui/jquery.ui.position.js"></script> <script src="../ui/jquery.ui.progressbar.js"></script> <script src="../ui/jquery.ui.resizable.js"></script> @@ -279,6 +281,8 @@ <dd><a href="datepicker/index.html">Datepicker</a></dd> <dd><a href="dialog/index.html">Dialog</a></dd> <dd><a href="menu/index.html">Menu</a></dd> + <dd><a href="menubar/index.html">Menubar</a></dd> + <dd><a href="popup/index.html">Popup</a></dd> <dd><a href="progressbar/index.html">Progressbar</a></dd> <dd><a href="slider/index.html">Slider</a></dd> <dd><a href="spinner/index.html">Spinner</a></dd> diff --git a/demos/menu/contextmenu.html b/demos/menu/contextmenu.html index 0fb98c140..115f15b24 100644 --- a/demos/menu/contextmenu.html +++ b/demos/menu/contextmenu.html @@ -3,44 +3,28 @@ <head> <meta charset="UTF-8" /> <title>jQuery UI Menu - Contextmenu demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.5.1.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.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.popup.js"></script> + <link href="../demos.css" rel="stylesheet" /> + <script> $(function() { $(".demo button").button({ icons: { primary: "ui-icon-home", secondary: "ui-icon-triangle-1-s" } - }).each(function() { - $(this).next().menu({ - select: function(event, ui) { - $(this).hide(); - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }).hide(); - }).click(function(event) { - var menu = $(this).next(); - if (menu.is(":visible")) { - menu.hide(); - return false; + }).next().menu({ + select: function(event, ui) { + $(this).hide(); + $("#log").append("<div>Selected " + ui.item.text() + "</div>"); } - menu.menu("blur").show().position({ - my: "left top", - at: "right top", - of: this - }); - $(document).one("click", function() { - menu.hide(); - }); - return false; - }) + }).popup(); }); </script> <style> @@ -69,7 +53,7 @@ <div class="demo-description"> -<p>A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p> +<p>TODO update - A simple contextmenu: Click the button, or tab to it and hit space to open the menu. Use the mouse or cursor keys to select an item, click it or hit enter to select it.</p> <p>The keyboard handling is part of the menu. Using the input option to menu is configured to add the key event handlers to the button, as that button gets focused when clicked.</p> diff --git a/demos/menu/default.html b/demos/menu/default.html index 2d9dddf28..7a1dd99e7 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -4,12 +4,12 @@ <meta charset="UTF-8" /> <title>jQuery UI Menu - Default demo</title> <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.5.1.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.menu.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link href="../demos.css" rel="stylesheet" /> + <script> $(function() { $(".demo ul").menu(); }); diff --git a/demos/menu/index.html b/demos/menu/index.html index cfc12bc1d..3088f9d7d 100644 --- a/demos/menu/index.html +++ b/demos/menu/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" /> <title>jQuery UI Menu Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link href="../demos.css" rel="stylesheet" /> </head> <body> <div class="demos-nav"> diff --git a/tests/visual/menu/menubar.html b/demos/menubar/default.html index d2185e97c..be49b4589 100644 --- a/tests/visual/menu/menubar.html +++ b/demos/menubar/default.html @@ -1,27 +1,18 @@ <!DOCTYPE html> <html> <head> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.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.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="menubar.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> + <title>jQuery UI Menubar - Default demo</title> + <link rel="stylesheet" href="../demos.css" type="text/css" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.menubar.js"></script> + <script> $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)"); $("#bar1, .menubar").menubar({ @@ -40,7 +31,6 @@ }); </script> <style type="text/css"> - body { font-size:62.5%; } #bar1, #bar2 { margin: 0 0 4em; } /* style for this page only */ .ui-menu { width: 200px; position: absolute; outline: none; z-index: 9999; } .ui-menu .ui-icon { float: right; } @@ -64,7 +54,7 @@ .ui-menubar-item { float: left; } - + /* table { border-collapse: collapse; } @@ -72,10 +62,12 @@ padding: 0.5em; border: 1px solid black; } + */ </style> </head> <body> +<div class="demo"> <ul id="bar1" class="menubar"> <li> <a href="#">File</a> @@ -168,6 +160,7 @@ </li> </ul> +<!-- <table id="movies" class="ui-widget"> <thead> <tr> @@ -222,11 +215,20 @@ </tr> </tbody> </table> +--> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> + <div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> +</div> + +<div class="demo-description"> + +<p>TODO</p> + +</div><!-- End demo-description --> + </body> </html> diff --git a/demos/menubar/index.html b/demos/menubar/index.html new file mode 100644 index 000000000..3eebda2d0 --- /dev/null +++ b/demos/menubar/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Menubar Demos</title> + <link href="../demos.css" rel="stylesheet" /> +</head> +<body> + <div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + </ul> + </div> +</body> +</html> diff --git a/demos/popup/default.html b/demos/popup/default.html new file mode 100644 index 000000000..71b3c8dd2 --- /dev/null +++ b/demos/popup/default.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> +<head> + <title>jQuery UI Popup - Default demo</title> + <link rel="stylesheet" href="../demos.css" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" /> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.popup.js"></script> + <script> + $(function() { + var selected = { + select: function( event, ui ) { + $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); + $(this).popup("close"); + } + }; + + $("#login-form").popup() + .find(":submit").button().click(function(event) { + event.preventDefault(); + }); + }); + </script> + <style type="text/css"> + .ui-popup { position: absolute; z-index: 5000; } + .ui-menu { width: 200px; } + + /* + table { + border-collapse: collapse; + } + th, td { + padding: 0.5em; + border: 1px solid black; + } + */ + + #login-form { + width: 16em; border: 1px solid gray; border-radius: 5px; + padding: 1em; + box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5); + background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); + font-size: 1.3em; outline: none; + } + #login-form label { display: inline-block; width: 5em; } + #login-form .submit { margin-left: 5em; } + </style> +</head> +<body> + +<div class="demo"> + <a href="#login-form">Log In</a> + <div id="login-form" class="ui-widget-content" tabIndex="0"> + <form> + <div> + <label>Username</label> + <input type="username" /> + </div> + <div> + <label>Password</label> + <input type="password" /> + </div> + <div> + <input type="submit" class="submit" value="Login" /> + </div> + </form> + </div> +</div> + +<div class="demo-description"> + +<p>A link to a login form that opens as a popup. [Not quite functional, focus handling needs to get better]</p> + +</div><!-- End demo-description --> + + +</body> +</html> diff --git a/demos/popup/index.html b/demos/popup/index.html new file mode 100644 index 000000000..e69365c98 --- /dev/null +++ b/demos/popup/index.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>jQuery UI Popup Demos</title> + <link href="../demos.css" rel="stylesheet" /> +</head> +<body> + <div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <li><a href="popup-menu.html">Menu's as popup</a></li> + <li><a href="popup-menu-table.html">Menu's as popup in a table</a></li> + </ul> + </div> +</body> +</html> diff --git a/demos/popup/popup-menu-table.html b/demos/popup/popup-menu-table.html new file mode 100644 index 000000000..a06a38434 --- /dev/null +++ b/demos/popup/popup-menu-table.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<head> + <title>jQuery UI Popup - Menu as Popup in table demo</title> + <link rel="stylesheet" href="../demos.css" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" /> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.popup.js"></script> + <script> + $(function() { + var selected = { + select: function( event, ui ) { + $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); + $(this).popup("close"); + } + }; + + $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)"); + $("table .menubar > ul").menu(selected).popup().prev().button(); + }); + </script> + <style type="text/css"> + .ui-popup { position: absolute; z-index: 5000; } + .ui-menu { width: 200px; } + + .demo table { + border-collapse: collapse; + } + .demo th, .demo td { + padding: 0.5em; + } + </style> +</head> +<body> + +<div class="demo"> + + <table id="movies" class="ui-widget"> + <thead> + <tr> + <th data-field="Name" class="ui-widget-header">Name</th> + <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th> + <th data-field="AverageRating" class="ui-widget-header">Average Rating</th> + <th class="ui-widget-header"></th> + </tr> + </thead> + <tbody> + <tr> + <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td> + <td class="ui-widget-content">1993</td> + <td class="ui-widget-content">3.6</td> + <td class="ui-widget-content"> + <div class="menubar"> + <a href="#">Options</a> + <ul> + <li><a href="#">Order...</a></li> + <li class="ui-state-disabled">Write a Review...</li> + <li><a href="#">Find Similar Movies...</a></li> + <li> + <a href="#">Rate</a> + <ul> + <li><a href="#">5 stars</a></li> + <li><a href="#">4 stars</a></li> + <li><a href="#">3 stars</a></li> + <li><a href="#">2 stars</a></li> + <li><a href="#">1 stars</a></li> + </ul> + </li> + </ul> + </div> + </td> + </tr> + <tr> + <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.1</td> + </tr> + <tr> + <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td> + <td class="ui-widget-content">1991</td> + <td class="ui-widget-content">3.9</td> + </tr> + <tr> + <td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td> + <td class="ui-widget-content">1997</td> + <td class="ui-widget-content">2.6</td> + </tr> + </tbody> + </table> + + <div id="log"></div> +</div> + + +<div class="demo-description"> + +<p>Poup menu in a table. Works okay standalone, not so much in the scrolling demo view. For that to work better, position() would have to take the closest scrolled parent into account for collision detection.</p> + +</div><!-- End demo-description --> + + +</body> +</html> diff --git a/demos/popup/popup-menu.html b/demos/popup/popup-menu.html new file mode 100644 index 000000000..7152d85bc --- /dev/null +++ b/demos/popup/popup-menu.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html> +<head> + <title>jQuery UI Popup - Popup Menu</title> + <link rel="stylesheet" href="../demos.css" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" /> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.popup.js"></script> + <script> + $(function() { + function log( msg ) { + $( "<div/>" ).text( msg ).appendTo( "#log" ); + } + var selected = { + select: function( event, ui ) { + log( "Selected: " + ui.item.text() ); + $(this).popup("close"); + } + }; + + $("#button1").button() + .next().menu(selected).popup(); + + $( "#rerun" ) + .button() + .click(function() { + log( "Selected: " + $( this ).text() ); + }) + .next() + .button({ + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .next() + .menu(selected) + .popup({ + trigger: $("#select") + }) + .parent() + .buttonset({ + items: "button" + }); + }); + </script> + <style type="text/css"> + .ui-popup { position: absolute; z-index: 5000; } + .ui-menu { width: 200px; } + </style> +</head> +<body> + +<div class="demo"> + + <button id="button1">Show context menu 1</button> + <ul> + <li><a href="#">Amsterdam</a></li> + <li><a href="#">Anaheim</a></li> + <li><a href="#">Cologne</a></li> + <li><a href="#">Frankfurt</a></li> + <li><a href="#">Magdeburg</a></li> + <li><a href="#">Munich</a></li> + <li><a href="#">Utrecht</a></li> + <li><a href="#">Zurich</a></li> + </ul> + + + <div> + <div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> + <ul> + <li><a href="#">Open...</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Delete</a></li> + </ul> + </div> + </div> + + <div id="log"></div> +</div> + + +<div class="demo-description"> + +<p>Make the popup a menu (or the menu a popup) and you get context menus.</p> + +</div><!-- End demo-description --> + + +</body> +</html> diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html index a7003352c..33539f940 100644 --- a/demos/resizable/constrain-area.html +++ b/demos/resizable/constrain-area.html @@ -10,7 +10,7 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> <link rel="stylesheet" href="../demos.css"> - <style\> + <style> #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable { background-position: top left; width: 150px; height: 150px; } diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 473c6a6a3..56003ab5a 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -10,24 +10,34 @@ <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../tests/visual/menu/popup.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.popup.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { function notify( input ) { var msg = "Selected " + $.trim($(input).text()); - $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-highlight").position({ - my: "center top+20", + $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-default ui-corner-bottom").position({ + my: "center top", at: "center top", of: window - }).delay(1000).fadeOut("slow", function() { + }).show({ + effect: "blind" + }).delay(1000).hide({ + effect: "blind", + duration: "slow" + }, function() { $(this).remove(); }); } $("ul").menu({ select: function(event, ui) { - // stop button from handling the click + // TODO stop button from handling the click $(this).popup("close"); + // TODO should probably be handled by poup, see ESCAPE key handler + // affects key handling + $(this).prev().focus(); notify(ui.item); } }).popup(); @@ -75,7 +85,7 @@ .set { display: inline-block; } - .notification { position: absolute; display: inline-block; font-size: 2em; padding: 1em; border-radius: 15px; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } + .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } </style> </head> <body> diff --git a/tests/unit/autocomplete/autocomplete_events.js b/tests/unit/autocomplete/autocomplete_events.js index 35103d89b..eb009064c 100644 --- a/tests/unit/autocomplete/autocomplete_events.js +++ b/tests/unit/autocomplete/autocomplete_events.js @@ -203,4 +203,20 @@ test("cancel select", function() { }, 50); }); +test("blur without selection", function() { + expect(1); + var ac = $("#autocomplete").autocomplete({ + delay: 0, + source: data + }); + stop(); + ac.val("j").keydown(); + setTimeout(function() { + $( ".ui-menu-item" ).first().simulate("mouseover"); + ac.simulate("keydown", { keyCode: $.ui.keyCode.TAB }); + same( ac.val(), "j" ); + start(); + }, 50); +}); + })(jQuery); diff --git a/tests/unit/tabs/spinner.gif b/tests/unit/tabs/spinner.gif Binary files differdeleted file mode 100644 index 822747576..000000000 --- a/tests/unit/tabs/spinner.gif +++ /dev/null diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 565a0b427..34ec28bc4 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -24,7 +24,6 @@ <script src="tabs_events.js"></script> <script src="tabs_methods.js"></script> <script src="tabs_options.js"></script> - <script src="tabs_tickets.js"></script> <script> function tabs_state( tabs ) { diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index c9b16e3a8..98cb617ec 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -63,4 +63,32 @@ test( "accessibility", function() { // TODO: add tests }); +test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() { + expect( 1 ); + + var element = $( "#tabs2" ).tabs({ + active: 2, + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok( /test.html$/.test( ui.ajaxSettings.url ), "should ignore fragment identifier" ); + } + }); +}); + +test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", function() { + expect( 2 ); + + var element = $( "<div><ul><li><a href='#tab'>Tab</a></li></ul><div id='tab'></div></div>" ); + element.appendTo( "#main" ); + element.tabs({ + beforeLoad: function( event, ui ) { + event.preventDefault(); + ok( false, 'should not be an ajax tab'); + } + }); + + equals( element.find( ".ui-tabs-nav a" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); + tabs_state( element, 1 ); +}); + }( jQuery ) ); diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html index e71fea3d4..89d08f4d0 100644 --- a/tests/unit/tabs/tabs_deprecated.html +++ b/tests/unit/tabs/tabs_deprecated.html @@ -22,7 +22,6 @@ <script src="tabs_events.js"></script> <script src="tabs_methods.js"></script> <script src="tabs_options.js"></script> - <script src="tabs_tickets.js"></script> <script src="tabs_deprecated.js"></script> <script> diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 90c43037c..49999670f 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -1,6 +1,6 @@ (function( $ ) { -module("tabs (deprecated): core"); +module( "tabs (deprecated): core" ); test( "panel ids", function() { expect( 2 ); @@ -20,91 +20,149 @@ test( "panel ids", function() { element.tabs( "option", "active", 2 ); }); -module("tabs (deprecated): options"); +module( "tabs (deprecated): options" ); -test('ajaxOptions', function() { - ok(false, "missing test - untested code is broken code."); -}); +asyncTest( "ajaxOptions", function() { + expect( 1 ); -test('cache', function() { - ok(false, "missing test - untested code is broken code."); + var element = $( "#tabs2" ).tabs({ + ajaxOptions: { + converters: { + "text html": function() { + return "test"; + } + } + } + }); + element.one( "tabsload", function( event, ui ) { + equals( ui.panel.html(), "test" ); + start(); + }); + element.tabs( "option", "active", 2 ); }); -test('idPrefix', function() { - ok(false, "missing test - untested code is broken code."); -}); +asyncTest( "cache", function() { + expect( 5 ); -test('tabTemplate', function() { - ok(false, "missing test - untested code is broken code."); + var element = $( "#tabs2" ).tabs({ + cache: true + }); + element.one( "tabsshow", function( event, ui ) { + tabs_state( element, 0, 0, 1, 0, 0 ); + }); + element.one( "tabsload", function( event, ui ) { + ok( true, "tabsload" ); + + setTimeout(function() { + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0, 0, 0 ); + + element.one( "tabsshow", function( event, ui ) { + tabs_state( element, 0, 0, 1, 0, 0 ); + }); + element.one( "tabsload", function( event, ui ) { + ok( false, "should be cached" ); + }); + element.tabs( "option", "active", 2 ); + start(); + }, 1 ); + }); + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0, 0 ); }); -test('panelTemplate', function() { - ok(false, "missing test - untested code is broken code."); +test( "idPrefix", function() { + expect( 1 ); + + $( "#tabs2" ) + .one( "tabsbeforeload", function( event, ui ) { + ok( /^testing-\d+$/.test( ui.panel.attr( "id" ) ), "generated id" ); + event.preventDefault(); + }) + .tabs({ + idPrefix: "testing-", + active: 2 + }); }); -test('cookie', function() { - expect(6); +test( "tabTemplate + panelTemplate", function() { + // defaults are tested in the add method test + expect( 11 ); + + var element = $( "#tabs2" ).tabs({ + tabTemplate: "<li class='customTab'><a href='http://example.com/#{href}'>#{label}</a></li>", + panelTemplate: "<div class='customPanel'></div>" + }); + element.one( "tabsadd", function( event, ui ) { + var anchor = $( ui.tab ); + equal( ui.index, 5, "ui.index" ); + equal( anchor.text(), "New", "ui.tab" ); + equal( anchor.attr( "href" ), "http://example.com/#new", "tab href" ); + ok( anchor.parent().hasClass( "customTab" ), "tab custom class" ); + equal( ui.panel.id, "new", "ui.panel" ); + ok( $( ui.panel ).hasClass( "customPanel" ), "panel custom class" ); + }); + element.tabs( "add", "#new", "New" ); + var tab = element.find( ".ui-tabs-nav li" ).last(), + anchor = tab.find( "a" ); + equals( tab.text(), "New", "label" ); + ok( tab.hasClass( "customTab" ), "tab custom class" ); + equals( anchor.attr( "href" ), "http://example.com/#new", "href" ); + equals( anchor.attr( "aria-controls" ), "new", "aria-controls" ); + ok( element.find( "#new" ).hasClass( "customPanel" ), "panel custom class" ); +}); - el = $('#tabs1'); - var cookieName = 'tabs_test', cookieObj = { name: cookieName }; - $.cookie(cookieName, null); // blank state - var cookie = function() { - return parseInt($.cookie(cookieName), 10); - }; +test( "cookie", function() { + expect( 6 ); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 0, 'initial cookie value'); + var element = $( "#tabs1" ), + cookieName = "tabs_test", + cookieObj = { name: cookieName }; + $.cookie( cookieName, null ); + function cookie() { + return parseInt( $.cookie( cookieName ), 10 ); + } - el.tabs('destroy'); - el.tabs({ active: 1, cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from active property'); + element.tabs({ cookie: cookieObj }); + equals( cookie(), 0, "initial cookie value" ); - el.tabs('option', 'active', 2); - equals(cookie(), 2, 'cookie value updated after activating'); + element.tabs( "destroy" ); + element.tabs({ active: 1, cookie: cookieObj }); + equals( cookie(), 1, "initial cookie value, from active property" ); - el.tabs('destroy'); - $.cookie(cookieName, 1); - el.tabs({ cookie: cookieObj }); - equals(cookie(), 1, 'initial cookie value, from existing cookie'); + element.tabs( "option", "active", 2 ); + equals( cookie(), 2, "cookie value updated after activating" ); - el.tabs('destroy'); - el.tabs({ cookie: cookieObj, collapsible: true }); - el.tabs('option', 'active', false); - equals(cookie(), -1, 'cookie value for all tabs unselected'); + element.tabs( "destroy" ); + $.cookie( cookieName, 1 ); + element.tabs({ cookie: cookieObj }); + equals( cookie(), 1, "initial cookie value, from existing cookie" ); - el.tabs('destroy'); - ok($.cookie(cookieName) === null, 'erase cookie after destroy'); + element.tabs( "destroy" ); + element.tabs({ cookie: cookieObj, collapsible: true }); + element.tabs( "option", "active", false ); + equals( cookie(), -1, "cookie value for all tabs unselected" ); + element.tabs( "destroy" ); + ok( $.cookie( cookieName ) === null, "erase cookie after destroy" ); }); +asyncTest( "spinner", function() { + expect( 2 ); -test('spinner', function() { - expect(4); - stop(); - - el = $('#tabs2'); - - el.tabs({ - selected: 2, - load: function() { - // spinner: default spinner - setTimeout(function() { - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - el.tabs('destroy'); - el.tabs({ - selected: 2, - spinner: '<img src="spinner.gif" alt="">', - load: function() { - // spinner: image - equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed"); - equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed"); - start(); - } - }); - }, 1); - } + var element = $( "#tabs2" ).tabs(); + + element.one( "tabsbeforeload", function( event, ui ) { + equals( element.find( ".ui-tabs-nav li:eq(2) em" ).length, 1, "beforeload" ); + }); + element.one( "tabsload", function( event, ui ) { + // wait until after the load finishes before checking for the spinner to be removed + setTimeout(function() { + equals( element.find( ".ui-tabs-nav li:eq(2) em" ).length, 0, "load" ); + start(); + }, 1 ); }); + element.tabs( "option", "active", 2 ); }); test( "selected", function() { @@ -405,4 +463,18 @@ test( "url", function() { element.tabs( "option", "active", 3 ); }); +asyncTest( "abort", function() { + expect( 1 ); + + var element = $( "#tabs2" ).tabs(); + element.one( "tabsbeforeload", function( event, ui ) { + ui.jqXHR.error(function( jqXHR, status ) { + equals( status, "abort", "aborted" ); + start(); + }); + }); + element.tabs( "option", "active", 2 ); + element.tabs( "abort" ); +}); + }( jQuery ) ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index 28925a2b9..2fabaafca 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -138,15 +138,32 @@ test( "activate", function() { }); test( "beforeLoad", function() { - expect( 21 ); + expect( 32 ); var tab, panelId, panel, - element = $( "#tabs2" ).tabs(); + element = $( "#tabs2" ); + + // init + element.one( "tabsbeforeload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); - // TODO: init -// element.one( "tabsbeforeload", function( event, ui ) { -// }); -// element.tabs({ active: 2 }); + ok( !( "originalEvent" in event ), "originalEvent" ); + ok( "abort" in ui.jqXHR, "jqXHR" ); + ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.html(), "", "panel html" ); + event.preventDefault(); + tabs_state( element, 0, 0, 1, 0, 0 ); + }); + element.tabs({ active: 2 }); + tabs_state( element, 0, 0, 1, 0, 0 ); + equals( panel.html(), "", "panel html after" ); + element.tabs( "destroy" ); // .option() element.one( "tabsbeforeload", function( event, ui ) { @@ -165,6 +182,7 @@ test( "beforeLoad", function() { event.preventDefault(); tabs_state( element, 1, 0, 0, 0, 0 ); }); + element.tabs(); element.tabs( "option", "active", 2 ); tabs_state( element, 0, 0, 1, 0, 0 ); equals( panel.html(), "", "panel html after" ); @@ -191,8 +209,66 @@ test( "beforeLoad", function() { equals( panel.html(), "<p>testing</p>", "panel html after" ); }); -test( "load", function() { - ok( false, "missing test - untested code is broken code." ); +asyncTest( "load", function() { + expect( 21 ); + + var tab, panelId, panel, + element = $( "#tabs2" ); + + // init + element.one( "tabsload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 2 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.find( "p" ).length, 1, "panel html" ); + tabs_state( element, 0, 0, 1, 0, 0 ); + tabsload1(); + }); + element.tabs({ active: 2 }); + + function tabsload1() { + // .option() + element.one( "tabsload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 3 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + ok( !( "originalEvent" in event ), "originalEvent" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.find( "p" ).length, 1, "panel html" ); + tabs_state( element, 0, 0, 0, 1, 0 ); + tabsload2(); + }); + element.tabs( "option", "active", 3 ); + } + + function tabsload2() { + // click, change panel content + element.one( "tabsload", function( event, ui ) { + tab = element.find( ".ui-tabs-nav a" ).eq( 4 ); + panelId = tab.attr( "aria-controls" ); + panel = $( "#" + panelId ); + + equals( event.originalEvent.type, "click", "originalEvent" ); + equals( ui.tab.size(), 1, "tab size" ); + strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" ); + equals( ui.panel.size(), 1, "panel size" ); + strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); + equals( ui.panel.find( "p" ).length, 1, "panel html" ); + tabs_state( element, 0, 0, 0, 0, 1 ); + start(); + }); + element.find( ".ui-tabs-nav a" ).eq( 4 ).click(); + } }); }( jQuery ) ); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index a6e60a4b3..221b0d39d 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -2,19 +2,10 @@ module( "tabs: methods" ); -test('destroy', function() { - expect(6); - - el = $('#tabs1').tabs({ collapsible: true }); - $('li:eq(2)', el).simulate('mouseover').find('a').focus(); - el.tabs('destroy'); - - ok( el.is(':not(.ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-tabs-collapsible)'), 'remove classes from container'); - ok( $('ul', el).is(':not(.ui-tabs-nav, .ui-helper-reset, .ui-helper-clearfix, .ui-widget-header, .ui-corner-all)'), 'remove classes from list' ); - ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom)'), 'remove classes to panel' ); - ok( $('li:eq(0)', el).is(':not(.ui-tabs-active, .ui-state-active, .ui-corner-top)'), 'remove classes from active li'); - ok( $('li:eq(1)', el).is(':not(.ui-state-default, .ui-corner-top)'), 'remove classes from inactive li'); - ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li'); +test( "destroy", function() { + domEqual( "#tabs1", function() { + $( "#tabs1" ).tabs().tabs( "destroy" ); + }); }); test( "enable", function() { diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 691186276..8d61c47ef 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -133,28 +133,81 @@ test( "{ collapsible: true }", function() { tabs_state( element, 0, 0, 0 ); }); -test('disabled', function() { - expect(4); +test( "disabled", function() { + expect( 10 ); - el = $('#tabs1').tabs(); - same(el.tabs('option', 'disabled'), false, "should not disable any tab by default"); + // fully enabled by default + var element = $( "#tabs1" ).tabs(); + tabs_disabled( element, false ); + + // disable single tab + element.tabs( "option", "disabled", [ 1 ] ); + tabs_disabled( element, [ 1 ] ); - el.tabs('option', 'disabled', [ 1 ]); - same(el.tabs('option', 'disabled'), [ 1 ], "should set property"); // everything else is being tested in methods module... + // disabled active tab + element.tabs( "option", "disabled", [ 0, 1 ] ); + tabs_disabled( element, [ 0, 1 ] ); - el.tabs('option', 'disabled', [ 0, 1 ]); - same(el.tabs('option', 'disabled'), [ 0, 1 ], "should disable given tabs, even selected one"); // ... + // disable all tabs + element.tabs( "option", "disabled", [ 0, 1, 2 ] ); + tabs_disabled( element, true ); - el.tabs('option', 'disabled', [ ]); - same(el.tabs('option', 'disabled'), false, "should not disable any tab"); // ... + // enable all tabs + element.tabs( "option", "disabled", [] ); + tabs_disabled( element, false ); }); -test('event', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ event: null }", function() { + expect( 5 ); + + var element = $( "#tabs1" ).tabs({ + event: null + }); + tabs_state( element, 1, 0, 0 ); + + element.tabs( "option", "active", 1 ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + // ensure default click handler isn't bound + element.find( ".ui-tabs-nav a" ).eq( 2 ).click(); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); }); -test('fx', function() { - ok(false, "missing test - untested code is broken code."); +test( "{ event: custom }", function() { + expect( 11 ); + + var element = $( "#tabs1" ).tabs({ + event: "custom1 custom2" + }); + tabs_state( element, 1, 0, 0 ); + + element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + // ensure default click handler isn't bound + element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "click" ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.find( ".ui-tabs-nav a" ).eq( 2 ).trigger( "custom2" ); + equal( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); + + element.tabs( "option", "event", "custom3" ); + + // ensure old event handlers are unbound + element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom1" ); + equal( element.tabs( "option", "active" ), 2 ); + tabs_state( element, 0, 0, 1 ); + + element.find( ".ui-tabs-nav a" ).eq( 1 ).trigger( "custom3" ); + equal( element.tabs( "option", "active" ), 1 ); + tabs_state( element, 0, 1, 0 ); }); -})(jQuery); +// TODO: add animation tests + +}( jQuery ) ); diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js deleted file mode 100644 index d7a59cb5b..000000000 --- a/tests/unit/tabs/tabs_tickets.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - * tabs_tickets.js - */ -(function($) { - -module("tabs: tickets"); - -test('#3627 - Ajax tab with url containing a fragment identifier fails to load', function() { - // http://dev.jqueryui.com/ticket/3627 - expect(1); - - el = $('#tabs2').tabs({ - active: 2, - beforeLoad: function( event, ui ) { - event.preventDefault(); - ok(/test.html$/.test( ui.ajaxSettings.url ), 'should ignore fragment identifier'); - } - }); -}); - -test('#4033 - IE expands hash to full url and misinterprets tab as ajax', function() { - // http://dev.jqueryui.com/ticket/4033 - expect(1); - - el = $('<div><ul><li><a href="#tab">Tab</a></li></ul><div id="tab"></div></div>'); - el.appendTo('#main'); - el.tabs({ - beforeLoad: function( event, ui ) { - event.preventDefault(); - ok( false, 'should not be an ajax tab'); - } - }); - - equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct'); -}); - -})(jQuery); diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js index 3ac8968b3..9cf7487c9 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects.all.js @@ -14,12 +14,14 @@ $(function() { $(el).bind("click", function() { - $(this).addClass("current").hide(n, o, duration, function() { - var self = this; - window.setTimeout(function() { - $(self).show(n, o, duration, function() { $(this).removeClass("current"); }); - }, wait); - }); + $(this).addClass("current") + // delaying the initial animation makes sure that the queue stays in tact + .delay( 10 ) + .hide( n, o, duration ) + .delay( wait ) + .show( n, o, duration, function() { + $( this ).removeClass("current"); + }); }); }; diff --git a/tests/visual/menu/contextmenu.html b/tests/visual/menu/contextmenu.html deleted file mode 100644 index 63d9877a0..000000000 --- a/tests/visual/menu/contextmenu.html +++ /dev/null @@ -1,191 +0,0 @@ -<!doctype html> -<html> -<head> - <title>Menu Visual Test: Default</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.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.menu.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> - $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - // TODO close other menus when opening a new one - $("button").each(function() { - $(this).next().menu({ - /* top-alignment - position: function(item) { - return { - my: "left top", - at: "right top", - of: item.parent() - } - }, - */ - select: function(event, ui) { - $(this).hide().prev().focus(); - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - } - }).hide(); - - // equal height - //menu.find("ul").height(menu.height()); - }).click(function(event) { - // required to prevent the click handler below from handling this event - event.stopPropagation(); - var menu = $("#menu" + this.id).menu("blur").show().position({ - my: "left top", - at: "right top", - of: event.pageX > 0 ? event : this - }).focus(); - $(document).one("click", function() { - menu.menu("closeAll").menu("widget").hide(); - }) - }).next().keydown(function(event) { - var menu = $(this).data("menu"); - if (menu.widget().is(":hidden")) - return; - event.stopPropagation(); - switch (event.keyCode) { - case $.ui.keyCode.TAB: - menu.closeAll(); - menu.widget().hide(); - $(this).prev().focus() - break; - case $.ui.keyCode.ESCAPE: - menu.closeAll(); - menu.widget().hide(); - $(this).prev().focus() - break; - default: - - } - }); - }); - </script> - <style> - body { font-size:62.5%; } - .ui-menu { width: 200px; position: absolute; } - #menu3 { height: 200px; overflow: auto; } - </style> -</head> -<body> - -<button id="1">Show context menu 1</button> -<ul id="menu1"> - <li><a href="#">Amsterdam</a></li> - <li><a href="#">Anaheim</a></li> - <li><a href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li><a href="#">Magdeburg</a></li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> -</ul> - -<button id="2">Show context menu 2</button> -<ul id="menu2"> - <li> - <a id="a1" href="#">Amsterdam</a> - <ul> - <li><a id="b1" href="#">Aberdeen</a></li> - <li><a id="b2" href="#">Ada</a></li> - <li> - <a href="#">Adamsville</a> - <ul> - <li><a href="#">Anaheim</a></li> - <li> - <a href="#">Cologne</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Frankfurt</a></li> - </ul> - </li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Amesville</a></li> - </ul> - </li> - <li><a id="a2" href="#">Anaheim</a></li> - <li><a id="a3" href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li> - <a href="#">Magdeburg</a> - <ul> - <li><a href="#">Mberdeen</a></li> - <li><a href="#">Mda</a></li> - <li><a href="#">Mdamsville</a></li> - <li><a href="#">Mddyston</a></li> - <li><a href="#">Mmesville</a></li> - </ul> - </li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> -</ul> - - -<div class="ui-widget" style="margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -<button id="3">Show context menu 3</button> -<ul id="menu3"> - <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> - <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> - -</body> -</html> diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html deleted file mode 100644 index 2a712b00a..000000000 --- a/tests/visual/menu/popup.html +++ /dev/null @@ -1,176 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>Visual Test for Popup Utility</title> - <link rel="stylesheet" href="../visual.css" type="text/css" /> - <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> - <script type="text/javascript" src="../../../jquery-1.5.1.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.button.js"></script> - <script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="popup.js"></script> - <!-- - <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> - --> - <script type="text/javascript"> - $(function() { - $.fn.themeswitcher && $('<div/>').css({ - position: "absolute", - right: 10, - top: 10 - }).appendTo(document.body).themeswitcher(); - - var selected = { - select: function( event, ui ) { - $( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); - $(this).popup("close"); - } - }; - - $("#members-popup").popup(); - - $("#button1").button(); - $("#menu1").menu(selected).popup(); - - $( "#rerun" ) - .button() - .click(function() { - alert( "Running the last action" ); - }) - .next() - .button({ - text: false, - icons: { - primary: "ui-icon-triangle-1-s" - } - }) - .parent() - .buttonset() - .next() - .menu(selected) - .popup({ - trigger: $("#select") - }); - - $("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)"); - $("table .menubar > ul").menu(selected).popup().prev().button(); - }); - </script> - <style type="text/css"> - body { font-size:62.5%; } - - .ui-popup { position: absolute; z-index: 5000; } - .ui-menu { width: 200px; } - - table { - border-collapse: collapse; - } - th, td { - padding: 0.5em; - border: 1px solid black; - } - - #members-popup { - width: 200px; height: 150px; border: 1px solid gray; border-radius: 5px; - box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5); - background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); - font-size: 120%; text-align: center; line-height: 150px; outline: none; - } - </style> -</head> -<body> - -<div> - <a href="#members-popup">Project members</a> - <div id="members-popup" tabIndex="0"> - some form controls in here - </div> -</div> - -<button id="button1">Show context menu 1</button> -<ul id="menu1"> - <li><a href="#">Amsterdam</a></li> - <li><a href="#">Anaheim</a></li> - <li><a href="#">Cologne</a></li> - <li><a href="#">Frankfurt</a></li> - <li><a href="#">Magdeburg</a></li> - <li><a href="#">Munich</a></li> - <li><a href="#">Utrecht</a></li> - <li><a href="#">Zurich</a></li> -</ul> - - -<div> - <div> - <button id="rerun">Run last action</button> - <button id="select">Select an action</button> - </div> - <ul> - <li><a href="#">Open...</a></li> - <li><a href="#">Save</a></li> - <li><a href="#">Delete</a></li> - </ul> -</div> - -<table id="movies" class="ui-widget"> - <thead> - <tr> - <th data-field="Name" class="ui-widget-header">Name</th> - <th data-field="ReleaseYear" class="ui-widget-header">Release Year</th> - <th data-field="AverageRating" class="ui-widget-header">Average Rating</th> - <th class="ui-widget-header"></th> - </tr> - </thead> - <tbody> - <tr> - <td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td> - <td class="ui-widget-content">1993</td> - <td class="ui-widget-content">3.6</td> - <td class="ui-widget-content"> - <div class="menubar"> - <a href="#">Options</a> - <ul> - <li><a href="#">Order...</a></li> - <li class="ui-state-disabled">Write a Review...</li> - <li><a href="#">Find Similar Movies...</a></li> - <li> - <a href="#">Rate</a> - <ul> - <li><a href="#">5 stars</a></li> - <li><a href="#">4 stars</a></li> - <li><a href="#">3 stars</a></li> - <li><a href="#">2 stars</a></li> - <li><a href="#">1 stars</a></li> - </ul> - </li> - </ul> - </div> - </td> - </tr> - <tr> - <td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td> - <td class="ui-widget-content">1991</td> - <td class="ui-widget-content">3.1</td> - </tr> - <tr> - <td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td> - <td class="ui-widget-content">1991</td> - <td class="ui-widget-content">3.9</td> - </tr> - <tr> - <td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td> - <td class="ui-widget-content">1997</td> - <td class="ui-widget-content">2.6</td> - </tr> - </tbody> -</table> - -<div class="ui-widget" style="margin-top:2em; font-family:Arial"> - Log: - <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div> -</div> - -</body> -</html> diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index 8da0feb76..bb386a4f4 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -12,89 +12,107 @@ */ (function( $, undefined ) { -var rshowhide = /show|hide/; - $.effects.effect.bounce = function(o) { - return this.queue(function() { - - // Create element + return this.queue( function( next ) { var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right' ], + props = [ "position", "top", "bottom", "left", "right" ], + // defaults: - mode = $.effects.setMode( el, o.mode || 'effect' ), - direction = o.direction || 'up', - distance = o.distance || 20, - times = o.times || 5, - speed = (o.duration || 250), + mode = $.effects.setMode( el, o.mode || "effect" ), + hide = mode === "hide", + show = mode === "show", + direction = o.direction || "up", + distance = o.distance, + times = o.times || 5, + + // number of internal animations + anims = times * 2 + ( show || hide ? 1 : 0 ), + speed = o.duration / anims, + easing = o.easing, + // utility: - ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left', - motion = ( direction == 'up' || direction == 'left' ), // true is positive - i, animation, animation1, animation2; - + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ), + i, + upAnim, + downAnim, + + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + // Avoid touching opacity to prevent clearType and PNG issues in IE - if ( rshowhide.test( mode ) ) { - props.push( 'opacity' ); + if ( show || hide ) { + props.push( "opacity" ); } $.effects.save( el, props ); el.show(); $.effects.createWrapper( el ); // Create Wrapper + // default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { - distance = el[ ref == 'top' ? 'outerHeight' : 'outerWidth' ]({ margin:true }) / 3; + distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; } - if ( mode == 'show' ) el.css( 'opacity', 0 ).css( ref, motion ? -distance : distance ); // Shift - if ( mode == 'hide' ) distance = distance / (times * 2); - if ( mode != 'hide' ) times--; - - // Animate - if ( mode == 'show' ) { - animation = { - opacity: 1 - }; - animation[ ref ] = ( motion ? '+=' : '-=' ) + distance; - el.animate( animation, speed / 2, o.easing); - distance = distance / 2; - times--; - }; - - // Bounces - for (i = 0; i < times; i++) { - animation1 = {}; - animation2 = {}; - animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance; - animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance; - el.animate( animation1, speed / 2, o.easing ).animate( animation2, speed / 2, o.easing ); - distance = ( mode == 'hide' ) ? distance * 2 : distance / 2; + + if ( show ) { + downAnim = { opacity: 1 }; + downAnim[ ref ] = 0; + + // if we are showing, force opacity 0 and set the initial position + // then do the "first" animation + el.css( "opacity", 0 ) + .css( ref, motion ? -distance*2 : distance*2 ) + .animate( downAnim, speed, easing ); + } + + // start at the smallest distance if we are hiding + if ( hide ) { + distance = distance / Math.pow( 2, times - 1 ); } - // Last Bounce - if ( mode == 'hide' ) { - animation = { - opacity: 0 - }; - animation[ ref ] = ( motion ? '-=' : '+=' ) + distance; - el.animate( animation, speed / 2, o.easing, function(){ + downAnim = {}; + downAnim[ ref ] = 0; + // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here + for ( i = 0; i < times; i++ ) { + upAnim = {}; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; + + // add the finish callback to the last animation if we aren't hiding + el.animate( upAnim, speed, easing ) + .animate( downAnim, speed, easing, + ( ( i === times - 1 ) && !hide ) ? finish : undefined ); + + distance = hide ? distance * 2 : distance / 2; + } + + // Last Bounce when Hiding + if ( hide ) { + upAnim = { opacity: 0 }; + upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; + + el.animate( upAnim, speed, easing, function(){ el.hide(); - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); + finish(); }); - } else { - animation1 = {}; - animation2 = {}; - animation1[ ref ] = ( motion ? '-=' : '+=' ) + distance; - animation2[ ref ] = ( motion ? '+=' : '-=' ) + distance; - el - .animate( animation1, speed / 2, o.easing ) - .animate( animation2, speed / 2, o.easing, function() { - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); - }); } - el.dequeue(); + + function finish() { + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( o.complete ) { + o.complete.apply( el[ 0 ] ); + } + } + + // inject all the animations we just queued to be first in line (after "inprogress") + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, anims ) ) ); + } + next(); + }); }; diff --git a/ui/jquery.effects.pulsate.js b/ui/jquery.effects.pulsate.js index b168b6ef5..3325c251f 100644 --- a/ui/jquery.effects.pulsate.js +++ b/ui/jquery.effects.pulsate.js @@ -13,39 +13,50 @@ (function( $, undefined ) { $.effects.effect.pulsate = function( o ) { - return this.queue( function() { + return this.queue( function( next ) { var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || 'show' ), - times = ( ( o.times || 5 ) * 2 ) - 1, - duration = o.duration / 2, - isVisible = elem.is( ':visible' ), + mode = $.effects.setMode( elem, o.mode || "effect" ), + show = mode === "show" || elem.is( ":hidden" ), + showhide = ( show || mode === "hide" ), + + // showing or hiding adds an extra "half" animation + anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), + duration = o.duration / anims, animateTo = 0, + queue = elem.queue(), + queuelen = queue.length, i; - if ( !isVisible ) { - elem.css('opacity', 0).show(); + if ( show ) { + elem.css( "opacity", 0 ).show(); animateTo = 1; } - if ( ( mode == 'hide' && isVisible ) || ( mode == 'show' && !isVisible ) ) { - times--; - } - - for ( i = 0; i < times; i++ ) { - elem.animate({ - opacity: animateTo + // anims - 1 opacity "toggles" + for ( i = 1; i < anims; i++ ) { + elem.animate({ + opacity: animateTo }, duration, o.easing ); - animateTo = ( animateTo + 1 ) % 2; + animateTo = 1 - animateTo; } - elem.animate({ - opacity: animateTo + elem.animate({ + opacity: animateTo }, duration, o.easing, function() { - if (animateTo == 0) { + if ( animateTo === 0 ) { elem.hide(); } - (o.complete && o.complete.apply(this, arguments)); - }).dequeue(); + if ( o.complete ) { + o.complete.apply( this ); + } + }); + + // We just queued up "anims" animations, we need to put them next in the queue + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, anims ) ) ); + } + next(); }); }; diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index 526eb3869..e388a63bd 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -338,6 +338,7 @@ $.widget( "ui.autocomplete", { this.menu.element.hide(); this.menu.blur(); this._trigger( "close", event ); + this.menu.isNewMenu = true; } }, diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 8423d1164..2138a9a58 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -281,7 +281,7 @@ $.widget("ui.dialog", { options = self.options, uiDialog = self.uiDialog; - self.overlay = options.modal ? new $.ui.dialog.overlay( self ) : null; + self.overlay = options.modal ? new $.ui.dialog.overlay( self ) : null; self._size(); self._position( options.position ); uiDialog.show( options.show ); diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 0841018af..3cc25062c 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -18,6 +18,7 @@ var idIncrement = 0; $.widget("ui.menu", { defaultElement: "<ul>", delay: 150, + isNewMenu: true, options: { position: { my: "left top", @@ -54,7 +55,8 @@ $.widget("ui.menu", { self.select( event ); }) .bind( "mouseover.menu", function( event ) { - if ( self.options.disabled ) { + if ( self.options.disabled || self.isNewMenu ) { + self.isNewMenu = false; return; } var target = $( event.target ).closest( ".ui-menu-item" ); diff --git a/tests/visual/menu/menubar.js b/ui/jquery.ui.menubar.js index b9abacb9b..2879d079c 100644 --- a/tests/visual/menu/menubar.js +++ b/ui/jquery.ui.menubar.js @@ -1,7 +1,17 @@ /* - * jQuery UI menubar - * - * TODO move to jquery.ui.menubar.js + * jQuery UI Menubar @VERSION + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Menubar + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + * jquery.ui.position.js + * jquery.ui.menu.js */ (function( $ ) { diff --git a/ui/jquery.ui.mouse.js b/ui/jquery.ui.mouse.js index bfe4a7578..0bd38db85 100644 --- a/ui/jquery.ui.mouse.js +++ b/ui/jquery.ui.mouse.js @@ -12,6 +12,11 @@ */ (function( $, undefined ) { +var mouseHandled = false; +$(document).mousedown(function(e) { + mouseHandled = false; +}); + $.widget("ui.mouse", { options: { cancel: ':input,option', @@ -44,9 +49,7 @@ $.widget("ui.mouse", { _mouseDown: function(event) { // don't let more than one widget handle mouseStart - // TODO: figure out why we have to use originalEvent - event.originalEvent = event.originalEvent || {}; - if (event.originalEvent.mouseHandled) { return; } + if(mouseHandled) {return}; // we may have missed mouseup (out of window) (this._mouseStarted && this._mouseUp(event)); @@ -92,7 +95,8 @@ $.widget("ui.mouse", { .bind('mouseup.'+this.widgetName, this._mouseUpDelegate); event.preventDefault(); - event.originalEvent.mouseHandled = true; + + mouseHandled = true; return true; }, diff --git a/tests/visual/menu/popup.js b/ui/jquery.ui.popup.js index 97f12c053..10361a35c 100644 --- a/tests/visual/menu/popup.js +++ b/ui/jquery.ui.popup.js @@ -1,5 +1,16 @@ /* - * jQuery UI popup utility + * jQuery UI Popup @VERSION + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Popup + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + * jquery.ui.position.js */ (function($) { @@ -39,12 +50,20 @@ $.widget( "ui.popup", { this._bind(this.options.trigger, { keydown: function( event ) { // prevent space-to-open to scroll the page, only hapens for anchor ui.button - if ($( event.currentTarget ).is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE) { + if ( this.options.trigger.is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE) { event.preventDefault() } - // TODO handle keydown to open popup? only when not handled by ui.button - //if (event.keyCode == $.ui.keyCode.SPACE) { - //} + // TODO handle SPACE to open popup? only when not handled by ui.button + if ( event.keyCode == $.ui.keyCode.SPACE && this.options.trigger.is("a:not(:ui-button)") ) { + this.options.trigger.trigger( "click", event ); + } + // translate keydown to click + // opens popup and let's tooltip hide itself + if ( event.keyCode == $.ui.keyCode.DOWN ) { + // prevent scrolling + event.preventDefault(); + this.options.trigger.trigger( "click", event ); + } }, click: function( event ) { event.preventDefault(); @@ -61,6 +80,7 @@ $.widget( "ui.popup", { }); this._bind(this.element, { + // TODO use focusout so that element itself doesn't need to be focussable blur: function( event ) { var that = this; // use a timer to allow click to clear it and letting that @@ -74,9 +94,11 @@ $.widget( "ui.popup", { this._bind({ // TODO only triggerd on element if it can receive focus // bind to document instead? + // either element itself or a child should be focusable keyup: function( event ) { if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) { this.close( event ); + // TODO move this to close()? would allow menu.select to call popup.close, and get focus back to trigger this.options.trigger.focus(); } } @@ -120,6 +142,7 @@ $.widget( "ui.popup", { .attr( "aria-hidden", false ) .attr( "aria-expanded", true ) .position( position ) + // TODO find a focussable child, otherwise put focus on element, add tabIndex=0 if not focussable .focus(); if (this.element.is(":ui-menu")) { diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 1e1706a9d..e0579ef84 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -176,10 +176,12 @@ $.widget("ui.resizable", $.ui.mouse, { $(this.element) .addClass("ui-resizable-autohide") .hover(function() { + if (o.disabled) return; $(this).removeClass("ui-resizable-autohide"); self._handles.show(); }, function(){ + if (o.disabled) return; if (!self.resizing) { $(this).addClass("ui-resizable-autohide"); self._handles.hide(); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 58c181670..cd9b04f0d 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -621,6 +621,7 @@ $.widget( "ui.tabs", { this.xhr .success(function( response ) { panel.html( response ); + self._trigger( "load", event, eventData ); }) .complete(function( jqXHR, status ) { if ( status === "abort" ) { @@ -631,13 +632,11 @@ $.widget( "ui.tabs", { // "tabs" queue must not contain more than two elements, // which are the callbacks for the latest clicked tab... self.element.queue( "tabs", self.element.queue( "tabs" ).splice( -2, 2 ) ); - - delete this.xhr; } self.lis.eq( index ).removeClass( "ui-tabs-loading" ); - self._trigger( "load", event, eventData ); + delete self.xhr; }); } @@ -705,7 +704,7 @@ if ( $.uiBackCompat !== false ) { } }); - ui.jqXHR.success( function() { + ui.jqXHR.success(function() { if ( self.options.cache ) { $.data( ui.tab[ 0 ], "cache.tabs", true ); } @@ -743,34 +742,28 @@ if ( $.uiBackCompat !== false ) { }( jQuery, jQuery.ui.tabs.prototype ) ); // spinner - (function( $, prototype ) { - $.extend( prototype.options, { + $.widget( "ui.tabs", $.ui.tabs, { + options: { spinner: "<em>Loading…</em>" - }); - - var _create = prototype._create; - prototype._create = function() { - _create.call( this ); - var self = this; - - this.element.bind( "tabsbeforeload", function( event, ui ) { - if ( self.options.spinner ) { - var span = $( "span", ui.tab ); - if ( span.length ) { - span.data( "label.tabs", span.html() ).html( self.options.spinner ); + }, + _create: function() { + this._super( "_create" ); + this._bind({ + tabsbeforeload: function( event, ui ) { + if ( !this.options.spinner ) { + return; } + + var span = ui.tab.find( "span" ), + html = span.html(); + span.html( this.options.spinner ); + ui.jqXHR.complete(function() { + span.html( html ); + }); } - ui.jqXHR.complete( function() { - if ( self.options.spinner ) { - var span = $( "span", ui.tab ); - if ( span.length ) { - span.html( span.data( "label.tabs" ) ).removeData( "label.tabs" ); - } - } - }); }); - }; - }( jQuery, jQuery.ui.tabs.prototype ) ); + } + }); // enable/disable events (function( $, prototype ) { @@ -1010,57 +1003,50 @@ if ( $.uiBackCompat !== false ) { }( jQuery, jQuery.ui.tabs.prototype ) ); // cookie option - (function( $, prototype ) { - $.extend( prototype.options, { + $.widget( "ui.tabs", $.ui.tabs, { + options: { cookie: null // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true } - }); - - var _create = prototype._create, - _refresh = prototype._refresh, - _eventHandler = prototype._eventHandler, - _destroy = prototype._destroy; - - prototype._create = function() { - var o = this.options; - if ( o.active === undefined ) { - if ( typeof o.active !== "number" && o.cookie ) { - o.active = parseInt( this._cookie(), 10 ); + }, + _create: function() { + var options = this.options, + active; + if ( options.active == null && options.cookie ) { + active = parseInt( this._cookie(), 10 ); + if ( active === -1 ) { + active = false; } + options.active = active; } - _create.call( this ); - }; - - prototype._cookie = function() { - var cookie = this.cookie || - ( this.cookie = this.options.cookie.name || "ui-tabs-" + getNextListId() ); - return $.cookie.apply( null, [ cookie ].concat( $.makeArray( arguments ) ) ); - }; - - prototype._refresh = function() { - _refresh.call( this ); - - // set or update cookie after init and add/remove respectively + this._super( "_create" ); + }, + _cookie: function( active ) { + var cookie = [ this.cookie || + ( this.cookie = this.options.cookie.name || "ui-tabs-" + getNextListId() ) ]; + if ( arguments.length ) { + cookie.push( active === false ? -1 : active ); + cookie.push( this.options.cookie ); + } + return $.cookie.apply( null, cookie ); + }, + _refresh: function() { + this._super( "_refresh" ); if ( this.options.cookie ) { this._cookie( this.options.active, this.options.cookie ); } - }; - - prototype._eventHandler = function( event ) { - _eventHandler.apply( this, arguments ); - + }, + _eventHandler: function( event ) { + this._superApply( "_eventHandler", arguments ); if ( this.options.cookie ) { this._cookie( this.options.active, this.options.cookie ); } - }; - - prototype._destroy = function() { - _destroy.call( this ); - + }, + _destroy: function() { + this._super( "_destroy" ); if ( this.options.cookie ) { this._cookie( null, this.options.cookie ); } - }; - }( jQuery, jQuery.ui.tabs.prototype ) ); + } + }); } })( jQuery ); |
