easyui页面布局

简介: html: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>异常告警</title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <link href="../../Styles/chargePileDetailInfomation.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../Scripts/jquery-easyui-1.3.1/themes/icon.css" />
    <link href="../../Scripts/jquery-easyui-1.3.1/demo.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../Scripts/WarnRecService/RealTimeWarn.js" type="text/javascript"></script>
</head>
<body style="margin: 0;padding: 0;">
    <div id="telesignalling_warn" class="easyui-panel" style="height: 320px; verflow: hidden;" title=" " iconcls="icon-form" tools="#t_telesignalling_warn">
        <table id="dg_telesignalling_warn">
        </table>
    </div>
    <div id="card_Warn" class="easyui-panel"  style="overflow: hidden;
        height: 150px;" title=" " iconcls="icon-form" tools="#t_card_warn">
        <table id="dg_Card_Warn">
        </table>
    </div>
    <div class="easyui-layout" data-options="fit:true" border="false" style="height: 200px;
        overflow: hidden;" >
        <div data-options="region:'center'" style="width: 512px; height: 200px; overflow: hidden;"
            >
            <div id="communication_warn" class="easyui-panel" title=" " iconcls="icon-form" style="width: 512px;
                height: 200px; overflow: hidden;" border="false"tools="#t_communication_warn">
                <table id="dg_communication_warn">
                </table>
            </div>
        </div>
        <div data-options="region:'east'" style="width: 512px; height: 200px; overflow: hidden;">
            <div id="power_failure" class="easyui-panel" title=" " iconcls="icon-form" style="width: 512px;
                height: 200px; overflow: hidden;"border="false" tools="#t_power_failure">
                <table id="dg_power_failure">
                </table>
            </div>
        </div>
    </div>
    <div id="t_telesignalling_warn">
        <a href="../../pages/WarnRecService/RealTimeQuery.htm" style="text-align: left; width: 40px;
            text-decoration: none;" title="更多">更多>></a>
    </div>
    <div id="t_card_warn">
        <a href="javascript:void(0)" style="text-align: left; width: 40px; text-decoration: none;"
            title="更多" onclick="javascript:alert('add')">更多>></a>
    </div>
    <div id="t_communication_warn">
        <a href="javascript:void(0)" style="text-align: left; width: 40px; text-decoration: none;"
            title="更多" onclick="javascript:alert('add')">更多>></a>
    </div>
    <div id="t_power_failure">
        <a href="javascript:void(0)" style="text-align: left; width: 40px; text-decoration: none;"
            title="更多" onclick="javascript:alert('add')">更多>></a>
    </div>
    <div id="dlg" class="easyui-dialog" data-options="closed:true,modal:true,buttons:'#dlg_buttons',title:'告警处理',iconCls: 'icon-info'">
        <div style="height: 100px; width: 100%;">
            <div id="dlg-select">
                <input type="radio" id="r_gjcl_done" name="r_gjcl" checked="checked" value="1" />
                <label for="r_gjcl_done">
                    灭警完成</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" id="r_gjcl_wait" name="r_gjcl" value="0" /><label for="r_gjcl_wait">继续等待</label>
            </div>
        </div>
        <div id="dlg_buttons">
            <a href="#" class="easyui-linkbutton" iconcls="icon-save" onclick="btn_ok();">确定</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-remove" onclick="btn_close();">取消</a>
        </div>
    </div>
    <input id="hidd_warnid" type="hidden" />
    <input id="hidd_warntype" type="hidden" />
</body>
</html>

显示:

目录
相关文章
|
7月前
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
533 0
|
5月前
|
前端开发
HTML + CSS各种好看按钮组件
HTML + CSS各种好看按钮组件
|
6月前
|
移动开发 JavaScript 前端开发
easyui01(基本布局)
easyui01(基本布局)
|
7月前
|
编解码 前端开发
css常见的页面布局
css常见的页面布局
|
JSON 数据库 数据格式
EasyUI树形菜单的使用
EasyUI树形菜单的使用
EasyUI树形菜单的使用
|
JavaScript 前端开发 API
easyui布局——【入门】
easyui布局——【入门】
easyui布局——【入门】
EasyUI–布局和标签页详解
EasyUI的布局非常简单,但是也能充分满足网页日常的布局,先来一个最基本的例子:
313 0
EasyUI–布局和标签页详解
|
JavaScript 前端开发 容器
layui 栅格系统与后台布局
栅格系统 为了丰富网页布局简化HTML/CSS代码的耦合,并提升多终端的适配能力,layui在2.0版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了12等分,预设了4*12种CSS排列类,它们在移动设备、平板、电脑中/>大尺寸四种不同的屏幕下发挥着各自的作用。
3655 0
|
Web App开发 前端开发 索引
【easyui】关于easyui Datagrid一些样式记录
此篇文章主要记录在使用datagrid中常见的修改样式方式以及样式效果配图!!!!  一丶存在选中框的时候标题栏合并显示序号字段。       代码展示:                    1 onLoadSuccess: function (data) { 2 ...
2017 0