EasyUI左右布居 - gaocong－IT工程師數位筆記本

文章出處

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首頁</title>
    <link href="Scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="Scripts/easyui/themes/icon.css" rel="stylesheet" />
    <link href="Scripts/easyui/demo/demo.css" rel="stylesheet" />
    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .accordion-body li a {
            text-decoration: none;
            color: #000;
            display: block;
            height: 22px;
            line-height: 22px;
        }

        .accordion-body ul li:hover {
            background: #D9D9D9;
        }

        .accordion-body ul li {
            padding: 6px 0 6px 20px;
        }

            .accordion-body ul li span {
                width: 16px;
                height: 16px;
                display: inline-block;
                margin-right: 8px;
                position: relative;
                top: 4px;
            }

        .index_zt {
            float: right;
            margin-right: 20px;
        }

            .index_zt li {
                float: left;
                padding-left: 20px;
                margin-left: 10px;
                line-height: 50px;
                height: 50px;
                color: #fff;
                font-size: 12px;
            }

                .index_zt li a {
                    text-decoration: none;
                    color: white;
                }

            .index_zt a:hover {
                background: #D9D9D9;
            }

        .icon-cubes {
            background: url(/mhims/img/index/cubes_all.png) no-repeat center center;
        }

        .icon-online {
            background: url(/mhims/img/index/online.png) no-repeat center left;
        }

        .icon-person-info {
            background: url(/mhims/img/index/person_info.png) no-repeat center left;
        }

        .icon-logout {
            background: url(/mhims/img/index/logout.png) no-repeat center left;
        }

        .icon-user-help {
            background: url(/mhims/img/index/user_help.png) no-repeat center left;
        }

        .centerHeader {
            text-align: center;
        }

        .bangzhu {
            padding: 5px;
        }

            .bangzhu b {
                line-height: 30px;
                height: 30px;
            }

            .bangzhu a {
                color: #333;
                text-decoration: none;
                line-height: 30px;
                display: block;
            }

                .bangzhu a:hover {
                    text-decoration: underline;
                    color: blue;
                }

        #leftTree ul li {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="Scripts/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <%--<div data-options="region:'north'" style="height:70px">
        <h1>宜昌市水文監測系統</h1>
    </div>--%>
    <div data-options="region:'south',split:false" style="height: 30px;">
    </div>
    <div data-options="region:'west',split:true,title:'菜單',collapsible:false" style="width: 250px;">
        <div id="leftTree" class="easyui-accordion" data-options="fit:true,border:false">
            <div title=" GIS可視化" data-options="iconCls:'icon-world'" style="overflow: auto; padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "GIS/Map.aspx");'>電子地圖
                    </li>
                </ul>
            </div>
            <div title=" 在線監視" data-options="iconCls:'icon-computer'" style="padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "/OnlineMonitoring/monitor_main.aspx");'>實時監視
                    </li>
                    <li onclick='$("#content_iframe").attr("src", "/OnlineMonitoring/SynthesizeMonitor.aspx");'>綜合監視
                    </li>
                    <li onclick='$("#content_iframe").attr("src", "/OnlineMonitoring/realTime_water_and_rain_situation.aspx");'>實時水雨情
                    </li>
                </ul>
            </div>
            <div title="數據預警" data-options="iconCls:'icon-exclamation'" style="padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "/DataWarning/realtime_warning.aspx");'>實時告警
                    </li>
                    <li onclick='$("#content_iframe").attr("src", "/DataWarning/history_warning.aspx");'>歷史告警
                    </li>
                </ul>
            </div>
            <div title=" 數據發布" data-options="iconCls:'icon-application_osx_cascade'" style="padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "/DataCheck/MonitoringDataOfAudit.aspx");'>監測數據審核
                    </li>
                    <li onclick='$("#content_iframe").attr("src", "/DataCheck/ContactManageMent.aspx");'>聯系人管理
                    </li>
                      <li onclick='$("#content_iframe").attr("src", "/DataCheck/SMSMgr.aspx");'>短信管理
                    </li>
                </ul>
            </div>
            <div title=" 數據分析" data-options="iconCls:'icon-chart_bar'" style="padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "DataAnalysis/pastdata.aspx");'>歷史數據
                    </li>
                </ul>
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "DataAnalysis/rainfall_data.aspx");'>雨量分析
                    </li>
                </ul>
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "DataAnalysis/waterlevel_data.aspx");'>水位分析
                    </li>
                </ul>
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "DataAnalysis/comparison_r_w.aspx");'>雨量水位比對分析
                    </li>
                </ul>
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "/DataWarning/history_warning.aspx");'>預警數據分析
                    </li>
                </ul>
            </div>
            <div title=" 基礎數據" data-options="iconCls:'icon-book'" style="padding: 10px;">
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "BaseInfo/monitoring_points_info.aspx");'>監測點管理
                    </li>
                </ul>
                <ul>
                    <li onclick='$("#content_iframe").attr("src", "BaseInfo/factor_info.aspx");'>監測因子管理
                    </li>
                </ul>
            </div>
            <div title=" 系統管理" data-options="iconCls:'icon-cog'" style="padding: 10px;">
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:' 主頁',iconCls:'icon-house'" style="padding: 0px; overflow: hidden">
        <iframe id="content_iframe" scrolling="yes" frameborder="0" src="GIS/Map.aspx" style="width: 100%; height: 100%;"></iframe>
    </div>
</body>
</html>