Permalink
Browse files

popup trigger option now supports multiple elements

  • Loading branch information...
1 parent f83c963 commit 231f5748a10da393e566cf4c7702bd2937e1939b @clarkbox clarkbox committed Jan 24, 2012
Showing with 62 additions and 26 deletions.
  1. +46 −20 demos/popup/popup-menu-table.html
  2. +16 −6 ui/jquery.ui.popup.js
@@ -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();
+ }).button();
+
});
</script>
<style type="text/css">
@@ -34,6 +40,8 @@
.demo th, .demo td {
padding: 0.5em;
}
+
+ #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
@@ -102,15 +102,18 @@ $.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();
+ this.close();
return;
}
this.open( event );
@@ -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" )

0 comments on commit 231f574

Please sign in to comment.