jQuery MiniUI

标题: miniui 在iframe中的使用问题 [打印本页]

作者: 十三圆桌骑士 时间: 2018-6-6 14:45:13 标题: miniui 在iframe中的使用问题

本帖最后由十三圆桌骑士于 2018-6-6 14:45 编辑

使用一个新框架，前端使用了iframe，后续基本所有的操作（比例用户管理列表、角色管理列表等），都是在该iframe中操作。如果是使用miniul之前嵌入到iframe中，是可以正常使用的，样式也没有问题，但是如果是使用弹出框，弹出框使用的是jquery-ui.js的，并且跳出当前iframe，样式及js都出现问题了。

弹出框js关键代码为：
[attach]10958[/attach]
跳出了当前iframe ：window.parent.$.blockUI

弹出框中html miniui代码为：
[attach]10959[/attach]

显示效果能正常显示，如下图：
[attach]10961[/attach]

但是操作js即相应的事件，出现如下异常：
[attach]10960[/attach]

作者: 十三圆桌骑士 时间: 2018-6-6 14:46:17

不知道修改那个配置，或者什么兼容问题导致，请各位大侠给予支持

作者: 十三圆桌骑士 时间: 2018-6-6 14:49:28

~~~~~~图没显示正常~~~~~
弹出框js关键代码为：
function toAddPage(){
var dialogId = 'add-dialog-div'; // 弹窗ID
window.parent.$.blockUI({
// $.blockUI({
         showOverlay:true ,
         css:  {
            cursor:'auto',
            left

$(window.parent).width() - $("#" + dialogId).width())/2 + 'px',
width

("#" + dialogId).width()+'px',
top

$(window.parent).height()-$("#" + dialogId).height())/2 + 'px',
            position:'fixed', //居中
            border: '3px solid #FB9337'  // 边界
         },
         message: $('#' + dialogId),
         fadeIn: 500,//淡入时间
         fadeOut: 1000  //淡出时间
      });

}

弹出框中html miniui代码为：

   <div style="border-bottom:0px;width:100%;  ">
<a class="mini-button"  plain="true" iconCls="icon-add"
onclick="datagrid.StageAdd('CheckContextPersonnel')">新增</a> <a class="mini-button"
plain="true" iconCls="icon-remove"
onclick="datagrid.StageRemove('CheckContextPersonnel')">删除</a>
</div>
<div id="CheckContextPersonnel" class="mini-datagrid"
style="height:80%;border-bottom:0px;width: 100%;" allowCellEdit="true"
allowCellSelect="true" multiSelect="true" showPager="false"  allowCellWrap="true">
<div property="columns">
<div type="checkcolumn" width="30"></div>
<div field="idx" type="indexcolumn" header="序号"  headerAlign="center"  width="50"></div>
      <div field="contactName"  header="联系人姓名"  headerAlign="center"  width="100" allowInput="true" >
                    <input property="editor" class="mini-textbox" name="contactName" allowInput="true" />
      </div>
      <div field="telephone" header="电话" headerAlign="center" allowInput="true" width="100">
<input property="editor" class="mini-textbox" name="telephone" allowInput="true" />
</div>
<div field="position" header="职位" headerAlign="center" allowInput="true" width="100" >
<input property="editor" class="mini-textbox"  name="position" allowInput="true" />
</div>
</div>

</div>

作者: felt 时间: 2018-6-6 15:31:50

十三圆桌骑士发表于 2018-6-6 14:49
~~~~~~图没显示正常~~~~~
弹出框js关键代码为：
function toAddPage(){

请提供重现示例，能打开运行直接重现问题的，回复高级模式可以上传文件。

作者: 十三圆桌骑士 时间: 2018-6-6 15:41:08

felt 发表于 2018-6-6 15:31
请提供重现示例，能打开运行直接重现问题的，回复高级模式可以上传文件。 ...

[attach]10962[/attach]
文件如下，点击列表中的添加即可

作者: felt 时间: 2018-6-6 15:47:49

十三圆桌骑士发表于 2018-6-6 15:41
文件如下，点击列表中的添加即可

请提供一个能够直接运行的简单项目，包括你用的这些其他的js，我们是没这些东西的。

作者: 十三圆桌骑士 时间: 2018-6-6 15:52:37

本帖最后由 felt 于 2018-6-6 16:01 编辑

felt 发表于 2018-6-6 15:47
请提供一个能够直接运行的简单项目，包括你用的这些其他的js，我们是没这些东西的。 ...

文件太大了点，简单的包，得有20M，上传不了，能加我扣扣进行远程帮忙吗？

作者: felt 时间: 2018-6-6 16:32:52

十三圆桌骑士发表于 2018-6-6 15:52
文件太大了点，简单的包，得有20M，上传不了，能加我扣扣进行远程帮忙吗？ ...

远程无法调试，请简化页面来重现，我们要的不是你的整个项目

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)