Jsf 2 如何在rich:弹出面板窗口中添加最小化和最大化按钮
如下图所示,我们如何在richface弹出面板的页面右上角添加最小化和最大化按钮 使用下面的代码,我们可以在右上角添加“X”,单击此按钮,弹出窗口将关闭Jsf 2 如何在rich:弹出面板窗口中添加最小化和最大化按钮,jsf-2,richfaces,popuppanel,Jsf 2,Richfaces,Popuppanel,如下图所示,我们如何在richface弹出面板的页面右上角添加最小化和最大化按钮 使用下面的代码,我们可以在右上角添加“X”,单击此按钮,弹出窗口将关闭 <f:facet name="controls"> <h:outputLink value="#" onclick="#{rich:component('simplePopup2')}.hide(); return false;"> X </h:outputL
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('simplePopup2')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
X
请建议我。可以使用两个自定义函数扩展jQuery,以实现最大化/最小化
(function($) {
$.fn.maximize = function() {
var $this = $(this);
var viewport = $(window);
var bt = $this.css('border-top-width');
var br = $this.css('border-right-width');
var bb = $this.css('border-bottom-width');
var bl = $this.css('border-top-width');
bt = bt ? parseInt(bt) : 0;
br = br ? parseInt(br) : 0;
bb = bb ? parseInt(bb) : 0;
bl = bl ? parseInt(bl) : 0;
$this.css({
width: (viewport.width() - (bl + br)) + 'px',
height: (viewport.height() - (bt + bb)) + 'px',
top: 0,
left: 0
});
$this.find('div.rf-pp-cnt-scrlr').css({
width: 100 + '%',
height: 100 + '%'
});
}
$.fn.minimize = function() {
var $this = $(this);
var viewport = $(window);
$this.css({
width: '170px',
height: '20px',
top: (viewport.height() - 20),
left: 0
});
$this.find('div.rf-pp-shdw').hide();
$this.find('div.rf-pp-cnt-scrlr').hide();
}
})(jQuery);
比你能用richfaces popupPanel更有用
<rich:popupPanel id="window">
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.minimize(); return false;">
<h:outputText value="Minimize"/>
</h:outputLink>
<h:outputText value=" | "/>
<h:outputLink value="#" onclick="#{rich:component('window')}.cdiv.maximize(); return false;">
<h:outputText value="Maximize"/>
</h:outputLink>
<h:outputText value=" | "/>
<h:outputLink value="#" onclick="#{rich:component('window')}.hide(); return false;">
<h:outputText value="Close"/>
</h:outputLink>
</f:facet>
<h:outputText value="Window"/>
</rich:popupPanel>
在调用最大化/最小化函数之前,请注意.cdiv
。这是为了引用jQuery对象本身,以便能够访问新函数
上面提供的函数只是一个概念证明,因此您必须对它们进行扩展,以便能够恢复到原始大小等等。嘿,谢谢,但我们现在不应该使用JQuery。有没有像javascript或JSF函数这样的其他方法可以带来这些选项。@Jaikratingh如果你使用Richfaces,那么jQuery就是现成的。否则,您可以创建与将cdiv作为参数的常规js函数相同的函数。cdiv将是一个Jquery对象,因此您必须从中提取DOM对象。请参阅jQuery文档,了解如何执行此操作。