diff options
30 files changed, 251 insertions, 1437 deletions
diff --git a/demos/index.html b/demos/index.html index 69767febf..76ddcd3da 100644 --- a/demos/index.html +++ b/demos/index.html @@ -20,8 +20,6 @@ <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> @@ -111,7 +109,7 @@ <script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> <script> $(function() { - + $('.left-nav a').click(function(ev) { window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default'; loadPage(this.href); @@ -119,20 +117,20 @@ $(this).addClass('selected'); ev.preventDefault(); }); - + if (window.location.hash) { if (window.location.hash.indexOf('|') === -1) { - window.location.hash += '|default'; - } + window.location.hash += '|default'; + } var path = window.location.href.replace(/(index\.html)?#/,''); path = path.replace('\|','/') + '.html'; loadPage(path); - } + } - function loadPage(path) { + function loadPage(path) { var section = path.replace(/\/[^\/]+\.html/,''); var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' '); - + $('td.normal div.normal') .empty() .append('<h4 class="demo-subheader">Functional demo:</h4>') @@ -148,7 +146,7 @@ $(this).click(function() { resetDemos(); - + $(this).parents('ul').find('li').removeClass('demo-config-on'); $(this).parent().addClass('demo-config-on'); $('#demo-notes').fadeOut(); @@ -167,8 +165,8 @@ $('#demo-config-menu a').each(function(){ if (this.href.indexOf(demo + '.html') !== -1) { $(this).parents('ul').find('li').removeClass('demo-config-on'); - $(this).parent().addClass('demo-config-on'); - loadDemo(this.href); + $(this).parent().addClass('demo-config-on'); + loadDemo(this.href); } }); } @@ -184,10 +182,10 @@ .end() .end() ; - + resetDemos(); } - + function loadDemo(path) { var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1]; $.get(path, function(data) { @@ -207,7 +205,7 @@ $('#demo-link a').attr('href', path); updateDemoNotes(); updateDemoSource(source); - + if (/default.html$/.test(path)) { $.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) { $("#demo-source").after(html); @@ -241,7 +239,7 @@ $('#demo-notes').show(); notes.hide(); } - + function updateDemoSource(source) { if ($('#demo-source').length == 0) { $('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes'); @@ -257,12 +255,12 @@ $('#demo-source code').empty().text(cleanedSource); } - + function resetDemos() { $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional[''])); - $(".ui-dialog-content").remove(); + $(".ui-dialog-content").remove(); } - + }); </script> </head> @@ -285,8 +283,6 @@ <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> @@ -307,7 +303,7 @@ <dd><a href="widget/index.html">Widget</a></dd> <dt>About jQuery UI</dt> <dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd> - <dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd> + <dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd> <dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd> <dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd> <dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd> @@ -328,7 +324,7 @@ <p> These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. </p> - + </div> </td> diff --git a/demos/menu/contextmenu.html b/demos/menu/contextmenu.html deleted file mode 100644 index 33e07f7ec..000000000 --- a/demos/menu/contextmenu.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Menu - Contextmenu demo</title> - <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script src="../../jquery-1.7.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() { - var btn = $(".demo button").button({ - icons: { - primary: "ui-icon-home", - secondary: "ui-icon-triangle-1-s" - } - }); - $("#cities").menu({ - select: function(event, ui) { - $("#log").append("<div>Selected " + ui.item.text() + "</div>"); - }, - trigger : btn}); - }); - </script> - <style> - .ui-menu { width: 200px; position: absolute; } - </style> -</head> -<body> - -<div class="demo"> - - <button>Select a city</button> - <ul id="cities"> - <li><a href="#Amsterdam">Amsterdam</a></li> - <li><a href="#Anaheim">Anaheim</a></li> - <li><a href="#Cologne">Cologne</a></li> - <li><a href="#Frankfurt">Frankfurt</a></li> - <li><a href="#Magdeburg">Magdeburg</a></li> - <li><a href="#Munich">Munich</a></li> - <li><a href="#Utrecht">Utrecht</a></li> - <li><a href="#Zurich">Zurich</a></li> - </ul> - - <div id="log"></div> - -</div><!-- End demo --> - -<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>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> - -</div><!-- End demo-description --> - - - -</body> -</html> diff --git a/demos/menubar/default.html b/demos/menubar/default.html deleted file mode 100644 index 72c124423..000000000 --- a/demos/menubar/default.html +++ /dev/null @@ -1,153 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <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" /> - <script src="../../jquery-1.7.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() { - function select(event, ui) { - $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); - if (ui.item.text() == 'Quit') { - $(this).menubar('destroy'); - } - } - $("#bar1").menubar({ - position: { - within: $("#demo-frame").add(window).first() - }, - select: select - }); - - $(".menubar-icons").menubar({ - autoExpand: true, - menuIcon: true, - buttons: true, - position: { - within: $("#demo-frame").add(window).first() - }, - select: select - }); - }); - </script> - <style> - #bar1, #bar2 { margin: 0 0 4em; } - </style> -</head> -<body> - -<div class="demo"> -<ul id="bar1" class="menubar"> - <li> - <a href="#File">File</a> - <ul> - <li><a href="#Open...">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#Save">Save</a></li> - <li><a href="#Save as...">Save as...</a></li> - <li><a href="#Close">Close</a></li> - <li><a href="#Quit">Quit</a></li> - </ul> - </li> - <li> - <a href="#Edit">Edit</a> - <ul> - <li><a href="#Copy">Copy</a></li> - <li><a href="#Cut">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - </li> - <li> - <a href="#View">View</a> - <ul> - <li><a href="#Fullscreen">Fullscreen</a></li> - <li><a href="#Fit into view">Fit into view</a></li> - <li> - <a href="#Encoding">Encoding</a> - <ul> - <li><a href="#Auto-detect">Auto-detect</a></li> - <li><a href="#UTF-8">UTF-8</a></li> - <li> - <a href="#UTF-16">UTF-16</a> - <ul> - <li><a href="#Option 1">Option 1</a></li> - <li><a href="#Option 2">Option 2</a></li> - <li><a href="#Option 3">Option 3</a></li> - <li><a href="#Option 4">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#Customize...">Customize...</a></li> - </ul> - </li> -</ul> - -<ul id="bar2" class="menubar-icons"> - <li> - <a href="#File">File</a> - <ul> - <li><a href="#Open...">Open...</a></li> - <li class="ui-state-disabled">Open recent...</li> - <li><a href="#Save">Save</a></li> - <li><a href="#Save as...">Save as...</a></li> - <li><a href="#Close">Close</a></li> - <li><a href="#Quit">Quit</a></li> - </ul> - </li> - <li> - <a href="#Edit">Edit</a> - <ul> - <li><a href="#Copy">Copy</a></li> - <li><a href="#Cut">Cut</a></li> - <li class="ui-state-disabled">Paste</li> - </ul> - </li> - <li> - <a href="#View">View</a> - <ul> - <li><a href="#Fullscreen">Fullscreen</a></li> - <li><a href="#Fit into view">Fit into view</a></li> - <li> - <a href="#Encoding">Encoding</a> - <ul> - <li><a href="#Auto-detect">Auto-detect</a></li> - <li><a href="#UTF-8">UTF-8</a></li> - <li> - <a href="#UTF-16">UTF-16</a> - <ul> - <li><a href="#Option 1">Option 1</a></li> - <li><a href="#Option 2">Option 2</a></li> - <li><a href="#Option 3">Option 3</a></li> - <li><a href="#Option 4">Option 4</a></li> - </ul> - </li> - </ul> - </li> - <li><a href="#Customize...">Customize...</a></li> - </ul> - </li> -</ul> - -<div class="ui-widget" style="margin-top:2em; font-family:Arial"> - Log: - <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 deleted file mode 100644 index 3eebda2d0..000000000 --- a/demos/menubar/index.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/animation.html b/demos/popup/animation.html deleted file mode 100644 index 7df89d31b..000000000 --- a/demos/popup/animation.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>jQuery UI Popup - Animation 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.7.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.effects.core.js"></script> - <script src="../../ui/jquery.effects.blind.js"></script> - <script src="../../ui/jquery.effects.scale.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({ - show: { - effect: "blind", - direction: "up", - mode: "show", - duration: "fast" - }, - hide: { - effect: "scale", - percent: 0, - duration: "fast" - } - }) - .find(":submit").button().click(function(event) { - event.preventDefault(); - }); - }); - </script> - <style type="text/css"> - .ui-popup { position: absolute; z-index: 5000; } - - #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 class="ui-widget-content" id="login-form" aria-label="Login options"> - <div> - <label for="un">Username</label> - <input type="text" id="un" /> - </div> - <div> - <label for="pw">Password</label> - <input type="password" id="pw" /> - </div> - <div> - <input type="submit" value="Login" class="submit" /> - </div> - </div> -</div> - -<div class="demo-description"> - -<p>A link to a login form that opens as a popup. Open and close animations have been used.</p> - -</div><!-- End demo-description --> - - -</body> -</html> diff --git a/demos/popup/default.html b/demos/popup/default.html deleted file mode 100644 index f0ff9a57e..000000000 --- a/demos/popup/default.html +++ /dev/null @@ -1,69 +0,0 @@ -<!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.7.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.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; } - - #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 class="ui-widget-content" id="login-form" aria-label="Login options"> - <div> - <label for="un">Username</label> - <input type="text" id="un" /> - </div> - <div> - <label for="pw">Password</label> - <input type="password" id="pw" /> - </div> - <div> - <input type="submit" value="Login" class="submit" /> - </div> - </div> -</div> - -<div class="demo-description"> - -<p>A link to a login form that opens as a popup.</p> - -</div><!-- End demo-description --> - - -</body> -</html> diff --git a/demos/popup/index.html b/demos/popup/index.html deleted file mode 100644 index 63636241b..000000000 --- a/demos/popup/index.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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="tooltip.html">Popup on hover (tooltip)</a></li> - <li><a href="animation.html">Popup - show/hide effects</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 deleted file mode 100644 index c79c30503..000000000 --- a/demos/popup/popup-menu-table.html +++ /dev/null @@ -1,108 +0,0 @@ -<!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.7.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 deleted file mode 100644 index 89d17c0bc..000000000 --- a/demos/popup/popup-menu.html +++ /dev/null @@ -1,92 +0,0 @@ -<!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.7.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 = function( event, ui ) { - log( "Selected: " + ui.item.text() ); - $(this).popup( "close" ); - } - - $("#button1").button().next().menu( {select: selected, trigger: $("#button1")} ); - - $( "#rerun" ) - .button() - .click(function() { - log( "Selected: " + $( this ).text() ); - }) - .next() - .button({ - text: false, - icons: { - primary: "ui-icon-triangle-1-s" - } - }) - .next() - .menu( {select: selected, 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/popup/tooltip.html b/demos/popup/tooltip.html deleted file mode 100644 index c955a3c6a..000000000 --- a/demos/popup/tooltip.html +++ /dev/null @@ -1,61 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <title>jQuery UI Popup - Tooltip style 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.7.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.popup.js"></script> - <script> - $(function() { - $("#more-info").popup({ - position: { - of: "#info-link" - } - }); - - $( "#info-link" ).mouseover( function( event ) { - $("#more-info").popup( "open" ); - }); - }); - </script> - <style type="text/css"> - .ui-icon { - display: inline-block; - } - #more-info { - width: 11em; - 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; - position: absolute; - z-index: 5000; - display: none; - } - </style> -</head> -<body> - -<div class="demo"> - <div> - <textarea>More info about me to the right -></textarea> <span id="info-link" class="ui-icon ui-icon-info"></span> - <div id="more-info">This is some more info and there is even more info on <a href="#">this page</a>.</div> - </div> -</div> - -<div class="demo-description"> - -<p>A "more info" popup that works on mouseover (tooltip).</p> - -</div><!-- End demo-description --> - - -</body> -</html> diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 365934f72..8ac0338fd 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -11,7 +11,6 @@ <script src="../../ui/jquery.ui.tooltip.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 src="../../ui/jquery.effects.core.js"></script> <script src="../../ui/jquery.effects.blind.js"></script> <link rel="stylesheet" href="../demos.css"> @@ -69,14 +68,6 @@ $( this ).remove(); }); } - $( "ul" ).menu({ - select: function( event, ui ) { - // TODO should probably be handled by popup, see ESCAPE key handler - // affects key handling - $( this ).prev().focus(); - notify( ui.item ); - } - }).popup(); $( "button" ).each(function() { var button = $( this ).button({ @@ -85,15 +76,9 @@ }, text: !!$( this ).attr( "title" ) }); - if ( button.next().is( ":ui-popup" ) ) { - button.click(function( event ) { - $( ".demo" ).tooltip( "close", event ); - }); - } else { - button.click(function() { - notify( button ); - }); - } + button.click(function() { + notify( button ); + }); }); $( ".set" ).buttonset({ items: "button" @@ -127,17 +112,6 @@ <div class="set"> <button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button> <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button> - <ul> - <li> - <a href="#">Favorites</a> - </li> - <li> - <a href="#">Watch Later</a> - </li> - <li> - <a href="#">New Playlist...</a> - </li> - </ul> </div> <button title="Share this video">Share</button> <button data-icon="ui-icon-alert">Flag as inappropiate</button> diff --git a/tests/unit/dialog/dialog_tickets.js b/tests/unit/dialog/dialog_tickets.js index b203ca7d5..f8ab8b423 100644 --- a/tests/unit/dialog/dialog_tickets.js +++ b/tests/unit/dialog/dialog_tickets.js @@ -140,4 +140,13 @@ test("#6966: Escape key closes all dialogs, not the top one", function(){ d1.remove(); }); +test("#4980: Destroy should place element back in original DOM position", function(){ + container = $('<div id="container"><div id="modal">Content</div></div>'); + modal = container.find('#modal'); + modal.dialog(); + ok(!$.contains(container[0], modal[0]), 'dialog should move modal element to outside container element'); + modal.dialog('destroy'); + ok($.contains(container[0], modal[0]), 'dialog(destroy) should place element back in original DOM position'); +}); + })(jQuery); diff --git a/tests/unit/menu/menu_defaults.js b/tests/unit/menu/menu_defaults.js index a559a3d8d..3d7ec297f 100644 --- a/tests/unit/menu/menu_defaults.js +++ b/tests/unit/menu/menu_defaults.js @@ -5,7 +5,7 @@ commonWidgetTests( "menu", { my: "left top", at: "right top" }, - items: "ul", + menus: "ul", trigger: null, // callbacks diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 55ec1e2ff..9e68e0c67 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -27,7 +27,7 @@ test("handle click on custom item menu", function() { select: function(event, ui) { menu_log(); }, - items: "div" + menus: "div" }); menu_log("click",true); menu_click($('#menu5'),"1"); @@ -38,6 +38,8 @@ test("handle click on custom item menu", function() { equals( $("#log").html(), "1,3,2,afterclick,1,click,", "Click order not valid."); }); +/* Commenting out these tests until a way to handle the extra focus and blur events + fired by IE is found test( "handle blur: click", function() { expect( 4 ); var $menu = $( "#menu1" ).menu({ @@ -78,6 +80,7 @@ test( "handle blur on custom item menu: click", function() { $("#remove").remove(); }); +*/ asyncTest( "handle submenu auto collapse: mouseleave", function() { expect( 4 ); @@ -90,17 +93,21 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() { setTimeout(function() { equal( $menu.find( "ul[aria-expanded='true']" ).length, 2, "second submenu expanded" ); $menu.find( "ul[aria-expanded='true']:first" ).trigger( "mouseleave" ); - equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); - $menu.trigger( "mouseleave" ); - equal( $menu.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); - start(); - }, 400); - }, 200); + setTimeout(function() { + equal( $menu.find( "ul[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); + $menu.trigger( "mouseleave" ); + setTimeout(function() { + equal( $menu.find( "ul[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); + start(); + }, 1400); + }, 1050); + }, 700); + }, 350); }); asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function() { expect( 5 ); - var $menu = $( "#menu5" ).menu( { items: "div" } ); + var $menu = $( "#menu5" ).menu( { menus: "div" } ); $menu.children( ":nth-child(7)" ).trigger( "mouseover" ); setTimeout(function() { @@ -109,17 +116,19 @@ asyncTest( "handle custom menu item submenu auto collapse: mouseleave", function setTimeout(function() { equal( $menu.find( "div[aria-expanded='true']" ).length, 2, "second submenu expanded" ); $menu.find( "div[aria-expanded='true']:first" ).trigger( "mouseleave" ); - equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); - - $menu.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN }); - ok( $menu.find( ".ui-state-active" ).is( "#menu5 :nth-child(7) a" ), - "down keypress selected an item from the first submenu" ); - - $menu.trigger( "mouseleave" ); - equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); - start(); - }, 400); - }, 200); + setTimeout(function() { + equal( $menu.find( "div[aria-expanded='true']" ).length, 1, "second submenu collapsed" ); + $menu.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN }); + ok( $menu.find( ".ui-state-active" ).is( "#menu5 :nth-child(7) a" ), + "down keypress selected an item from the first submenu" ); + $menu.trigger( "mouseleave" ); + setTimeout(function() { + equal( $menu.find( "div[aria-expanded='true']" ).length, 0, "first submenu collapsed" ); + start(); + }, 1400); + }, 1050); + }, 700); + }, 350); }); diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js index e19fefeea..dea3f5d8a 100644 --- a/tests/unit/selectmenu/selectmenu_core.js +++ b/tests/unit/selectmenu/selectmenu_core.js @@ -10,17 +10,24 @@ test("accessibility", function () { var link = button.children("a"); var ul = menu.children("ul") var links = ul.find("li.ui-menu-item a"); - expect(6 + links.length); + expect(12 + links.length * 2); equals( button.attr("aria-disabled"), "false", "button aria-disabled" ); equals( link.attr("aria-disabled"), "false", "button link aria-disabled" ); equals( link.attr("aria-haspopup"), "true", "button link aria-haspopup" ); equals( link.attr("role"), "button", "button link role" ); equals( link.attr("aria-owns"), ul.attr("id"), "button link aria-owns" ); - equals( link.attr("tabindex"), 0, "button link tabindex" ); - + equals( link.attr("tabindex"), 0, "button link tabindex" ); + + equals( ul.attr("aria-hidden"), "true", "menu aria-hidden" ); + equals( ul.attr("aria-disabled"), "false", "menu aria-disabled" ); + equals( ul.attr("aria-labelledby"), link.attr("id"), "menu aria-labelledby" ); + equals( ul.attr("role"), "menubox", "menu role" ); + equals( ul.attr("tabindex"), 0, "menu tabindex" ); + equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "menu aria-activedescendant" ); $.each( links, function(index){ equals( $(this).attr("role"), "option", "menu link #" + index +" role" ); + equals( $(this).attr("tabindex"), -1, "menu link #" + index +" tabindex" ); }); }); diff --git a/tests/unit/spinner/spinner_options.js b/tests/unit/spinner/spinner_options.js index 81f434fc6..0be59bd07 100644 --- a/tests/unit/spinner/spinner_options.js +++ b/tests/unit/spinner/spinner_options.js @@ -144,24 +144,56 @@ test( "max", function() { equals( element.val(), 1000, "value not constrained on init" ); element.spinner( "value", 1000 ); - equals( element.val(), 100, "max constrained if value method is greater" ); + equals( element.val(), 100, "max constrained in value method" ); element.val( 1000 ).blur(); equals( element.val(), 1000, "max not constrained if manual entry" ); }); +test( "max, string", function() { + expect( 3 ); + var element = $( "#spin" ) + .val( 1000 ) + .spinner({ + max: "$100.00", + numberFormat: "C", + culture: "en" + }); + equals( element.val(), "$1,000.00", "value not constrained on init" ); + equals( element.spinner( "option", "max" ), 100, "option converted to number" ); + + element.spinner( "value", 1000 ); + equals( element.val(), "$100.00", "max constrained in value method" ); +}); + test( "min", function() { expect( 3 ); var element = $( "#spin" ).val( -1000 ).spinner({ min: -100 }); equals( element.val(), -1000, "value not constrained on init" ); element.spinner( "value", -1000 ); - equals( element.val(), -100, "min constrained if value method is greater" ); + equals( element.val(), -100, "min constrained in value method" ); element.val( -1000 ).blur(); equals( element.val(), -1000, "min not constrained if manual entry" ); }); +test( "min, string", function() { + expect( 3 ); + var element = $( "#spin" ) + .val( -1000 ) + .spinner({ + min: "-$100.00", + numberFormat: "C", + culture: "en" + }); + equals( element.val(), "($1,000.00)", "value not constrained on init" ); + equals( element.spinner( "option", "min" ), -100, "option converted to number" ); + + element.spinner( "value", -1000 ); + equals( element.val(), "($100.00)", "min constrained in value method") +}); + test( "step, 2", function() { expect( 3 ); var element = $( "#spin" ).val( 0 ).spinner({ step: 2 }); @@ -187,4 +219,18 @@ test( "step, 0.7", function() { equals( element.val(), "0.7", "stepUp" ); }); +test( "step, string", function() { + expect( 2 ); + var element = $("#spin").val( 0 ).spinner({ + step: "$0.70", + numberFormat: "C", + culture: "en" + }); + + equals( element.spinner( "option", "step" ), 0.7, "option converted to number" ); + + element.spinner( "stepUp" ); + equals( element.val(), "$0.70", "stepUp" ); +}); + })( jQuery ); diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 50837f43e..0715ac7f7 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -28,14 +28,14 @@ select: function(event, ui) { $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); }, - items: "div" + menus: "div" }); $("#menu6").menu({ select: function(event, ui) { $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); }, - items: ".menuElement" + menus: ".menuElement" }); } diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 6973ff0f0..accac0e12 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -15,7 +15,6 @@ @import url("jquery.ui.datepicker.css"); @import url("jquery.ui.dialog.css"); @import url("jquery.ui.menu.css"); -@import url("jquery.ui.menubar.css"); @import url("jquery.ui.progressbar.css"); @import url("jquery.ui.resizable.css"); @import url("jquery.ui.selectable.css"); diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css index c616cf2c5..33a9498fb 100644 --- a/themes/base/jquery.ui.menu.css +++ b/themes/base/jquery.ui.menu.css @@ -14,7 +14,7 @@ .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } -.ui-menu li.ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; } +.ui-menu .ui-state-disabled { font-weight: normal; padding: .0em .4em; margin: .4em 0 .2em; line-height: 1.5; } /* icon support */ .ui-menu-icons { position: relative; } diff --git a/themes/base/jquery.ui.menubar.css b/themes/base/jquery.ui.menubar.css deleted file mode 100644 index 95c42ae9e..000000000 --- a/themes/base/jquery.ui.menubar.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * 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 - */ -.ui-menubar { list-style: none; margin: 0; padding-left: 0; } - -.ui-menubar-item { float: left; } - -.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } -.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } - -.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; } diff --git a/themes/base/jquery.ui.selectmenu.css b/themes/base/jquery.ui.selectmenu.css index 2b3c148a0..e6f624ff0 100644 --- a/themes/base/jquery.ui.selectmenu.css +++ b/themes/base/jquery.ui.selectmenu.css @@ -15,6 +15,4 @@ .ui-selectmenu-open { display: block; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; } -.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em } - -.ui-selectmenu-menu .ui-menu .ui-menu-item { width: auto; } /* IE7 fix */
\ No newline at end of file +.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }
\ No newline at end of file diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 5f86bed7b..0380b262a 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -27,7 +27,7 @@ $.effects.effect.blind = function( o, done ) { motion = rpositivemotion.test( direction ), animation = {}, show = mode === "show", - wrapper, distance; + wrapper, distance, margin; // if already wrapped, the wrapper's properties are my property. #6245 if ( el.parent().is( ".ui-effects-wrapper" ) ) { @@ -41,21 +41,23 @@ $.effects.effect.blind = function( o, done ) { }); distance = wrapper[ ref ](); + margin = parseFloat( wrapper.css( ref2 ) ); animation[ ref ] = show ? distance : 0; if ( !motion ) { el .css( vertical ? "bottom" : "right", 0 ) - .css( vertical ? "top" : "left", "" ) + .css( vertical ? "top" : "left", "auto" ) .css({ position: "absolute" }); - animation[ ref2 ] = show ? 0 : distance; + + animation[ ref2 ] = show ? margin : distance + margin; } // start at 0 if we are showing if ( show ) { wrapper.css( ref, 0 ); if ( ! motion ) { - wrapper.css( ref2, distance ); + wrapper.css( ref2, margin + distance ); } } diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index bd415aa2b..c054ba2dd 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -473,8 +473,8 @@ $.widget( "ui.autocomplete", { this.search( null, event ); return; } - if ( this.menu.first() && /^previous/.test(direction) || - this.menu.last() && /^next/.test(direction) ) { + if ( this.menu.isFirstItem() && /^previous/.test(direction) || + this.menu.isLastItem() && /^next/.test(direction) ) { this._value( this.term ); this.menu.blur(); return; diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 3d7638667..1f959a837 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -77,8 +77,11 @@ $.widget("ui.dialog", { // #5742 - .attr() might return a DOMElement if ( typeof this.originalTitle !== "string" ) { this.originalTitle = ""; - } - + } + this.oldPosition = { + parent: this.element.parent(), + index: this.element.parent().children().index( this.element ) + }; this.options.title = this.options.title || this.originalTitle; var self = this, options = self.options, @@ -168,7 +171,8 @@ $.widget("ui.dialog", { }, _destroy: function() { - var self = this; + var self = this, next, + oldPosition = this.oldPosition; if ( self.overlay ) { self.overlay.destroy(); @@ -183,6 +187,13 @@ $.widget("ui.dialog", { if ( self.originalTitle ) { self.element.attr( "title", self.originalTitle ); } + + next = oldPosition.parent.children().eq( oldPosition.index ); + if ( next.length ) { + next.before( self.element ); + } else { + oldPosition.parent.append( self.element ); + } }, widget: function() { diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 0263cff65..83ea3c3c0 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -18,14 +18,13 @@ var idIncrement = 0; $.widget( "ui.menu", { version: "@VERSION", defaultElement: "<ul>", - delay: 150, + delay: 300, options: { menus: "ul", position: { my: "left top", at: "right top" - }, - trigger: null + } }, _create: function() { this.activeMenu = this.element; @@ -54,14 +53,13 @@ $.widget( "ui.menu", { }, "click .ui-menu-item:has(a)": function( event ) { event.stopImmediatePropagation(); - var target = $( event.currentTarget ); - // it's possible to click an item without hovering it (#7085) - if ( !this.active || ( this.active[ 0 ] !== target[ 0 ] ) ) { - this.focus( event, target ); - } this.select( event ); - // Redirect focus to the menu. - this.element.focus(); + // Redirect focus to the menu with a delay for firefox + this._delay( function() { + if ( !this.element.is(":focus") ) { + this.element.focus(); + } + }, 20); }, "mouseover .ui-menu-item": function( event ) { event.stopImmediatePropagation(); @@ -72,9 +70,21 @@ $.widget( "ui.menu", { }, "mouseleave": "collapseAll", "mouseleave .ui-menu": "collapseAll", - "mouseout .ui-menu-item": "blur", "focus": function( event ) { - this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) ); + var firstItem = this.element.children( ".ui-menu-item" ).eq( 0 ); + if ( this._hasScroll() && !this.active ) { + var menu = this.element; + menu.children().each( function() { + var currentItem = $( this ); + if ( currentItem.offset().top - menu.offset().top >= 0 ) { + firstItem = currentItem; + return false; + } + }); + } else if ( this.active ) { + firstItem = this.active; + } + this.focus( event, firstItem ); }, blur: function( event ) { this._delay( function() { @@ -203,24 +213,10 @@ $.widget( "ui.menu", { } } }); - - if ( this.options.trigger ) { - this.element.popup({ - trigger: this.options.trigger, - managed: true, - focusPopup: $.proxy( function( event, ui ) { - this.focus( event, this.element.children( ".ui-menu-item" ).first() ); - this.element.focus( 1 ); - }, this) - }); - } }, _destroy: function() { //destroy (sub)menus - if ( this.options.trigger ) { - this.element.popup( "destroy" ); - } this.element .removeAttr( "aria-activedescendant" ) .find( ".ui-menu" ) @@ -321,12 +317,12 @@ $.widget( "ui.menu", { }, blur: function( event ) { + clearTimeout( this.timer ); + if ( !this.active ) { return; } - clearTimeout( this.timer ); - this.active.children( "a" ).removeClass( "ui-state-focus" ); this.active = null; @@ -370,20 +366,22 @@ $.widget( "ui.menu", { }, collapseAll: function( event, all ) { + clearTimeout( this.timer ); + this.timer = this._delay( function() { + // if we were passed an event, look for the submenu that contains the event + var currentMenu = all ? this.element : + $( event && event.target ).closest( this.element.find( ".ui-menu" ) ); - // if we were passed an event, look for the submenu that contains the event - var currentMenu = all ? this.element : - $( event && event.target ).closest( this.element.find( ".ui-menu" ) ); - - // if we found no valid submenu ancestor, use the main menu to close all sub menus anyway - if ( !currentMenu.length ) { - currentMenu = this.element; - } + // if we found no valid submenu ancestor, use the main menu to close all sub menus anyway + if ( !currentMenu.length ) { + currentMenu = this.element; + } - this._close( currentMenu ); + this._close( currentMenu ); - this.blur( event ); - this.activeMenu = currentMenu; + this.blur( event ); + this.activeMenu = currentMenu; + }, this.delay); }, // With no arguments, closes the currently active menu - if nothing is active @@ -434,11 +432,11 @@ $.widget( "ui.menu", { this._move( "prev", "last", event ); }, - first: function() { + isFirstItem: function() { return this.active && !this.active.prevAll( ".ui-menu-item" ).length; }, - last: function() { + isLastItem: function() { return this.active && !this.active.nextAll( ".ui-menu-item" ).length; }, @@ -463,15 +461,14 @@ $.widget( "ui.menu", { }, nextPage: function( event ) { + if ( !this.active ) { + this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() ); + return; + } + if ( this.isLastItem() ) { + return; + } if ( this._hasScroll() ) { - if ( !this.active ) { - this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() ); - return; - } - if ( this.last() ) { - return; - } - var base = this.active.offset().top, height = this.element.height(), result; @@ -488,15 +485,14 @@ $.widget( "ui.menu", { }, previousPage: function( event ) { + if ( !this.active ) { + this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() ); + return; + } + if ( this.isFirstItem() ) { + return; + } if ( this._hasScroll() ) { - if ( !this.active ) { - this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() ); - return; - } - if ( this.first() ) { - return; - } - var base = this.active.offset().top, height = this.element.height(), result; @@ -512,7 +508,7 @@ $.widget( "ui.menu", { }, _hasScroll: function() { - return this.element.height() < this.element.prop( "scrollHeight" ); + return this.element.outerHeight() < this.element.prop( "scrollHeight" ); }, select: function( event ) { @@ -522,10 +518,6 @@ $.widget( "ui.menu", { item: this.active }; this.collapseAll( event, true ); - if ( this.options.trigger ) { - $( this.options.trigger ).focus( 1 ); - this.element.popup( "close" ); - } this._trigger( "select", event, ui ); } }); diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js deleted file mode 100644 index 673493366..000000000 --- a/ui/jquery.ui.menubar.js +++ /dev/null @@ -1,299 +0,0 @@ -/* - * 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( $ ) { - -// TODO when mixing clicking menus and keyboard navigation, focus handling is broken -// there has to be just one item that has tabindex -$.widget( "ui.menubar", { - version: "@VERSION", - options: { - autoExpand: false, - buttons: false, - menuIcon: false, - position: { - my: "left top", - at: "left bottom" - } - }, - _create: function() { - var that = this; - var items = this.items = this.element.children( "li" ) - .addClass( "ui-menubar-item" ) - .attr( "role", "presentation" ) - .children( "button, a" ); - // let only the first item receive focus - items.slice(1).attr( "tabIndex", -1 ); - - this.element - .addClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) - .attr( "role", "menubar" ); - this._focusable( items ); - this._hoverable( items ); - items.next( "ul" ) - .menu({ - position: { - within: this.options.position.within - }, - select: function( event, ui ) { - ui.item.parents( "ul.ui-menu:last" ).hide(); - that._close(); - // TODO what is this targetting? there's probably a better way to access it - $(event.target).prev().focus(); - that._trigger( "select", event, ui ); - } - }) - .hide() - .attr({ - "aria-hidden": "true", - "aria-expanded": "false" - }) - .bind( "keydown.menubar", function( event ) { - var menu = $( this ); - if ( menu.is( ":hidden" ) ) - return; - switch ( event.keyCode ) { - case $.ui.keyCode.LEFT: - that._left( event ); - event.preventDefault(); - break; - case $.ui.keyCode.RIGHT: - that._right( event ); - event.preventDefault(); - break; - }; - }); - items.each(function() { - var input = $(this), - // TODO menu var is only used on two places, doesn't quite justify the .each - menu = input.next( "ul" ); - - input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) { - // ignore triggered focus event - if ( event.type == "focus" && !event.originalEvent ) { - return; - } - event.preventDefault(); - // TODO can we simplify or extractthis check? especially the last two expressions - // there's a similar active[0] == menu[0] check in _open - if ( event.type == "click" && menu.is( ":visible" ) && that.active && that.active[0] == menu[0] ) { - that._close(); - return; - } - if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" || that.options.autoExpand ) { - if( that.options.autoExpand ) { - clearTimeout( that.closeTimer ); - } - - that._open( event, menu ); - } - }) - .bind( "keydown", function( event ) { - switch ( event.keyCode ) { - case $.ui.keyCode.SPACE: - case $.ui.keyCode.UP: - case $.ui.keyCode.DOWN: - that._open( event, $( this ).next() ); - event.preventDefault(); - break; - case $.ui.keyCode.LEFT: - that._prev( event, $( this ) ); - event.preventDefault(); - break; - case $.ui.keyCode.RIGHT: - that._next( event, $( this ) ); - event.preventDefault(); - break; - } - }) - .addClass( "ui-button ui-widget ui-button-text-only ui-menubar-link" ) - .attr( "role", "menuitem" ) - .attr( "aria-haspopup", "true" ) - .wrapInner( "<span class='ui-button-text'></span>" ); - - // TODO review if these options are a good choice, maybe they can be merged - if ( that.options.menuIcon ) { - input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" ); - input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" ); - } - - if ( !that.options.buttons ) { - // TODO ui-menubar-link is added above, not needed here? - input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" ); - }; - - }); - that._bind( { - keydown: function( event ) { - if ( event.keyCode == $.ui.keyCode.ESCAPE && that.active && that.active.menu( "collapse", event ) !== true ) { - var active = that.active; - that.active.blur(); - that._close( event ); - active.prev().focus(); - } - }, - focusin: function( event ) { - clearTimeout( that.closeTimer ); - }, - focusout: function( event ) { - that.closeTimer = setTimeout( function() { - that._close( event ); - }, 150); - }, - "mouseleave .ui-menubar-item": function( event ) { - if ( that.options.autoExpand ) { - that.closeTimer = setTimeout( function() { - that._close( event ); - }, 150); - } - }, - "mouseenter .ui-menubar-item": function( event ) { - clearTimeout( that.closeTimer ); - } - }); - }, - - _destroy : function() { - var items = this.element.children( "li" ) - .removeClass( "ui-menubar-item" ) - .removeAttr( "role" ) - .children( "button, a" ); - - this.element - .removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) - .removeAttr( "role" ) - .unbind( ".menubar" ); - - items - .unbind( ".menubar" ) - .removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" ) - .removeAttr( "role" ) - .removeAttr( "aria-haspopup" ) - // TODO unwrap? - .children( "span.ui-button-text" ).each(function( i, e ) { - var item = $( this ); - item.parent().html( item.html() ); - }) - .end() - .children( ".ui-icon" ).remove(); - - this.element.find( ":ui-menu" ) - .menu( "destroy" ) - .show() - .removeAttr( "aria-hidden" ) - .removeAttr( "aria-expanded" ) - .removeAttr( "tabindex" ) - .unbind( ".menubar" ); - }, - - _close: function() { - if ( !this.active || !this.active.length ) - return; - this.active - .menu( "collapseAll" ) - .hide() - .attr({ - "aria-hidden": "true", - "aria-expanded": "false" - }); - this.active - .prev() - .removeClass( "ui-state-active" ) - .removeAttr( "tabIndex" ); - this.active = null; - this.open = false; - }, - - _open: function( event, menu ) { - // on a single-button menubar, ignore reopening the same menu - if ( this.active && this.active[0] == menu[0] ) { - return; - } - // TODO refactor, almost the same as _close above, but don't remove tabIndex - if ( this.active ) { - this.active - .menu( "collapseAll" ) - .hide() - .attr({ - "aria-hidden": "true", - "aria-expanded": "false" - }); - this.active - .prev() - .removeClass( "ui-state-active" ); - } - // set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus) - var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 ); - this.active = menu - .show() - .position( $.extend({ - of: button - }, this.options.position ) ) - .removeAttr( "aria-hidden" ) - .attr( "aria-expanded", "true" ) - .menu("focus", event, menu.children( "li" ).first() ) - // TODO need a comment here why both events are triggered - .focus() - .focusin(); - this.open = true; - }, - - // TODO refactor this and the next three methods - _prev: function( event, button ) { - button.attr( "tabIndex", -1 ); - var prev = button.parent().prevAll( "li" ).children( ".ui-button" ).eq( 0 ); - if ( prev.length ) { - prev.removeAttr( "tabIndex" )[0].focus(); - } else { - var lastItem = this.element.children( "li:last" ).children( ".ui-button:last" ); - lastItem.removeAttr( "tabIndex" )[0].focus(); - } - }, - - _next: function( event, button ) { - button.attr( "tabIndex", -1 ); - var next = button.parent().nextAll( "li" ).children( ".ui-button" ).eq( 0 ); - if ( next.length ) { - next.removeAttr( "tabIndex")[0].focus(); - } else { - var firstItem = this.element.children( "li:first" ).children( ".ui-button:first" ); - firstItem.removeAttr( "tabIndex" )[0].focus(); - } - }, - - // TODO rename to parent - _left: function( event ) { - var prev = this.active.parent().prevAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 ); - if ( prev.length ) { - this._open( event, prev ); - } else { - var lastItem = this.element.children( "li:last" ).children( ".ui-menu:first" ); - this._open( event, lastItem ); - } - }, - - // TODO rename to child (or something like that) - _right: function( event ) { - var next = this.active.parent().nextAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 ); - if ( next.length ) { - this._open( event, next ); - } else { - var firstItem = this.element.children( "li:first" ).children( ".ui-menu:first" ); - this._open( event, firstItem ); - } - } -}); - -}( jQuery )); diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js deleted file mode 100644 index 128464cc2..000000000 --- a/ui/jquery.ui.popup.js +++ /dev/null @@ -1,279 +0,0 @@ -/* - * 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($) { - -var idIncrement = 0, - suppressExpandOnFocus = false; - -$.widget( "ui.popup", { - version: "@VERSION", - options: { - position: { - my: "left top", - at: "left bottom" - }, - managed: false, - expandOnFocus: false, - show: { - effect: "slideDown", - duration: "fast" - }, - hide: { - effect: "fadeOut", - duration: "fast" - } - }, - _create: function() { - if ( !this.options.trigger ) { - this.options.trigger = this.element.prev(); - } - - if ( !this.element.attr( "id" ) ) { - this.element.attr( "id", "ui-popup-" + idIncrement++ ); - this.generatedId = true; - } - - if ( !this.element.attr( "role" ) ) { - if ( !this.options.managed ) { - this.element.attr( "role", "dialog" ); - this.generatedRole = true; - } - } - - this.options.trigger - .attr( "aria-haspopup", "true" ) - .attr( "aria-owns", this.element.attr( "id" ) ); - - this.element - .addClass( "ui-popup" ); - this._beforeClose(); - this.element.hide(); - - this._bind(this.options.trigger, { - keydown: function( event ) { - switch ( event.keyCode ) { - case $.ui.keyCode.TAB: - // Waiting for close() will make popup hide too late, which breaks tab key behavior - this.element.hide(); - this.close( event ); - break; - case $.ui.keyCode.ESCAPE: - if ( this.isOpen ) { - this.close( event ); - } - break; - case $.ui.keyCode.SPACE: - // prevent space-to-open to scroll the page, only happens for anchor ui.button - // TODO check for $.ui.button before using custom selector, once more below - if ( this.options.trigger.is( "a:ui-button" ) ) { - event.preventDefault(); - } - - else if (this.options.trigger.is( "a:not(:ui-button)" ) ) { - this.options.trigger.trigger( "click", event ); - } - break; - case $.ui.keyCode.DOWN: - case $.ui.keyCode.UP: - // prevent scrolling - event.preventDefault(); - clearTimeout( this.closeTimer ); - this._delay(function() { - this.open( event ); - this.focusPopup( event ); - }, 1); - break; - } - }, - click: function( event ) { - event.stopPropagation(); - event.preventDefault(); - }, - mousedown: function( event ) { - var noFocus = false; - /* TODO: Determine in which cases focus should stay on the trigger after the popup opens - (should apply for any trigger that has other interaction besides opening the popup, e.g. a text field) */ - if ( $( event.target ).is( "input" ) ) { - noFocus = true; - } - if (this.isOpen) { - suppressExpandOnFocus = true; - this.close(); - return; - } - this.open( event ); - clearTimeout( this.closeTimer ); - this._delay( function() { - if ( !noFocus ) { - this.focusPopup(); - } - }, 1 ); - } - }); - - if ( this.options.expandOnFocus ) { - this._bind( this.options.trigger, { - focus : function( event ) { - if ( !suppressExpandOnFocus ) { - this._delay( function() { - if ( !this.isOpen ) { - this.open( event ); - } - }, 1); - } - this._delay( function() { - suppressExpandOnFocus = false; - }, 100); - }, - blur: function( event ) { - suppressExpandOnFocus = false; - } - }); - } - if ( !this.options.managed ) { - //default use case, wrap tab order in popup - this._bind({ keydown : function( event ) { - if ( event.keyCode !== $.ui.keyCode.TAB ) { - return; - } - var tabbables = $( ":tabbable", this.element ), - first = tabbables.first(), - last = tabbables.last(); - if ( event.target === last[ 0 ] && !event.shiftKey ) { - first.focus( 1 ); - event.preventDefault(); - } else if ( event.target === first[ 0 ] && event.shiftKey ) { - last.focus( 1 ); - event.preventDefault(); - } - } - }); - } - - this._bind({ - focusout: function( event ) { - // use a timer to allow click to clear it and letting that - // handle the closing instead of opening again - this.closeTimer = this._delay( function() { - this.close( event ); - }, 150); - }, - focusin: function( event ) { - clearTimeout( this.closeTimer ); - }, - mouseup: function( event ) { - clearTimeout( this.closeTimer ); - } - }); - - this._bind({ - keyup: function( event ) { - if ( event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" ) ) { - this.close( event ); - this.focusTrigger(); - } - } - }); - - this._bind( this.document, { - click: function( event ) { - if ( this.isOpen && !$( event.target ).closest( this.element.add( this.options.trigger ) ).length ) { - this.close( event ); - } - } - }); - }, - - _destroy: function() { - this.element - .show() - .removeClass( "ui-popup" ) - .removeAttr( "aria-hidden" ) - .removeAttr( "aria-expanded" ) - .unbind( "keypress.ui-popup"); - - this.options.trigger - .removeAttr( "aria-haspopup" ) - .removeAttr( "aria-owns" ); - - if ( this.generatedId ) { - this.element.removeAttr( "id" ); - } - if ( this.generatedRole ) { - this.element.removeAttr( "role" ); - } - }, - - open: function( event ) { - var position = $.extend( {}, { - of: this.options.trigger - }, this.options.position ); - - this._show( this.element, this.options.show ); - this.element - .attr( "aria-hidden", "false" ) - .attr( "aria-expanded", "true" ) - .position( position ); - - // take trigger out of tab order to allow shift-tab to skip trigger - this.options.trigger.attr( "tabindex", -1 ); - this.isOpen = true; - this._trigger( "open", event ); - }, - - focusPopup: function( event ) { - if ( !this.options.managed ) { - // set focus to the first tabbable element in the popup container - // if there are no tabbable elements, set focus on the popup itself - var tabbables = this.element.find( ":tabbable" ); - this.removeTabIndex = false; - if ( !tabbables.length ) { - if ( !this.element.is(":tabbable") ) { - this.element.attr("tabindex", "0"); - this.removeTabIndex = true; - } - tabbables = tabbables.add( this.element[ 0 ] ); - } - tabbables.first().focus( 1 ); - } - this._trigger( "focusPopup", event ); - }, - - focusTrigger: function( event ) { - suppressExpandOnFocus = true; - this.options.trigger.focus(); - this._trigger( "focusTrigger", event ); - }, - - close: function( event ) { - this._beforeClose(); - this._hide( this.element, this.options.hide ); - - this.options.trigger.attr( "tabindex" , 0 ); - if ( this.removeTabIndex ) { - this.element.removeAttr( "tabindex" ); - } - this.isOpen = false; - this._trigger( "close", event ); - }, - - _beforeClose: function() { - this.element - .attr( "aria-hidden", "true" ) - .attr( "aria-expanded", "false" ); - } -}); - -}(jQuery)); diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js index b8aec3750..511760972 100644 --- a/ui/jquery.ui.selectmenu.js +++ b/ui/jquery.ui.selectmenu.js @@ -102,10 +102,8 @@ $.widget( "ui.selectmenu", { // create menu portion, append to body this.menu = $( '<ul />', { - 'class': 'ui-widget ui-widget-content', 'aria-hidden': true, 'aria-labelledby': this.ids.button, - role: 'menubox', id: this.ids.menu }); @@ -152,7 +150,9 @@ $.widget( "ui.selectmenu", { that.focus = item.index; } - }); + }) + // change ARIA role + .attr( 'role', 'menubox' ); // document click closes menu this._bind( document, { @@ -174,6 +174,7 @@ $.widget( "ui.selectmenu", { // adjust ARIA this.menu.find( "li" ).not( '.ui-selectmenu-optgroup' ).find( 'a' ).attr( 'role', 'option' ); + this.menu.attr( "aria-activedescendant" , this.menu.find( "li.ui-menu-item a" ).eq( this.element[0].selectedIndex ).attr( "id" ) ); if ( this.options.dropdown ) { this.menu @@ -209,10 +210,6 @@ $.widget( "ui.selectmenu", { }, 1); if ( !this.options.dropdown ) { - // center current item - if ( this.menu.css("overflow") == "auto" ) { - this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight()/2 + currentItem.outerHeight()/2 ); - } // calculate offset var _offset = ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2); $.extend( this.options.position, { @@ -287,15 +284,22 @@ $.widget( "ui.selectmenu", { return li.appendTo( ul ); }, - _move: function( key, event ) { - if ( !this.isOpen ) { - this.menu.menu( "focus", event, this._getSelectedItem() ); + _move: function( direction, event ) { + if ( direction == "first" || direction == "last" ) { + // set focus manually for first or last item + this.menu.menu( "focus", event, this.menu.find( "li" ).not( '.ui-selectmenu-optgroup' )[ direction ]() ); + } else { + // if menu is closed we need to focus the element first to indicate correct element + if ( !this.isOpen ) { + this.menu.menu( "focus", event, this._getSelectedItem() ); + } + // move to and focus next or prev item + this.menu.menu( direction, event ); } - - this.menu.menu( key, event ); - + + // select if selectmenu is closed if ( !this.isOpen ) { - this.menu.menu( "select", event ); + this.menu.menu( "select", event ); } }, @@ -317,20 +321,20 @@ $.widget( "ui.selectmenu", { event.preventDefault(); }, keydown: function( event ) { + var prevDef = true; switch (event.keyCode) { case $.ui.keyCode.TAB: if ( this.isOpen ) { this.close( event ); } + prevDef = false; break; case $.ui.keyCode.ENTER: if ( this.isOpen ) { - this.menu.menu( "select", this._getSelectedItem() ); + this.menu.menu( "select", event ); } - event.preventDefault(); break; case $.ui.keyCode.SPACE: - event.preventDefault(); break; case $.ui.keyCode.UP: if ( event.altKey ) { @@ -338,7 +342,6 @@ $.widget( "ui.selectmenu", { } else { this._move( "previous", event ); } - event.preventDefault(); break; case $.ui.keyCode.DOWN: if ( event.altKey ) { @@ -346,18 +349,27 @@ $.widget( "ui.selectmenu", { } else { this._move( "next", event ); } - event.preventDefault(); break; case $.ui.keyCode.LEFT: this._move( "previous", event ); - event.preventDefault(); break; case $.ui.keyCode.RIGHT: this._move( "next", event ); - event.preventDefault(); + break; + case $.ui.keyCode.HOME: + case $.ui.keyCode.PAGE_UP: + this._move( "first", event ); + break; + case $.ui.keyCode.END: + case $.ui.keyCode.PAGE_DOWN: + this._move( "last", event ); break; default: this.menu.trigger( event ); + prevDef = false; + } + if ( prevDef ) { + event.preventDefault(); } } }, diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index b78b4dbea..c99520b7c 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -45,7 +45,14 @@ $.widget( "ui.spinner", { }, _create: function() { + // handle string values that need to be parsed + this._setOption( "max", this.options.max ); + this._setOption( "min", this.options.min ); + this._setOption( "step", this.options.step ); + + // format the value, but don't constrain this._value( this.element.val(), true ); + this._draw(); this._bind( this._events ); this._refresh(); @@ -318,6 +325,12 @@ $.widget( "ui.spinner", { return; } + if ( key === "max" || key === "min" || key === "step" ) { + if ( typeof value === "string" ) { + value = this._parse( value ); + } + } + this._super( key, value ); if ( key === "disabled" ) { diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 4f47a008b..5c8560bfd 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -329,6 +329,13 @@ $.Widget.prototype = { return ( typeof handler === "string" ? instance[ handler ] : handler ) .apply( instance, arguments ); } + + // copy the guid so direct unbinding works + if ( typeof handler !== "string" ) { + handlerProxy.guid = handler.guid = + handler.guid || handlerProxy.guid || jQuery.guid++; + } + var match = event.match( /^(\w+)\s*(.*)$/ ), eventName = match[1] + "." + instance.widgetName, selector = match[2]; |