EasyUI左右布居

最新推荐文章于 2025-08-23 08:00:22 发布

转载最新推荐文章于 2025-08-23 08:00:22 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaocong/p/5740932.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个用于宜昌市水文监测系统的界面设计方案，包括GIS可视化、在线监视等功能模块，通过易用的UI组件实现高效的数据管理和操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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(/https/blog.csdn.net/mhims/img/index/cubes_all.png) no-repeat center center;
        }

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

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

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

        .icon-user-help {
            background: url(/https/blog.csdn.net/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>