Skip to content

Popup: modified trigger option to support multiple elements. #582

Closed
wants to merge 2 commits into from
View
68 demos/popup/popup-menu-table.html
@@ -19,9 +19,15 @@
$(this).popup("close");
}
};
-
- $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)");
- $("table .menubar > ul").menu(selected).popup().prev().button();
+
+ $(".myMenu").menu(selected).popup({ trigger: $(".myButtons").button() });
+
+ $('#openButton').on('click', function(event){
+ $(".myMenu").popup('open');
+ event.preventDefault();
+ event.stopPropagation();
@jzaefferer
jQuery Foundation member
jzaefferer added a note Feb 22, 2012

Despite these calls, clicking #openButton while the popup is still open causes it to open and close immediately. In other words, click on the first button to open it, then click on this button, and it'll go through to show and hide animations and end up not visible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }).button();
+
});
</script>
<style type="text/css">
@@ -34,7 +40,9 @@
.demo th, .demo td {
padding: 0.5em;
}
- </style>
+
+ #openButton{margin-top:20px;}
+ </style>
</head>
<body>
@@ -56,50 +64,68 @@
<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>
+ <a href="#" class="myButtons">Options</a>
</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>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </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>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </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>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </td>
</tr>
</tbody>
</table>
+
+ <a href="#" id="openButton">Programtically open popup()</a>
+
+ <ul class="myMenu">
+ <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 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>
+<p>Poup menu in a table. Demonstrates using popup with multiple triggers. 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 -->
View
20 ui/jquery.ui.popup.js
@@ -102,13 +102,16 @@ $.widget( "ui.popup", {
event.preventDefault();
},
mousedown: function( event ) {
- var noFocus = false;
+ var noFocus = false,
+ target = $( event.target );
/* 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" ) ) {
+ if ( target.is( "input" ) ) {
noFocus = true;
}
- if (this.isOpen) {
+
+ //clicking on the same trigger twice should close the popup
+ if (this.isOpen && target.is( this.triggeredBy ) ) {
suppressExpandOnFocus = true;
this.close();
return;
@@ -217,10 +220,17 @@ $.widget( "ui.popup", {
},
open: function( event ) {
+ //keep state of the target that triggered this event - required in the case of a shared popup element
+ this.triggeredBy = event ? event.target : this.options.trigger;
var position = $.extend( {}, {
- of: this.options.trigger
+ of: this.triggeredBy
}, this.options.position );
-
+
+ //in the case this is a shared popup (aka has more than one trigger) we need to hide this so the following _show() effect will appear
+ if( this.isOpen ){
+ this.element.css('display','none');
+ }
+
this._show( this.element, this.options.show );
this.element
.attr( "aria-hidden", "false" )
Something went wrong with that request. Please try again.