【已解决】js中的createWindow的用法和获取对应的关闭窗口的事件

【背景】

折腾:

【规避解决】KindEditor第二次加载时无法加载已有html内容

期间,需要去搞懂:

js中的createWindow是如何使用的,语法如何

以及关闭窗口时候对应的事件是什么->便于后期加入销毁kindeditor的代码

【折腾过程】

1.先去搞懂:

createWindow(contextId, '修改团购描述',  700, 500, 'view/store/form/goodsdetaileditform.html');

的具体含义。

搜:

js createWindow

参考:

createWindow method

Basic Example to switch windows » Community Questions & Answers » Appcelerator Developer Center

javascript – jsdom document.createWindow() returns empty for non-empty document – Stack Overflow

inside createWindow.url file, can’t use add method to createWindow » Community Questions & Answers » Appcelerator Developer Center

结果都找不到具体的解释

2.突然想到,难道

createWindow不是纯js的函数,而是Jquery或者是easyUI的函数?

easyui createwindow

JQuery createwindow

createwindow

还是没有找到真正的对应的函数。

3.在整个项目的代码中搜:

createWindow

结果:

才找到自己内部文件:

index.jsp

的函数:

  function createWindow(contextId, title, width, height, url){
   var win = 'win'+$.now();
   cur_open_windowId = '#'+win;
   
   $(contextId).empty();
   $(contextId).append('<div id="'+win+'" style="text-align:center;margin:0 auto; vertical-align:middle; display: table-cell; "></div>');
   $(cur_open_windowId).window({
    width:width,
    height:height,
    collapsible:false,
    minimizable:false,
    maximizable:false,
    title:title,
    modal:true
   });
   $(cur_open_windowId).window('refresh', url);
  }

至此才明白:

原来此处的createWindow是自己项目内部自己写的函数啊。。。(不是我写的。)

4.接着继续去研究,如何获得窗口关闭时候的事件。

看到对应代码中有调用window,所以去搜:

easyUI window

参考:

JQuery EasyUI window 用法 – 摩根船长 – 博客园

window – Documentation – jQuery EasyUI

看到了很多的函数,比如:

  • onBeforeClose
  • onClose
  • onBeforeDestroy
  • onDestroy

等等函数,就是我此处所想要的了。

其他还有很多对应的事件:

  • onLoad
  • onBeforeOpen
  • onOpen

5.对应的窗口关闭事件,对应动作是:

  <div style="text-align:center;padding-bottom: 10px;">
   <a href="javascript:void(0)" class="easyui-linkbutton" style="width: 100px;" onclick="$(cur_open_windowId).window('close')">关闭</a>
  </div>

对应的事件,则是参考了:

KindEditor 销毁与自动高度冲突解决 – 皓月青峰 – 博客园

应该是:

   $(cur_open_windowId).window({
    width:width,
    height:height,
    collapsible:false,
    minimizable:false,
    maximizable:false,
    title:title,
    cache: false,
    modal:true,
               
                onBeforeClose: function () {
                    KindEditor.remove('textarea[name="Contents"]');  //当窗口关闭前销毁KindEditor
                }
   });
   $(cur_open_windowId).window('refresh', url);

 

【总结】

关于easyUI的window,实际上是JQuery的window控件,其属性和基本的用法,可以参考官网的:

window – Documentation – jQuery EasyUI

而关于窗口关闭(和销毁)的事件是:

  • onBeforeClose
  • onClose
  • onBeforeDestroy
  • onDestroy

具体的写法就是:

$("#window_id").window({
    width:width,
    height:height,
    ......
    ,
    onBeforeClose: function () {
        //add code here, do what you want
    }
});

其他的更多的函数和属性,可以参考:

JQuery EasyUI window 用法 – 摩根船长 – 博客园



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量