EasyUI-子页面增加显示tabs的一个问题
EasyUI 一个 显示 页面 增加 tabs 问题
2023-09-11 14:17:10 时间
在父页面点个链接能动态看到子页面的情况太简单,请看easyUI官网:http://www.jeasyui.com/tutorial/layout/tabs2.php
现在说的是在子页面点个按钮也能触发增加子页面的情况。
情景是,在父页面上有个div如:
<div class="easyui-tabs" id="main" fit="true" border="false"> <div title="Welcome" iconCls="icon-page" style="padding:20px;overflow:hidden;"> </div> </div>
在子页面上有个
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="testAddSubPage('new tab','http://www.baidu.com')">
test add subpage
</a>
现在想点这个链接能弹出一个新的tab,tab里面的内容是百度主页。关键的问题来了,就是testAddSubPage这个function怎么写。
直接这样写是不行的:
function testAddSubPage(title,url){ var parentMain = window.parent.document.getElementById("main"); var $main = $(parentMain); var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $main.tabs('add',{ title:title, content:content, closable:true } ); }
这里虽然可以取到父页面那个id为main的div对象,但是把这个dom对象转化为jquery对象$main之后,$main.tabs('add',{...})这个方法死法报错不能通过。
改正的关键是用top.jQuery这个函数,这个函数具体出外我忘记了,用法看似是取得整个父页面对象,正确是写法:
function testAddSubPage(title,url){ var jq = top.jQuery; if (jq("#main").tabs('exists', title)){ jq("#main").tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; jq("#main").tabs('add',{ title:title, content:content, closable:true }); } }
其中#main是tabs的id
相关文章
- abp(net core)+easyui+efcore实现仓储管理系统——入库管理之一(三十七)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之九(三十五)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之三(二十九)
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之二(二十八)
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理八(二十六)
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理三 (二十一)
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
- abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务(五)
- abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
- EasyUI - panel 高度自适应
- [转]浅谈jQuery EasyUI的属性设置
- EasyUI-window包含一个iframe,在iframe中如何关闭window
- EasyUI-DataGrid动态合并单元格
- 《jQuery EasyUI开发指南》——10.4 迭代开发
- EasyUI左右布居
- easyui datagrid 动态加入、移除editor
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
- vue 引用 vue版本的 easyui
- easyui_动态添加隐藏toolbar按钮
- SpringMVC整合fastjson、easyui 乱码问题