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;width: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="width:20%;padding:2px;">
        <div id="nav" class="easyui-accordion" style="width: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="width: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="width:100%">
        <div id="divMain1" title="欢迎使用" style="padding:10px;width: 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="width: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',width:80">Item ID</th>
				        <th data-options="field:'productid',width:100">Product</th>
				        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				        <th data-options="field:'attr1',width:240">Attribute</th>
				        <th data-options="field:'status',width: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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-11 21:33:19

jquery+easyui主界面布局一例的相关文章

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

Jquery EasyUi实战教程布局篇

送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kwstu.com/ArticleView/kwstu_2014413112321738 私人做程序开发一直有个头疼的问题就是后台管理界面,以前一般都是自己用jquery+ps自己设计的,效果很一般,很不理想. 今天初次使用Jquery EasyUi,简单的做了个布局页面感觉还不错,给大家分享一下,就是不知道Jquery EasyUi浏览器兼容性怎么样. 最后效果图如下: 使用Jquery EasyUi开发之前首先要

Fragment仿360应用市场,主界面布局,fragmentTabAdapter导致view无法加载

晚上在写一个主界面是一个FragmentActivity,底下是4个fragment分别作为四个Tabhost. 并且每个tab下面又加载5~6个滑动fragment,问题来了,fragmentTabAdapter调试了半天,复用的Fragment只能显示一次.我就郁闷. 后来查看了,必须用this.getChildFragmentManager()将FragmentManager传递给fragmentTabAdapter,方能解决这个问题.

CRM -EasyUI 主界面设计

<!DOCTYPE html> <html> <head>     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">     <link rel="stylesheet" type="text/css"

Swift实战-小QQ(第3章):QQ主界面布局

1.建一个tabbarController 三个navigationController 三个ViewController 2.将SliderViewController文件中的initSubViews后面添加代码: //用mainContentView装下MainTab var mainTabVC: UITabBarController! = self.storyboard!.instantiateViewControllerWithIdentifier("MainTabViewControl

android M拨号盘开源之旅(二)--- 浅析拨号盘主界面

接上篇博文:http://www.cnblogs.com/lance2016/p/5229073.html 上一节课给大家简单介绍了下android拨号盘的工程概况,今天再向大家剖析一下主界面的布局实现 先贴上主界面布局: <?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox.combobox.panel.checkbox.tree.datagrid等等 总之是关于基本表单控件.树和一些图表统计的应用,当然,还有一些后台数据库的连接使用.当时几乎都在学着怎么用,竟然没有去仔细深入思考关于jQuery,并且对在头部(head中)引入的一些诸如jquery-1.4.4.min.js 文件也没有太大感觉.果然,在自己需要用jQuery做前端的时候一顿茫然

[应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发

主界面布局如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:la

【边做项目边学Android】手机安全卫士05_1:程序主界面

主界面布局(知识点:GridView) mainscreen.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=