miniui中如何在子页面中操作父页面中

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的子页面中的

你可能感兴趣的:(javascript)