zoukankan      html  css  js  c++  java
  • jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx.cs" Inherits="WebApp.workbench" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>工作台</title>
        <script src="js/jquery-easyui-1.4.3/jquery.min.js"></script>
        <script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
        <link href="js/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
        <link href="js/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
        <link href="js/jquery-easyui-1.4.3/demo/demo.css" rel="stylesheet" />
        <link href="css/nav.css" rel="stylesheet" />
    </head>
    <body  class="easyui-layout" onresize="form_resize();">
        <form id="form1" runat="server">
    	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
            <div style="z-index: 0; color: #000000;">
                    <table border="0" style="margin:0px 0px 0px 0px;100%" cellpadding="0" cellspacing="0" >
                        <tr style="height: 23px;">
                            <td colspan="3" align="left" valign="top">                         
                            </td>
                        </tr>                    
                        <tr style="height: 20px;" valign="middle">
                            <td colspan="3" valign="middle">
                                <table border="0">
                                    <tr>
                                        <td colspan="1" valign="middle">
                                            <img src="images/wb/user.png" alt="当前用户" height="20px" align="middle">当前用户:<span
                                                class="span_bottom">[<%=this.Session_username %>]</span> 
                                            <script type="text/javascript">
                                                var isnMonths = new initArray("01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月");
                                                var isnDays = new initArray("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                                                today = new Date();
                                                function initArray() {
                                                    for (i = 0; i < initArray.arguments.length; i++)
                                                        this[i] = initArray.arguments[i];
                                                }
                                                function getFullYear(d) {
                                                    yr = d.getYear();
                                                    if (yr < 1000) yr += 1900;
                                                    return yr;
                                                }
                                                document.write(getFullYear(today) + "年" + isnMonths[today.getMonth()] + today.getDate() + "日 " + isnDays[today.getDay()]);
                                            </script>
                                        </td>
                                        <td colspan="2" valign="middle" align="left">
                                              当前操作:<div id="cur_op" ></div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="position: absolute; top: 0px; left: 0px; z-index: 2;">
                    <img alt="" src="images/wb/page_wf_client_title.png" style="height:50px"  />
                </div>
    	</div>
    	<div id="navpad"  data-options="region:'west',split:true,title:'导航菜单'" style="20%;padding:2px;">
            <div id="nav" class="easyui-accordion" style="190px;height:300px;" fit="true">
    		     <div title="系统设置" data-options="iconCls:'images-nav-org'" style="overflow:auto;padding:2px;">
                     <ul class="easyui-tree">
    			        <li data-options="iconCls:'images-nav-navitem'"><div  onclick="javascript:alert('用户管理');"><span>用户管理</span></div></li>
                        <li data-options="iconCls:'images-nav-navitem'"><div  onclick="javascript:alert('角色管理');"><span>角色管理</span></div></li>
                        <li data-options="iconCls:'images-nav-navitem'"><div  onclick="javascript:alert('模块管理');"><span>模块管理</span></div></li>
                        <li data-options="iconCls:'images-nav-navitem'"><div  onclick="javascript:alert('权限管理');"><span>权限管理</span></div></li>
                     </ul>
                 </div>
                <div title="权限管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:2px;">
                    <ul class="easyui-tree">
    			        <li><div  onclick="javascript:alert('用户管理');"><span>用户管理</span></div></li>
                        <li><div  onclick="javascript:alert('角色管理');"><span>角色管理</span></div></li>
                         <li><div  onclick="javascript:alert('模块管理');"><span>模块管理</span></div></li>
                         <li><div  onclick="javascript:alert('权限管理');"><span>权限管理</span></div></li>
                     </ul>
                 </div>
                <div title="日常办公" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:2px;">
                    <ul class="easyui-tree">
    			        <li><div  onclick="javascript:alert('用户管理');"><span>用户管理</span></div></li>
                        <li><div  onclick="javascript:alert('角色管理');"><span>角色管理</span></div></li>
                         <li><div  onclick="javascript:alert('模块管理');"><span>模块管理</span></div></li>
                         <li><div  onclick="javascript:alert('权限管理');"><span>权限管理</span></div></li>
                     </ul>
                 </div>
            </div>
    
    	</div>
    	<%--<div data-options="region:'east',split:true,collapsed:true,title:'属性管理'" style="100px;padding:10px;">
            东区east region
    	</div>--%>
    	<div data-options="region:'south',border:false" style="height:25px;background:#A9FACD;padding:10px;">
             <center>四川云智慧地理信息软件有限责任公司 @2012-2015 版权全部</center>
    	</div>
        <div data-options="region:'center'">
    	<div id="wb" class="easyui-tabs" fit="true"  style="100%">
            <div id="divMain1" title="欢迎使用" style="padding:10px; 800px; position: absolute; left: 200px; top: 100px;">
                <font size="5pt" color="green" face="微软雅黑">您好,欢迎使用工作流客户端管理系统,<br />建议分辨率<font color="red">1024×768</font>。

    </font> <br /> <br /> 资源下载:<a href="Tools/msyh.ttf">微软雅黑</a> <a href="Tools/仿宋_GB2312.TTF"> 仿宋_GB2312</a> <br /> <a href="Tools/Silverlight5.11.rar">Silverlight5.11.rar</a> <script type="text/javascript"> function welcome_resize() { try { var v = document.getElementById("divMain1"); v.style.left = (document.documentElement.clientWidth / 2 - 400).toString() + "px"; v.style.top = (document.documentElement.clientHeight / 2 - 100).toString() + "px"; } catch (e) { } try { form_resize(); } catch (e) { } // } window.setTimeout(welcome_resize, 500); welcome_resize(); </script> </div> <div id="tab_um" title="用户管理" style="padding:0px;margin:0px 0px 0px 0px;" data-options="closable:true,iconCls:'images-nav-org'"> <table id="dg_tb" class="easyui-datagrid" title="产品列表(带工具栏的数据表格)" style="100%;height:400px;" fit="true" data-options="iconCls:'images-nav-users',rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:toolbar"> <thead> <tr> <th data-options="field:'itemid',80">Item ID</th> <th data-options="field:'productid',100">Product</th> <th data-options="field:'listprice',80,align:'right'">List Price</th> <th data-options="field:'unitcost',80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',240">Attribute</th> <th data-options="field:'status',60,align:'center'">Status</th> </tr> </thead> </table> <script type="text/javascript"> var toolbar = [{ text: 'Add', iconCls: 'icon-add', handler: function () { alert('add') } }, { text: 'Cut', iconCls: 'icon-cut', handler: function () { alert('cut') } }, '-', { text: 'Save', iconCls: 'icon-save', handler: function () { alert('save') } }]; </script> </div> </div> </div> </form> <script type="text/javascript"> //获取游览器客户端高度 function get_clientHeight() { var cHeight = document.documentElement.clientHeight; if (cHeight <= 0) { cHeight = document.body.clientHeight; } if (cHeight <= 0) { cHeight = $(window).height; } if (cHeight <= 0) { cHeight = $(document).height; } if (cHeight <= 0) { cHeight = $(document.body).height; } if (cHeight <= 0) { cHeight = 768; } return cHeight; } function form_resize() { //var c_height = get_clientHeight(); } form_resize(); </script> </body> </html>


  • 相关阅读:
    腾讯云CentOS7学习
    听力词汇发音练习软件
    中缀表达式转后缀表达式
    两个升序序列的中位数
    CentOS配置静态IP
    一种简单的基于图像或激光雷达的道路(赛道)识别程序
    Win10+VS2019 配置YOLOv3
    【算法题】CCF CSP第二题练习(更新中)
    rpm的使用
    SCL
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6792559.html
Copyright © 2011-2022 走看看