EasyUI左右布居
<!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 οnclick='$("#content_iframe").attr("src", "GIS/Map.aspx");'>電子地圖
??????????????????? </li>
??????????????? </ul>
??????????? </div>
??????????? <div title=" 在線監視" data-options="iconCls:'icon-computer'" style="padding: 10px;">
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "/OnlineMonitoring/monitor_main.aspx");'>實時監視
??????????????????? </li>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "/OnlineMonitoring/SynthesizeMonitor.aspx");'>綜合監視
??????????????????? </li>
??????????????????? <li οnclick='$("#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 οnclick='$("#content_iframe").attr("src", "/DataWarning/realtime_warning.aspx");'>實時告警
??????????????????? </li>
??????????????????? <li οnclick='$("#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 οnclick='$("#content_iframe").attr("src", "/DataCheck/MonitoringDataOfAudit.aspx");'>監測數據審核
??????????????????? </li>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "/DataCheck/ContactManageMent.aspx");'>聯系人管理
??????????????????? </li>
????????????????????? <li οnclick='$("#content_iframe").attr("src", "/DataCheck/SMSMgr.aspx");'>短信管理
??????????????????? </li>
??????????????? </ul>
??????????? </div>
??????????? <div title=" 數據分析" data-options="iconCls:'icon-chart_bar'" style="padding: 10px;">
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "DataAnalysis/pastdata.aspx");'>歷史數據
??????????????????? </li>
??????????????? </ul>
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "DataAnalysis/rainfall_data.aspx");'>雨量分析
??????????????????? </li>
??????????????? </ul>
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "DataAnalysis/waterlevel_data.aspx");'>水位分析
??????????????????? </li>
??????????????? </ul>
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "DataAnalysis/comparison_r_w.aspx");'>雨量水位比對分析
??????????????????? </li>
??????????????? </ul>
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "/DataWarning/history_warning.aspx");'>預警數據分析
??????????????????? </li>
??????????????? </ul>
??????????? </div>
??????????? <div title=" 基礎數據" data-options="iconCls:'icon-book'" style="padding: 10px;">
??????????????? <ul>
??????????????????? <li οnclick='$("#content_iframe").attr("src", "BaseInfo/monitoring_points_info.aspx");'>監測點管理
??????????????????? </li>
??????????????? </ul>
??????????????? <ul>
??????????????????? <li οnclick='$("#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>
總結
以上是生活随笔為你收集整理的EasyUI左右布居的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： app图标圆角角度_教你如何绘制风格统一
- 下一篇： easyui数据请求两个url_easy