常见后台jquery ui tabs方法实战

2021-12-23 05:09:31
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>童梦无忧后台</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/easy_ui/js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/easy_ui/js/easyui-lang-zh_CN.js"></script>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="js/easy_ui/css/easyui.css" />
        <!--<link rel="stylesheet" href="css/homepage.css" />
        <link rel="stylesheet" href="css/common.css" />-->
        <style>
            body {
                overflow: hidden;
                height: 100%;
            }

            .panel {
                height: 100%;
                overflow-y: auto;
            }

            html,
            body {
                height: 100%;
            }

            .container {
                height: 100%;
            }

            .all-title {
                margin-left: 350px;
                font-size: 14px;
                line-height: 48px;
            }

            .left_box {
                width: 200px;
                font-size: 14px;
                background: blueviolet;
                color: red;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                overflow-y: auto;
                /*出现滚动条*/
            }

            .right_box {
                margin-left: 200px;
                height: 100%;
            }

            .left_highlight {
                background: blue;
                height: 30px;
                display: block;
                line-height: 30px;
                padding-left: 20px;
                overflow: hidden;
            }

            .son_menu {
                background: green;
            }

            .son_menu li {
                height: 40px;
                line-height: 40px;
                color: #fff;
                padding-left: 59px;
                border-bottom: 1px solid red;
            }

            .son_menu li a {
                color: #fff;
            }

            .son_menu li.selected {
                background: brown;
            }

            .workstation {
                height: 48px;
                width: 100%;
                overflow: hidden;
                background: palevioletred;
            }

            .userInfo {
                width: 350px;
                font-size: 14px;
                line-height: 48px;
                color: black;
                margin: 0 auto;
                border: 1px solid red;
            }

            .quit {
                margin-left: 30px;
                font-size: 16px;
                cursor: pointer;
                border: 1px solid blue;
            }

            .quit i {
                margin-right: 5px;
                margin-top: 2px;
            }

            .tabs-panels {
                border-color: blue;
                height: 800px;
            }

            #tt {
                width: 100%;
                height: 700px;
                overflow-y: auto;
            }
            /*自定义 easy UI */


            .tabs-header,
            .tabs-tool {
                background: peru;
            }

            div.tabs-header {
                border: 1px solid green; 
            }
            ul.tabs {
                border-bottom: 1px solid #cacacd;
                height: 34px;
            }

            .tabs li.tabs-selected a.tabs-inner {
                background: pink;
                color: black;
            }

            .tabs li a.tabs-inner {
                background: #f2f2f2;
                color: #5a5a5a;
                border: 1px solid red;
                padding: 0 25px;
                border-radius: 0px;
            }

            .tabs li a.tabs-inner:hover {
                background: yellow;
            }

            .tabs li.tabs-selected a.tabs-inner {
                border: 1px solid red;

            }
        </style>
    </head>

    <body>
        <div class="containers">
            <div class="left_box">
                <ul class="left_ul">
                    <li class="left_list">
                        <span class="left_highlight">APP版本管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('添加APPle','versions_add.html')">添加APP版本</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('APP版本列表','https://www.baidu.com/')">APP版本列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">消息管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('消息推送','')">消息推送</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">帖子管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('主帖列表','invitation.html')">主帖列表</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('分配推荐','')">分配推荐</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">聊天室管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('聊天室管理','')">聊天室管理</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">漂流瓶管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('问题列表','bottle.html')">问题列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">预约管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('预约列表','')">预约列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">文章管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('文章上传','')">文章上传</a>
                            </li>
                            <li>
                                <a href="javascript:;" onclick="addTabs('文章列表','')">文章列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">提现管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('提现列表','')">提现列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">举报管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('举报列表','')">举报列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">用户管理</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('用户列表','')">用户列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="left_list">
                        <span class="left_highlight">设置</span>
                        <ul class="son_menu">
                            <li>
                                <a href="javascript:;" onclick="addTabs('修改密码','')">修改密码</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right_box">
                <div class="workstation">
                    <!--<div class="fl" style="margin-left: 350px">-->
                    <!--童梦无忧后台-->

                    <!--</div>-->
                    <div class="userInfo">
                        当前登录用户：<span>sdfasd</span>
                        <span class="quit"><i class="glyphicon glyphicon-off"></i>退出</span>
                    </div>
                </div>
                <div id="tt">

                </div>
            </div>

        </div>

        <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->

        <script type="text/javascript">
            $(function() {
                var heightSon = document.body.scrollHeight - 48;
                $(".panel-body").height(heightSon);
                $(".tabs-panels").height(heightSon);
                $("#tt").height(heightSon);
                $(".mainweb").height(heightSon - 30);
                    var url1 = 'https://www.baidu.com/';
                    var heightSon = document.body.scrollHeight - 48;
                    $("#tt").tabs({});
                    //默认打开百度
                    var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url1 + '" style="width:100%;height:100%;"></iframe>';
                    $('#tt').tabs('add', {
                        title: '百度，你好',
                        content: content,
                        closable: true,
                    });
                    $(".son_menu li").click(function() {
                        $(this).addClass("selected").siblings("li").removeClass("selected");
                        $(this).parents(".left_list").siblings(".left_list").find(".son_menu").children("li").removeClass("selected");
                    })
                })
                //添加tabs
            function addTabs(title, url) {
                                if ($('#tt').tabs('exists', title)) {    //判断是否存在此选项卡
                                    $('#tt').tabs('select', title);
                                    $('#tt').tabs('update', {
                                        tab: select
                                    });
                                } else {
                                    var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
                                    $('#tt').tabs('add', {
                                        title: title,
                                        content: content,
                                        closable: true,
                                    });
                                }
//              var content = '<iframe id="mainweb" class="mainweb" scrolling="scroll" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
//              $('#tt').tabs('add', {
//                  title: title,
//                  content: content,
//                  closable: true,
//              });
            }

            //全部显示
            var heightSon = document.body.scrollHeight - 48;

            function modified(wer) {
                $(".panel-body").height(heightSon);
                $(".tabs-panels").height(heightSon);
                $("#tt").height(heightSon);
                $(".mainweb").height(heightSon - 30);
            }
        </script>
    </body>

</html>
码农公寓

相关文章
