jeecg之彈窗外掛程式lhgdialog小結

2022-02-21 23:50:02 字數 2897 閱讀 4761

說到彈窗,在jeecg中彈窗用到最多的地方無非是新增/編輯的彈窗。

1.列表頁面新增編輯按鈕觸發的彈窗即lhgdialog,不論是add/update,最終走的都是curdtools.js中的createwindow

核心**:12

3456

78910

1112

1314

1516

1718

var mydialog = $.dialog(,

okval: $.i18n.prop('dialog.submit'),

cancelval: $.i18n.prop('dialog.close'),

cancel:true/*為true等價於function(){}*/

});

可以查閱官方api了解每個引數的意義:

此處只解釋乙個屬性:content: 'url:'+addurl

如果addurl傳入的位址指向了乙個頁面,那麼這個新的頁面內容會以iframe的形式載入出來(需要注意的是彈窗本身並非iframe),那麼正題來了,既然他的真面目是iframe,那麼涉及iframe的傳值、方法呼叫用在此處均可。

a.父頁面呼叫子頁面的方法 $("#iframeid")[0].contentwindow.childmethod(); 通過獲取iframe的js物件呼叫其contentwindow.子頁面的方法

b.子頁面呼叫父頁面的方法 parent.parentmethod();

其實查閱lhgdialog api可以發現類似的的呼叫方法:

2.說完js接下來需要探索一下css的修改,因為此彈窗的樣式被改造過,所以按照官方文件可能有時達不到想要的效果,

1)每種風格有不同的樣式效果,檢視basetag**,可知每種風格下會引入哪些樣式。

2)找到對應base中引入的skin-css,修改樣式:12

3456

78910

1112

/**此樣式為彈窗title的顏色*/

.ui_lt, .ui_rt, .ui_lb, .ui_rb, .ui_t, .ui_b

/**此樣式為彈窗確認按鈕的樣式*/

input.ui_state_highlight

說到彈窗,在jeecg中彈窗用到最多的地方無非是新增/編輯的彈窗。

1.列表頁面新增編輯按鈕觸發的彈窗即lhgdialog,不論是add/update,最終走的都是curdtools.js中的createwindow

核心**:12

3456

78910

1112

1314

1516

1718

var mydialog = $.dialog(,

okval: $.i18n.prop('dialog.submit'),

cancelval: $.i18n.prop('dialog.close'),

cancel:true/*為true等價於function(){}*/

});

可以查閱官方api了解每個引數的意義:

此處只解釋乙個屬性:content: 'url:'+addurl

如果addurl傳入的位址指向了乙個頁面,那麼這個新的頁面內容會以iframe的形式載入出來(需要注意的是彈窗本身並非iframe),那麼正題來了,既然他的真面目是iframe,那麼涉及iframe的傳值、方法呼叫用在此處均可。

a.父頁面呼叫子頁面的方法 $("#iframeid")[0].contentwindow.childmethod(); 通過獲取iframe的js物件呼叫其contentwindow.子頁面的方法

b.子頁面呼叫父頁面的方法 parent.parentmethod();

其實查閱lhgdialog api可以發現類似的的呼叫方法:

2.說完js接下來需要探索一下css的修改,因為此彈窗的樣式被改造過,所以按照官方文件可能有時達不到想要的效果,

1)每種風格有不同的樣式效果,檢視basetag**,可知每種風格下會引入哪些樣式。

2)找到對應base中引入的skin-css,修改樣式:12

3456

78910

1112

/**此樣式為彈窗title的顏色*/

.ui_lt, .ui_rt, .ui_lb, .ui_rb, .ui_t, .ui_b

/**此樣式為彈窗確認按鈕的樣式*/

input.ui_state_highlight

jeecg之彈窗外掛程式lhgdialog小結

說到彈窗,在jeecg中彈窗用到最多的地方無非是新增 編輯的彈窗。1.列表頁面新增編輯按鈕觸發的彈窗即lhgdialog,不論是add update,最終走的都是curdtools.js中的createwindow 核心 var mydialog dialog okval i18n.prop dia...

vue彈窗外掛程式實戰

vue做移動端經常碰到彈窗的需求,這裡寫乙個功能簡單的vue彈窗 元件html結構,外層divposition fixed定位,內層div顯示彈窗內容 export default time data methods this.time hide popup.vue只有2個屬性 文字和顯示時間。元件...

vue彈窗外掛程式實戰

vue做移動端經常碰到彈窗的需求,這裡寫乙個功能簡單的vue彈窗 元件html結構,外層divposition fixed定位,內層div顯示彈窗內容 export default time data methods this.time hide popup.vue只有2個屬性 文字和顯示時間。元件...