library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jörn Zaefferer 2011-06-09 17:14:21 +02:00
parent 433ed6eecf
commit 7281f9f229
3 changed files with 43 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
demos/menubar/default.html
View File

@ -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 &amp; 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>

4
tests/visual/position/position_within.html
View File

@ -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>

15
ui/jquery.ui.menubar.js vendored
View File

@ -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 );
@ -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() )