[英]Remove header from Primefaces Dialog
有没有办法从使用 Primefaces 对话框框架打开的对话框中删除标题? 我知道我可以设置一个自定义标题(请参阅代码片段),但是如何完全删除它? 我不想从所有对话框中删除它,所以覆盖 CSS 类.ui-dialog .ui-dialog-titlebar
不是一个选项。
Map<String,Object> options = new HashMap<String, Object>();
options.put("modal", true);
options.put("width", 640);
options.put("height", 340);
options.put("contentWidth", "100%");
options.put("contentHeight", "100%");
options.put("headerElement", "customheader");
RequestContext.getCurrentInstance().openDialog("viewCars", options, null);
以防万一有人偶然发现同样的问题。 您可以简单地在页面中覆盖:
.ui-dialog-titlebar{
display:none;
}
你可以在 jQuery 的Class Selector的帮助下做到这一点。
在要显示对话框的页面内添加以下 java 脚本
<script type="text/javascript">
function removeDialogHeader(xhr, status, args){
var showHeader=args.showDialogHeader;
if (!showHeader){
//jquery gets all elements with class name ui-dialog-titlebar
var elements= $(".ui-dialog-titlebar");
//to remove elements
elements.remove();
//or you can achive the same effect by inserting display:none into element style
//elements.css("display", "none");
}
}
</script>
修改托管 bean 方法以使标头可见性可配置
public void viewCars() {
Map<String,Object> options = new HashMap<String, Object>();
options.put("resizable", false);
//...
RequestContext.getCurrentInstance().openDialog("viewCars", options, null);
RequestContext.getCurrentInstance().addCallbackParam("showDialogHeader", false);
}
并且,假设您有 p:commandButton 来显示对话框,在 Ajax 完成后调用 JS 函数
<p:commandButton value="Show dialog" actionListener="#{testBean.viewCars()}" oncomplete="removeDialogHeader(xhr, status, args);"/>
“删除标题”是什么意思? 可能是“不显示标题”? 如果是这样,您可以定义一个 CSS 类,如:
.dialog-no-header.ui-dialog .ui-dialog-titlebar {
display: none;
}
并在目标对话框中使用它:
<p:dialog class="dialog-no-header" ...
只需使用p:dialog
的showHeader
属性,如下例所示:
<p:dialog widgetVar="exampleWidget" showHeader="false">
<!-- your content -->
</p:dialog>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.