LayOutTest.html

huangyongxing310

浏览: 498561 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

miniui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--miniui相关文件-->
    <script src="../miniui/scripts/boot_3.7.js" type="text/javascript"></script>
    <script src="../miniui/scripts/searchbox/js/grid_id_define.js"
            type="text/javascript"></script>
    <link href="../miniui/scripts/miniui_3.7/themes/default/miniui.css" rel="stylesheet" type="text/css"/>
    <link href="../miniui/scripts/miniui_3.7/themes/default/small-mode.css" rel="stylesheet" type="text/css"/>
    <link href="../miniui/scripts/miniui_3.7/themes/bootstrap/skin.css" rel="stylesheet" type="text/css"/>
    <!--miniui相关文件-->

    <link href="../miniui/css/demo.css" rel="stylesheet" type="text/css"/>


</head>
<style type="text/css">
    body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }
</style>


<body>

<!--<style type="text/css">-->
<!--    body{-->
<!--        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;-->
<!--    }-->
<!--</style>-->
<!--<div style="padding:50px;padding-left:100px;padding-bottom:0;">-->
<div class="mini-fit">
    <div id="layout1" class="mini-layout" style="width:100%;height:100%;">
        <!--    //==============用户信息栏-->
        <div title="north" region="north" style="background-color: #7de3e3;" height="80" showSplitIcon="false"
             showHeader="false" allowResize="false">
            <h1 style="margin:0;padding:25px;cursor:default;font-family:微软雅黑,黑体,宋体;">应用管理系统 V2</h1>
            <div style="position:absolute;top:28px;right:10px;">
                <!--            <a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onQuickClick" plain="true">快捷</a>-->
                <!--            <a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" plain="true">首页</a>-->
                <!--            <a class="mini-button mini-button-iconTop" iconCls="icon-date" onclick="onClick" plain="true">消息</a>-->
                <!--            <a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" plain="true">设置</a>-->
                <span class="separator"></span>
                <span id="userNameId">测试人员</span>
                <span class="separator"></span>
                <a id="setId" class="mini-button " iconCls="icon-edit" onclick="onClickFun()" plain="true">设置</a>
                <span class="separator"></span>
                <a id="exitId" class="mini-button " iconCls="icon-close" onclick="onClickFun()" plain="true">退出</a>
            </div>
        </div>

        <div title="south" region="south" showSplit="false" showHeader="false" height="30">
            <div style="line-height:28px;text-align:center;cursor:default">Copyright © 上海普加软件有限公司版权所有</div>
        </div>

        <!--    //==============左侧菜单栏-->
        <div title="west" region="west" width="200" expanded="true" showSplitIcon="false"
             showHeader="false" showProxyText="true">
            <div id="leftTree" class="mini-outlooktree" url="outLookTree.txt" onnodeclick="onNodeSelect"
                 textField="text" idField="id" parentField="pid" showArrow="true"
            >
            </div>
        </div>


        <!--    //==============内容显示栏-->
        <!--    onactivechanged="onTabsActiveChanged"-->
        <div title="center" region="center">
            <div id="mainTabs" class="mini-tabs" style="width:100%;height:100%;"
                 plain="false" contextMenu="#tabsMenu"
            >
                <div title="首页" url="https://www.baidu.com/index.php" showCloseButton="false">
                </div>
            </div>
        </div>
    </div>
</div>

<!--//=============tabsMenu-->
<ul id="tabsMenu" class="mini-contextmenu" onbeforeopen="onTabsMenuBeforeOpen">
    <li onclick="closeTabFun">关闭标签页</li>
    <li onclick="closeAllButFun">关闭其他标签页</li>
    <!--    <li onclick="closeAll">关闭所有标签页</li>-->
</ul>

<!--</div>-->
<script type="text/javascript">

    mini.parse(); //解析HTML为mini控件

    // var tabs = mini.get("mainTabs");

    var currentTab = null;


    //增加一个Tab
    function addTabFun(tabsId, title, url) {
        var tabs = mini.get(tabsId);

        var tabTemp = checkSameTabFun("mainTabs", title);
        if (!tabTemp.title) {
            //add tab
            var tab = {};
            tab.title = title;
            tab.name = title;
            tab.url = url;
            tab.showCloseButton = true;

            tab = tabs.addTab(tab);
            tabs.activeTab(tab);
        } else {
            tabs.activeTab(tabTemp);
        }
    }

    //节点选中事件
    function onNodeSelect(e) {
        var node = e.node;
        var isLeaf = e.isLeaf;
        if (isLeaf) {

            //子节点才生成Tab
            addTabFun("mainTabs", node.text, node.url);

        }
    }

    //checkSameTab
    function checkSameTabFun(tabsId, title) {
        var tabs = mini.get(tabsId);

        var tabArray = tabs.getTabs();

        var tabLen = tabArray.length;

        if (tabLen == 0) {
            return {};
        }

        for (var i = 0; i < tabLen; i++) {
            var tab = tabArray[i];

            if (tab.title == title) {
                return tab;
            }
        }
        return {};
    }

    //
    function onTabsMenuBeforeOpen(e) {
        var tabs = mini.get("mainTabs");

        currentTab = tabs.getTabByEvent(e.htmlEvent);
        if (!currentTab) {
            e.cancel = true;
        }

        tabs.activeTab(currentTab);
    }


    ///////////////////////////
    function closeTabFun() {
        var tabs = mini.get("mainTabs");
        tabs.removeTab(currentTab);
    }

    function closeAllButFun() {
        // tabs.removeAll(currentTab); //删除所有子tab,currentTab除外
        //首页也不要删除

        var tabs = mini.get("mainTabs");
        var tabArray = tabs.getTabs();
        var tabLen = tabArray.length;

        // var tabArrayTemp = [];

        if (tabLen == 0) {
            return;
        }

        for (var i = 0; i < tabArray.length;) {
            var tab = tabArray[i];

            if (!tab) {
                i++;
                continue;
            }

            if (tab.title == currentTab.title) {
                i++;
                continue;
            }

            if (tab.title == "首页") {
                i++;
                continue;
            }

            tabs.removeTab(tab.name);

        }


    }


</script>


</body>
</html>

miniUITest_-_副本.zip (51.5 KB)
下载次数: 0

miniUITest.zip (5.8 MB)
下载次数: 4

分享到：

smb上传下载文件 | 前端实现从剪贴板中获取数据

2019-06-20 18:31
浏览 336
评论(0)
分类:互联网
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

LayOutTest.html

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

LayOutTest.html

评论

发表评论

相关推荐

批量粘贴公用方法

miniUITest

miniui 技术点

最近访客更多访客>>