制作全局模式窗口

最新推荐文章于 2024-12-22 16:44:00 发布

原创最新推荐文章于 2024-12-22 16:44:00 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#richfaces #jQuery #CSS #脚本 #XHTML #ViewUI

Richfaces 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用JSF和RichFaces创建一个全局模式窗口，包括窗口模板的创建、脚本文件编写、样式调整及页面调用方法。通过具体代码示例展示了模式窗口的初始化、显示、隐藏等功能。

1、首先创建全局模式窗口模版（实例参考globalModalPanel.xhtml）
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:s="http://jboss.com/products/seam/taglib">
<a4j:loadStyle src="/img/images/style.css" />
<a4j:form ajaxSubmit="false" ajaxSingle="true">
<a4j:region renderRegionOnly="false">
<a4j:jsFunction name="showLoading" action="#{common.globalMP.init('globalMP_tsck', '/blank.xhtml')}" reRender="#{common.globalMP.reRender}"/>
</a4j:region>
</a4j:form>
<rich:modalPanel id="globalMP" resizeable="fasle" autosized="true" top="50" styleClass="mp1" onshow="removeModalPanelTopFixedForIE6(this)">
<f:facet name="header">
<a4j:outputPanel layout="none">
<h:outputText id="globalMPTitle" value="#{common.globalMP.title}" style="margin-left:3px;vertical-align: middle;"/>
<a4j:status id="globalMPLoading" for="globalMPRegion" startText="#{messages.globalMP_zzcl}" startStyle="display:block;text-align:center;color:#FF8080;" />
</a4j:outputPanel>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/img/images/guanbi.gif" style="cursor: hand" onclick="globalMP.hide()" title="#{messages.globalMP_esc}"/>
</h:panelGroup>
</f:facet>
<span class="mpMessage" />
<a4j:region id="globalMPRegion">
<s:div id="globalMPInclude">
<ui:include src="#{common.globalMP.uri}" />
<s:div styleClass="contentLoading" rendered="#{common.globalMP.uri == '/blank.xhtml'}">#{messages.globalMP_zzjz}</s:div>
<div class="clear" />
</s:div>
</a4j:region>
</rich:modalPanel>
<script type="text/javascript">
//<![CDATA[
globalMP.init();
//]]>
</script>
</ui:composition>

2、写脚本文件（public.js）
/**
* 全局模式窗口定义
*/
var globalMP = {
id : "globalMP",

init: function() { //初始化模式窗口
this.comp = document.getElementById(this.id).component;
},

show: function(width,height) { //显示模式窗口，并设置高度和宽度
width = width || 450;
height = height || 170;
Richfaces.showModalPanel(this.id, {width: width, height :height});
},

hide: function() { //隐藏模式窗口
showLoading(); //关闭模式窗口的时候清空模式窗口
this.comp.hide();
},

reset: function() { //重新加载模式窗口
this.comp.hide();
this.comp.show();
},

getContainer: function() { //获取模式窗口的id
return this.comp.id;
}

};

//ESC关闭弹出层
jQuery(document).keydown(function(event) {
//按下ESC按钮
if(event.keyCode == 27) {
globalMP.hide();
}
});
3、修改richfaces原始样色（theme.css）
.mp1 .rich-mpnl_panel { //控制模式窗口可滚动
position: absolute;
}
.mp1 .rich-mpnl-header { //头部样色
background-image:url(../img/images/title.gif);
border-width: 0;
text-align: left;
height:20px;
vertical-align: middle;
}
.mp1 .rich-mp-content { //内容样色
background:url(../img/images/context.gif) repeat-x white;
border:2px #6F99D5 solid;
background-position:bottom;
margin:0 auto;
}
4、页面调用
<a4j:region renderRegionOnly="false">
<a4j:commandLink action="#{common.globalMP.init('system_xxxx', '/business/warehouse/PssKcxx.xhtml')}" value="#{messages.View}" onclick="globalMP.show()" eventsQueue="queue" reRender="#{common.globalMP.reRender}" id="view" rendered="#{s:hasPermission('kcgl', 'VIEW')}">
<f:param name="pssKcxxKcbh" value="#{_pssKcxx.kcbh}" />
</a4j:commandLink>
</a4j:region>
注：<a4j:region renderRegionOnly="false"/>只提交该按钮，不刷新其它
eventsQueue=“queue” 为队列，使所有的链接都在同一个队列里面，避免队列冲突
<f:param name="pssKcxxKcbh" value="#{_pssKcxx.kcbh}" /> 模式窗口传递参数，该参数必须在调用该模式窗口的page配置页面中配置