I follow this example from the showcase: http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=login&skin=blueSky it show how I can click on a link to open a popupPanel and append that panel to the same position of that link. But I want so that if I click again, it will close the panel. Anyone know how to achieve that? Here is my code
<h:outputLink value="#" id="sb-dd-ol" >
<rich:componentControl event="click" operation="show" target="sb-dd-pp">
<a4j:param noEscape="true" value="event"/>
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().top +
jQuery(#{rich:element('sb-dd-ol')}.parentNode).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('sb-dd-ol')}.parentNode).offset().left" />
</rich:hashParam>
</rich:componentControl>
Test
</h:outputLink>
<rich:popupPanel id="sb-dd-pp" autosized="true" modal="false"
moveable="false" resizeable="false" followByScroll="false">
This is a test
</rich:popupPanel>
You can extend PopupPanel prototype, like this:
jQuery.extend(RichFaces.ui.PopupPanel.prototype, {
toggle: function(event, opts) {
if (this.shown) {
this.hide(event, opts);
} else {
this.show(event, opts);
}
}
}
After that you can use operation="toggle"
in componentControl (alternative is to add onclick="#{rich:component('sb-dd-pp')}.toggle();"
on the link).
not well aware of richfaces 4, but modalpanel renders div, its visibility may be controlled with simple js:
var isShown = false;
function onlinkclick() {
if(isShown) {
hideElement();
} else {
showElement();
}
isShown = !isShown;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.