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"));