mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults
This commit is contained in:
Jörn Zaefferer
parent
433ed6eecf
commit
7281f9f229
@ -13,9 +13,10 @@
|
||||
<script src="../../ui/jquery.ui.menubar.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
|
||||
|
||||
$("#bar1, .menubar").menubar({
|
||||
$("#bar1").menubar({
|
||||
position: {
|
||||
within: $("#demo-frame").add(window).first()
|
||||
},
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
}
|
||||
@ -24,6 +25,9 @@
|
||||
$(".menubar-icons").menubar({
|
||||
menuIcon: true,
|
||||
buttons: true,
|
||||
position: {
|
||||
within: $("#demo-frame").add(window).first()
|
||||
},
|
||||
select: function(event, ui) {
|
||||
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
|
||||
}
|
||||
@ -160,63 +164,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<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">
|
||||
<ul class="menubar">
|
||||
<li>
|
||||
<a href="#Options">Options</a>
|
||||
<ul>
|
||||
<li><a href="#Order...">Order...</a></li>
|
||||
<li class="ui-state-disabled">Write a Review...</li>
|
||||
<li><a href="#Find Similar Movies...">Find Similar Movies...</a></li>
|
||||
<li>
|
||||
<a href="#Rate">Rate</a>
|
||||
<ul>
|
||||
<li><a href="#5 stars">5 stars</a></li>
|
||||
<li><a href="#4 stars">4 stars</a></li>
|
||||
<li><a href="#3 stars">3 stars</a></li>
|
||||
<li><a href="#2 stars">2 stars</a></li>
|
||||
<li><a href="#1 stars">1 stars</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
|
||||
<td class="ui-widget-content">1991</td>
|
||||
<td class="ui-widget-content">3.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
|
||||
<td class="ui-widget-content">1991</td>
|
||||
<td class="ui-widget-content">3.9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ui-widget-content">Spike and Mike's Sick & Twisted Festival of Animation</td>
|
||||
<td class="ui-widget-content">1997</td>
|
||||
<td class="ui-widget-content">2.6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
-->
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Log:
|
||||
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test: Containing Element</title>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test: Containing Element</title>
|
||||
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height:100%;
|
||||
width:100%;
|
||||
@ -22,7 +22,7 @@
|
||||
/* force scroll bar*/
|
||||
min-height:800px;
|
||||
min-width:800px;
|
||||
|
||||
|
||||
/* IE6 needs this */
|
||||
text-align:center;
|
||||
}
|
||||
@ -32,9 +32,9 @@
|
||||
}
|
||||
.demo-container {
|
||||
background:#aaa;
|
||||
width:80%;
|
||||
width:80%;
|
||||
height:80%;
|
||||
|
||||
|
||||
text-align:left;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
@ -72,8 +72,8 @@
|
||||
select, input {
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function position( using ) {
|
||||
$( ".positionable" ).position({
|
||||
@ -114,7 +114,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
|
||||
<br/>Drag around the parent element to see collision detection in action.
|
||||
@ -126,15 +126,15 @@
|
||||
<div id="parent">
|
||||
<p>This is the position parent element.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="positionable">
|
||||
<p>to position</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="positionable" style="width:120px; height: 40px;">
|
||||
<p>to position 2</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="padding: 20px; margin-top: 75px;">
|
||||
position...
|
||||
<div style="padding-bottom: 20px;">
|
||||
@ -142,7 +142,7 @@
|
||||
<select id="my_horizontal">
|
||||
<option value="left">left</option>
|
||||
<option value="center">center</option>
|
||||
<option value="right">right</option>
|
||||
<option value="right" selected="selected">right</option>
|
||||
</select>
|
||||
<select id="my_vertical">
|
||||
<option value="top">top</option>
|
||||
@ -155,7 +155,7 @@
|
||||
<select id="at_horizontal">
|
||||
<option value="left">left</option>
|
||||
<option value="center">center</option>
|
||||
<option value="right">right</option>
|
||||
<option value="right" selected="selected">right</option>
|
||||
</select>
|
||||
<select id="at_vertical">
|
||||
<option value="top">top</option>
|
||||
@ -181,9 +181,9 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
17
ui/jquery.ui.menubar.js
vendored
17
ui/jquery.ui.menubar.js
vendored
@ -21,7 +21,11 @@ $.widget( "ui.menubar", {
|
||||
version: "@VERSION",
|
||||
options: {
|
||||
buttons: false,
|
||||
menuIcon: false
|
||||
menuIcon: false,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom"
|
||||
}
|
||||
},
|
||||
_create: function() {
|
||||
var that = this;
|
||||
@ -39,6 +43,9 @@ $.widget( "ui.menubar", {
|
||||
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._trigger( "select", event, ui );
|
||||
@ -119,7 +126,7 @@ $.widget( "ui.menubar", {
|
||||
// TODO ui-menubar-link is added above, not needed here?
|
||||
input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" );
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
that._bind( {
|
||||
keydown: function( event ) {
|
||||
@ -210,11 +217,9 @@ $.widget( "ui.menubar", {
|
||||
var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 );
|
||||
this.active = menu
|
||||
.show()
|
||||
.position( {
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
.position( $.extend({
|
||||
of: button
|
||||
})
|
||||
}, this.options.position ) )
|
||||
.removeAttr( "aria-hidden" )
|
||||
.attr( "aria-expanded", "true" )
|
||||
.menu("focus", event, menu.children( "li" ).first() )
|
||||
|
||||
Loading…
Reference in New Issue
Block a user