jeecg之弹窗插件lhgdialog小结

说到弹窗，在jeecg中弹窗用到最多的地方无非是新增/编辑的弹窗。

1.列表页面新增编辑按钮触发的弹窗即lhgdialog，不管是add/update，最终走的都是curdtools.js中的createwindow

核心代码：

var mydialog = $.dialog({
			content: 'url:'+addurl,
			lock : true,
			zIndex: getzIndex(),
			width:width,
			height:height,
			title:title,
			opacity : 0.3,
			cache:false,
		    ok: function(){
		    	iframe = this.iframe.contentWindow;
				saveObj();
				return false;
		    },
		    okVal: $.i18n.prop('dialog.submit'),
		    cancelVal: $.i18n.prop('dialog.close'),
		    cancel: true /*为true等价于function(){}*/
		});

能够查阅官方api了解每一个参数的意义：http://www.lhgdialog.com/api/

此处只解释一个属性：content: 'url:'+addurl

若是addurl传入的地址指向了一个页面，那么这个新的页面内容会以iframe的形式加载出来（须要注意的是弹窗自己并不是iframe）,那么正题来了，既然他的真面目是iframe，那么涉及iframe的传值、方法调用用在此处都可。

a.父页面调用子页面的方法 $("#iframeId")[0].contentWindow.childMethod(); 经过获取iframe的js对象调用其contentWindow.子页面的方法

b.子页面调用父页面的方法 parent.parentMethod();

其实查阅lhgdialog api能够发现相似的的调用方法：

api：内容页中调用窗口实例对象接口
说明：此对象属性是附加在iframe元素的一个属性，在iframe方式加载的内容页中经过调用此函数来获取窗口的实例对象，示例：var api = frameElement.api; 注：此句代码是加在iframe方式加载的内容页中的，必定要注意
opener：加载窗口组件页面的window对象
说明：此属性主要用在iframe方式加载的内容页中，示例：var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的window对象
iframe：iframe方式加载内容的iframe对象
说明：此属性主要用于在窗口组件调用页面操做窗口中的iframe对象
content：iframe方式加载内容页的window对象
说明：此属性主要用于在窗口组件调用页面操做窗口中的window对象，示例：var dg = $.dialog({'url:content.html',init:function(){ if( this.content.document.body ) alert('窗口内容页加载完成'); });

2.说完JS接下来须要探索一下css的修改，由于此弹窗的样式被改造过，因此按照官方文档可能有时达不到想要的效果，

1.每种风格有不一样的样式效果，查看baseTag代码，可知每种风格下会引入哪些样式。

2.找到对应base中引入的skin-css，修改样式：

/**此样式为弹窗title的颜色*/
.ui_lt, .ui_rt, .ui_lb, .ui_rb, .ui_t, .ui_b {
    background: #18a689!important;
}

/**此样式为弹窗确认按钮的样式*/
input.ui_state_highlight {
    background: #18a689 none repeat scroll 0 0;
    border: 1px solid #18a689;
    color: #fff;
    text-shadow: 0 -1px 1px #1c6a9e;
    height: 30px;
}

3.插件位置：新版jeecg中lhgdialog被移至jeecg-common-plugin-ui项目中去了，也就是说在jeecg项目中没法直接修改lhgdialog相关的js/css。