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。