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 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>

EasyUI左右布居的更多相关文章

css世界的学习笔记
1.+选择器div+p:选择紧接在div后的所有p元素: 2.导航的样式:(注意:不给a设置width:100%;只是需要display:block;利用流布居:) <h4>无宽度,借助流 ...
MS入门学习笔记
1.建立晶体:选择晶系,添加原子:2.导入系统晶体文件:3.建立分子molecule,画原子:4.计算简单分子molecule:注意事项: 1)做了一个H2O分子,接下来要做一个“立体壳子”,因为CA ...
easyui中datagrid标题居中内容居左实现方式
easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好.这个时候就需要我们自己动手来修改easyui的源码了.easyu ...
关于EasyUI datagrid 表头居中数据列内容居右或者居左
cell.css("text-align",(col.halign||col.align||"")); 这里有个属性挺眼熟 : col.align 前面还有一个 ...
Easyui设置动态表格,动态导出数据实例,附Demo
最近开发的过程中碰到一个客户提出的需求,一个指定的页面导出需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 总结一下可以称为一个列表数据 ...
easyui中对数据的判断来显示，formatter控制
需求效果图:(把编辑按钮根据信息是否发布,来选择显示与不显示,已发布的不能够进行编辑所以不显示) 上图中的flag为发布标识,flag值1为已发布,值2为未发布思路:第一想到的是给这个button按 ...
SNF快速开发平台MVC-瀑布式分页组件
1. 瀑布式分页目前已经比较流行了,以往的这种点击分页已经不能满足广大网民的需求了.像百度图片等等,网站都有滚动滚轮直接分页的功能,这样体验也确实好了不少,所以我们也决定在我们的框架内进行集成此 ...
前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
前端框架 EasyUI （1）熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

随机推荐

GET RESTful With Python
Python调用RESTful:http://blog.akiban.com/get-restful-with-python/ 本文就是参考该英文做了一下试验,后续补充一下翻译. This post ...
Core Data NSAttribute Type 数据类型
一:使用Core Data 的可用数据类型 NSAttributeType Defines the possible types of NSAttributeType properties. Thes ...
算法笔记_062:蓝桥杯练习最小乘积(基本型)(Java)
目录 1 问题描述 2 解决方案 1 问题描述问题描述给两组数,各n个. 请调整每组数的排列顺序,使得两组数据相同下标元素对应相乘,然后相加的和最小.要求程序输出这个最小值. 例如两组数分别为 ...
vue 项目心得
v-bind 数据绑定可以简写成 : 通过 props 将数据对象传给组件 export default { props: { seller: { type: Object } } } crea ...
TCP 的那些事儿（上） SACK
http://blog.csdn.net/woxiaozhi/article/details/27328557 文章太好了,转载过啦这篇文章分为上下两篇确实不错所以存在这里收藏 TCP是一个 ...
HTML-HTML5+CSS3权威指南阅读（三、CSS选择器）
1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...
Nginx常用配置整理
1.全局块:配置影响nginx全局的指令.一般有运行nginx服务器的用户组,nginx进程pid存放路径,日志存放路径,配置文件引入,允许生成worker process数等. worker_pro ...
nginx 多域名跨域
当浏览器发起ajax请求到其他域名时,会出现跨域的问题,在nginx上的解决方案是配置Access-Control-Allow-Origin来解决,此参数只允许配置单个域名或者*,当我们需要允许多个域 ...
什么是SQL注入式攻击？
什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响 ...

EasyUI左右布居

EasyUI左右布居的更多相关文章

随机推荐

热门专题