mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-12-07 06:14:24 +00:00
Menubar/Popup: Remove both to streamline the 1.9 release. Will revert this delete on the menubar branch, while development on master can continue without them.
This commit is contained in:
Jörn Zaefferer
parent
f0007ec745
commit
85348eeebe
@ -20,8 +20,6 @@
|
|||||||
<script src="../ui/jquery.ui.draggable.js"></script>
|
<script src="../ui/jquery.ui.draggable.js"></script>
|
||||||
<script src="../ui/jquery.ui.droppable.js"></script>
|
<script src="../ui/jquery.ui.droppable.js"></script>
|
||||||
<script src="../ui/jquery.ui.menu.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.position.js"></script>
|
||||||
<script src="../ui/jquery.ui.progressbar.js"></script>
|
<script src="../ui/jquery.ui.progressbar.js"></script>
|
||||||
<script src="../ui/jquery.ui.resizable.js"></script>
|
<script src="../ui/jquery.ui.resizable.js"></script>
|
||||||
@ -285,8 +283,6 @@
|
|||||||
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
||||||
<dd><a href="dialog/index.html">Dialog</a></dd>
|
<dd><a href="dialog/index.html">Dialog</a></dd>
|
||||||
<dd><a href="menu/index.html">Menu</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="progressbar/index.html">Progressbar</a></dd>
|
||||||
<dd><a href="slider/index.html">Slider</a></dd>
|
<dd><a href="slider/index.html">Slider</a></dd>
|
||||||
<dd><a href="spinner/index.html">Spinner</a></dd>
|
<dd><a href="spinner/index.html">Spinner</a></dd>
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -11,7 +11,6 @@
|
|||||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||||
<script src="../../ui/jquery.ui.button.js"></script>
|
<script src="../../ui/jquery.ui.button.js"></script>
|
||||||
<script src="../../ui/jquery.ui.menu.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.core.js"></script>
|
||||||
<script src="../../ui/jquery.effects.blind.js"></script>
|
<script src="../../ui/jquery.effects.blind.js"></script>
|
||||||
<link rel="stylesheet" href="../demos.css">
|
<link rel="stylesheet" href="../demos.css">
|
||||||
@ -69,14 +68,6 @@
|
|||||||
$( this ).remove();
|
$( 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() {
|
$( "button" ).each(function() {
|
||||||
var button = $( this ).button({
|
var button = $( this ).button({
|
||||||
@ -85,15 +76,9 @@
|
|||||||
},
|
},
|
||||||
text: !!$( this ).attr( "title" )
|
text: !!$( this ).attr( "title" )
|
||||||
});
|
});
|
||||||
if ( button.next().is( ":ui-popup" ) ) {
|
|
||||||
button.click(function( event ) {
|
|
||||||
$( ".demo" ).tooltip( "close", event );
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
button.click(function() {
|
button.click(function() {
|
||||||
notify( button );
|
notify( button );
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
$( ".set" ).buttonset({
|
$( ".set" ).buttonset({
|
||||||
items: "button"
|
items: "button"
|
||||||
@ -127,17 +112,6 @@
|
|||||||
<div class="set">
|
<div class="set">
|
||||||
<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
|
<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>
|
<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>
|
</div>
|
||||||
<button title="Share this video">Share</button>
|
<button title="Share this video">Share</button>
|
||||||
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
|
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
|
||||||
|
|||||||
1
themes/base/jquery.ui.base.css
vendored
1
themes/base/jquery.ui.base.css
vendored
@ -15,7 +15,6 @@
|
|||||||
@import url("jquery.ui.datepicker.css");
|
@import url("jquery.ui.datepicker.css");
|
||||||
@import url("jquery.ui.dialog.css");
|
@import url("jquery.ui.dialog.css");
|
||||||
@import url("jquery.ui.menu.css");
|
@import url("jquery.ui.menu.css");
|
||||||
@import url("jquery.ui.menubar.css");
|
|
||||||
@import url("jquery.ui.progressbar.css");
|
@import url("jquery.ui.progressbar.css");
|
||||||
@import url("jquery.ui.resizable.css");
|
@import url("jquery.ui.resizable.css");
|
||||||
@import url("jquery.ui.selectable.css");
|
@import url("jquery.ui.selectable.css");
|
||||||
|
|||||||
15
themes/base/jquery.ui.menubar.css
vendored
15
themes/base/jquery.ui.menubar.css
vendored
@ -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; font-weight: normal; }
|
|
||||||
18
ui/jquery.ui.menu.js
vendored
18
ui/jquery.ui.menu.js
vendored
@ -214,24 +214,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: function() {
|
||||||
//destroy (sub)menus
|
//destroy (sub)menus
|
||||||
if ( this.options.trigger ) {
|
|
||||||
this.element.popup( "destroy" );
|
|
||||||
}
|
|
||||||
this.element
|
this.element
|
||||||
.removeAttr( "aria-activedescendant" )
|
.removeAttr( "aria-activedescendant" )
|
||||||
.find( ".ui-menu" )
|
.find( ".ui-menu" )
|
||||||
@ -533,10 +519,6 @@ $.widget( "ui.menu", {
|
|||||||
item: this.active
|
item: this.active
|
||||||
};
|
};
|
||||||
this.collapseAll( event, true );
|
this.collapseAll( event, true );
|
||||||
if ( this.options.trigger ) {
|
|
||||||
$( this.options.trigger ).focus( 1 );
|
|
||||||
this.element.popup( "close" );
|
|
||||||
}
|
|
||||||
this._trigger( "select", event, ui );
|
this._trigger( "select", event, ui );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
296
ui/jquery.ui.menubar.js
vendored
296
ui/jquery.ui.menubar.js
vendored
@ -1,296 +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,
|
|
||||||
items: "li",
|
|
||||||
menuElement: "ul",
|
|
||||||
menuIcon: false,
|
|
||||||
position: {
|
|
||||||
my: "left top",
|
|
||||||
at: "left bottom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_create: function() {
|
|
||||||
var that = this;
|
|
||||||
this.menuItems = this.element.children( this.options.items );
|
|
||||||
this.items = this.menuItems.children( "button, a" );
|
|
||||||
|
|
||||||
this.menuItems
|
|
||||||
.addClass( "ui-menubar-item" )
|
|
||||||
.attr( "role", "presentation" );
|
|
||||||
// let only the first item receive focus
|
|
||||||
this.items.slice(1).attr( "tabIndex", -1 );
|
|
||||||
|
|
||||||
this.element
|
|
||||||
.addClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
|
|
||||||
.attr( "role", "menubar" );
|
|
||||||
this._focusable( this.items );
|
|
||||||
this._hoverable( this.items );
|
|
||||||
this.items.siblings( this.options.menuElement )
|
|
||||||
.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 );
|
|
||||||
},
|
|
||||||
menus: that.options.menuElement
|
|
||||||
})
|
|
||||||
.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.previous( event );
|
|
||||||
event.preventDefault();
|
|
||||||
break;
|
|
||||||
case $.ui.keyCode.RIGHT:
|
|
||||||
that.next( event );
|
|
||||||
event.preventDefault();
|
|
||||||
break;
|
|
||||||
};
|
|
||||||
});
|
|
||||||
this.items.each(function() {
|
|
||||||
var input = $(this),
|
|
||||||
// TODO menu var is only used on two places, doesn't quite justify the .each
|
|
||||||
menu = input.next( that.options.menuElement );
|
|
||||||
|
|
||||||
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.previous( event );
|
|
||||||
event.preventDefault();
|
|
||||||
break;
|
|
||||||
case $.ui.keyCode.RIGHT:
|
|
||||||
that.next( event );
|
|
||||||
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() {
|
|
||||||
this.menuItems
|
|
||||||
.removeClass( "ui-menubar-item" )
|
|
||||||
.removeAttr( "role" );
|
|
||||||
|
|
||||||
this.element
|
|
||||||
.removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" )
|
|
||||||
.removeAttr( "role" )
|
|
||||||
.unbind( ".menubar" );
|
|
||||||
|
|
||||||
this.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( ".ui-menu-item" ).first() )
|
|
||||||
// TODO need a comment here why both events are triggered
|
|
||||||
.focus()
|
|
||||||
.focusin();
|
|
||||||
this.open = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
next: function( event ) {
|
|
||||||
this._move( "next", "first", event );
|
|
||||||
},
|
|
||||||
|
|
||||||
previous: function( event ) {
|
|
||||||
this._move( "prev", "last", event );
|
|
||||||
},
|
|
||||||
|
|
||||||
_move: function( direction, filter, event ) {
|
|
||||||
var next,
|
|
||||||
wrapItem;
|
|
||||||
if ( this.open ) {
|
|
||||||
next = this.active.closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).first().children( ".ui-menu" ).eq( 0 );
|
|
||||||
wrapItem = this.menuItems[ filter ]().children( ".ui-menu" ).eq( 0 );
|
|
||||||
} else {
|
|
||||||
if ( event ) {
|
|
||||||
next = $( event.target ).closest( ".ui-menubar-item" )[ direction + "All" ]( this.options.items ).children( ".ui-menubar-link" ).eq( 0 );
|
|
||||||
wrapItem = this.menuItems[ filter ]().children( ".ui-menubar-link" ).eq( 0 );
|
|
||||||
} else {
|
|
||||||
next = wrapItem = this.menuItems.children( "a" ).eq( 0 );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( next.length ) {
|
|
||||||
if ( this.open ) {
|
|
||||||
this._open( event, next );
|
|
||||||
} else {
|
|
||||||
next.removeAttr( "tabIndex")[0].focus();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if ( this.open ) {
|
|
||||||
this._open( event, wrapItem );
|
|
||||||
} else {
|
|
||||||
wrapItem.removeAttr( "tabIndex")[0].focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}( jQuery ));
|
|
||||||
279
ui/jquery.ui.popup.js
vendored
279
ui/jquery.ui.popup.js
vendored
@ -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));
|
|
||||||
Loading…
Reference in New Issue
Block a user