设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 最新动态 - 技术支持 - 师徒架构班

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务 QQ: 3102411850、418799587 商务热线: 18611788525 客服电话: 010-64808099 官方邮箱: jeecgos@163.com

查看: 395|回复: 2

[JEECG] jeecg之弹窗插件lhgdialog小结

[复制链接]

414

主题

31

好友

1万

积分

管理员

Rank: 12Rank: 12Rank: 12

最佳新人 活跃会员 热心会员 推广达人 宣传达人 灌水之王 突出贡献 优秀版主 荣誉管理 JEECG团队成员

发表于 2018-11-29 16:17:51 |显示全部楼层

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

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

    核心代码:

  1. var mydialog = $.dialog({
  2.                         content: 'url:'+addurl,
  3.                         lock : true,
  4.                         zIndex: getzIndex(),
  5.                         width:width,
  6.                         height:height,
  7.                         title:title,
  8.                         opacity : 0.3,
  9.                         cache:false,
  10.                     ok: function(){
  11.                             iframe = this.iframe.contentWindow;
  12.                                 saveObj();
  13.                                 return false;
  14.                     },
  15.                     okVal: $.i18n.prop('dialog.submit'),
  16.                     cancelVal: $.i18n.prop('dialog.close'),
  17.                     cancel: true /*为true等价于function(){}*/
  18.                 });
复制代码

    可以查阅官方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可以发现类似的的调用方法:

QQ图片20181129161524.png


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

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

2)找到对应base中引入的skin-css,修改样式:

  1. /**此样式为弹窗title的颜色*/
  2. .ui_lt, .ui_rt, .ui_lb, .ui_rb, .ui_t, .ui_b {
  3.     background: #18a689!important;
  4. }
  5. /**此样式为弹窗确认按钮的样式*/
  6. input.ui_state_highlight {
  7.     background: #18a689 none repeat scroll 0 0;
  8.     border: 1px solid #18a689;
  9.     color: #fff;
  10.     text-shadow: 0 -1px 1px #1c6a9e;
  11.     height: 30px;
  12. }
复制代码

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



专业解答JEECG疑难杂症,JEECG常见问题汇总在:http://t.cn/RvYsEF6

0

主题

0

好友

21

积分

新手上路

Rank: 2

发表于 2018-12-11 20:12:24 |显示全部楼层
那如果非要改弹出框的样式要怎么做呢!
回复

使用道具 举报

3

主题

0

好友

55

积分

注册会员

Rank: 3Rank: 3

发表于 2018-12-28 15:36:36 |显示全部楼层
Lisazhao 发表于 2018-12-11 20:12
那如果非要改弹出框的样式要怎么做呢!

直接在主页面jsp写窗口的样式
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|JEECG官方网站-企业级JAVA快速开发平台 ( 京ICP备12013567号-3 )  

GMT+8, 2019-1-24 00:00 , Processed in 1.248002 second(s), 23 queries , Gzip On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部