• jeecg之弹窗插件lhgdialog小结


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

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

    核心代码:

    var mydialog = $.dialog({
    content: 'url:'+addurl,
    lock : true,
    zIndex: getzIndex(),
    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。
    ---------------------
    作者:JEECG开源社区
    来源:CSDN
    原文:https://blog.csdn.net/zhangdaiscott/article/details/84635376
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    CH Dream(侠客行)
    EDS(特征)
    EDS(架构)
    通过红外线设备进行TCP/IP互连
    CH Dream(道路)
    北漂实习那些话【一】
    程序员,有时我们应该懂得
    迷茫的IT小小鸟
    《PHP求职宝典》PHP语言基础笔记
    Android中Activity启动模式详解
  • 原文地址:https://www.cnblogs.com/Jeely/p/10984914.html
Copyright © 2020-2023  润新知