miniui中如何在子页面中操作父页面中的tabs
解决如何在子页面中手动添加一个选项卡到tabs
控件上。
说明
默认的情况下,只有顶部的菜单才会在新页面打开时建立选项卡,但是view/home/index.html
中提供了一个方法,可以帮助我们来解决自主添加选项卡的问题。
主页面下的代码如下所示:
function opentab(menuId, menuName, action, menucode) {
//载入指定的页面到iframe
var id = "tab$" + menuId;
var tab = tabs.getTab(id);
if (!tab) {
tab = {};
tab._nodeid = menuId;
tab.name = id;
ids = id;
tab.title = menuName;
tab.showCloseButton = true;
tab.refreshOnClick = true;//点击tab页时可以刷新
tab.url = "../" + action + "?menuId=" + menuId + "&menucode=" + menucode;//传参到跳转页面
tabs.addTab(tab);
}
tabs.activeTab(tab);
}
方法的改动
因为我们的新的页面都是经过菜单的点击,然后在主框架的iframe
中进行显示,这里就设计到了DOM
的父页面与子页面的数据交互的问题。
子页面访问父页面时,在js中的变量前加上window.parent.
就能够在iframe
中访问父页面的元素了。
那上面的opentab
方法可以修改为:
//menuId 菜单的ID
//menuName 在miniui的tabs上显示的名称
//action 跳转到那个页面
//urlParam 配合action,共同组成新页面的url(带参数的url)
function opentabInParent(menuId, menuName, action, urlParam) {
//载入指定的页面到iframe
var id = "tab$" + menuId;
var tab = window.parent.tabs.getTab(id);
if (!tab) {
tab = {};
tab._nodeid = menuId;
tab.name = id;
window.parent.ids = id;
tab.title = menuName;
tab.showCloseButton = true;
tab.refreshOnClick = true;//点击tab页时可以刷新
tab.url = "../" + action +urlParam;//传参到跳转页面
window.parent.tabs.addTab(tab);
}
window.parent.tabs.activeTab(tab);
}
如何使用
使用起来就很简单了,将上面改写后的方法添加到需要操作tabs
的子页面中的<script>
中去。
在需要触发的地方调用该函数就可以了。
var username = "jsper";
opentabInParent(10000, "用户管理", "user/user_manage.html", "?username=" +jsper);
//这里的1000可以按照自己的排序规则进行设置
新页面参数的获取
这里新页面的参数的获取方式是:通过js来获取URL中的参数
- 添加一个javascript方法
//该方法用正则来提取url中的参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
}
- 调用方式
alert(getQueryString("username"));