diff options
author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-01-11 20:00:04 +0100 |
---|---|---|
committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2012-01-11 20:00:04 +0100 |
commit | 021243bc9b8aa81a3461564ce17ca3fc360fb948 (patch) | |
tree | f274814ddb7c6930cf5d1f331bbacc4772feac37 /demos | |
parent | bd7bd936d1e437ee1154ab6b7b1cdc70b1018363 (diff) | |
parent | 370bc00150f1f77275a861a3c15138b488061871 (diff) | |
download | jquery-ui-021243bc9b8aa81a3461564ce17ca3fc360fb948.tar.gz jquery-ui-021243bc9b8aa81a3461564ce17ca3fc360fb948.zip |
Merge branch 'master' into selectmenu
Diffstat (limited to 'demos')
-rw-r--r-- | demos/index.html | 42 | ||||
-rw-r--r-- | demos/menu/contextmenu.html | 65 | ||||
-rw-r--r-- | demos/menubar/default.html | 208 | ||||
-rw-r--r-- | demos/menubar/index.html | 16 | ||||
-rw-r--r-- | demos/popup/animation.html | 84 | ||||
-rw-r--r-- | demos/popup/default.html | 69 | ||||
-rw-r--r-- | demos/popup/index.html | 20 | ||||
-rw-r--r-- | demos/popup/popup-menu-table.html | 108 | ||||
-rw-r--r-- | demos/popup/popup-menu.html | 92 | ||||
-rw-r--r-- | demos/popup/tooltip.html | 61 | ||||
-rw-r--r-- | demos/tooltip/video-player.html | 32 |
11 files changed, 22 insertions, 775 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 ef39a7121..000000000 --- a/demos/menubar/default.html +++ /dev/null @@ -1,208 +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 - }); - - $("#bar3").menubar({ - position: { - within: $("#demo-frame").add(window).first() - }, - select: select, - items: ".menubarItem", - menuElement: ".menuElement" - }); - }); - </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 id="bar3" class="menubar"> - <div class="menubarItem"> - <a href="#File">File</a> - <div class="menuElement"> - <div><a href="#Open...">Open...</a></div> - <div class="ui-state-disabled">Open recent...</div> - <div><a href="#Save">Save</a></div> - <div><a href="#Save as...">Save as...</a></div> - <div><a href="#Close">Close</a></div> - <div><a href="#Quit">Quit</a></div> - </div> - </div> - <div class="menubarItem"> - <a href="#Edit">Edit</a> - <div class="menuElement"> - <div><a href="#Copy">Copy</a></div> - <div><a href="#Cut">Cut</a></div> - <div class="ui-state-disabled">Paste</div> - </div> - </div> - <div class="menubarItem"> - <a href="#View">View</a> - <div class="menuElement"> - <div><a href="#Fullscreen">Fullscreen</a></div> - <div><a href="#Fit into view">Fit into view</a></div> - <div> - <a href="#Encoding">Encoding</a> - <div class="menuElement"> - <div class="ui-state-disabled">Auto-detect</div> - <div><a href="#UTF-8">UTF-8</a></div> - <div> - <a href="#UTF-16">UTF-16</a> - <div class="menuElement"> - <div><a href="#Option 1">Option 1</a></div> - <div><a href="#Option 2">Option 2</a></div> - <div class="ui-state-disabled">Option 3</div> - <div><a href="#Option 4">Option 4</a></div> - </div> - </div> - </div> - </div> - <div><a href="#Customize...">Customize...</a></div> - </div> - </div> -</div> - -<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> |