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>
jquery+easyui主界面布局一例的更多相关文章
- Fragment与Radiogroup联动，经典的主界面布局。使用show和hide的方式实现；
Fragment+RadioGroup经典的主界面布局,方便实用: 1.使用replace方式: 直接上代码,先是布局文件: <?xml version="1.0" enco ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- Jquery EasyUi实战教程布局篇
转自:http://www.kwstu.com/ArticleView/kwstu_20139413501290 送给大家一个非常好的后台布局模板,本人后来就选择了这个模板http://www.kws ...
- android actionbar viewpager 实现类微信主界面布局
1 Activity public class MainActivity extends FragmentActivity { private ViewPager pager; private Act ...
- Swift实战-小QQ(第3章):QQ主界面布局
1.导航栏外观设定*在AppDelegate.swift文件中的didFinishLaunchingWithOptions方法添加以下代码 func application(application: ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事（续）——主界面
引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...
- DoNet开源项目-基于jQuery EasyUI的后台管理系统
博主在业余时间开发了一个简单的后台管理系统,其中用到了 jQuery EasyUI 框架,上次分享过系统布局,参考文章:jQuery EasyUI 后台管理系统布局分享,目前已完成系统的整体框架的搭建 ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
随机推荐
- 学习的一些mybatis
MyBatis入门基础(一) 阅读目录 一:对原生态JDBC问题的总结 二:MyBatis框架 三:mybatis入门程序 四:mybatis和Hibernate的本质区别与应用场景 五:小结 回到顶 ...
- java面试题之java中用到的线程调度算法是什么
抢占式.一个线程用完CPU之后,操作系统会根据线程优先级.线程饥饿情况等数据算出一个总的优先级并分配下一个时间片给某个线程执行. 操作系统中可能会出现某条线程常常获取到VPU控制权的情况,为了让某些优 ...
- bzoj1143/2718 祭祀river（最大独立集）
[CTSC2008]祭祀river Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2175 Solved: 1098[Submit][Status] ...
- TypeToken获取运行时泛型类型
最近正好使用到了Guava的TypeToken来获取泛型的类型信息 比如,泛型父类需要获取其子类定义的泛型类型时: public abstract class GenericClazz<V> ...
- python 粘包问题及解决方法
一粘包 TCP协议是面向对象的,面向流的,提高可靠性服务.使用了优化算法,Nagle算法.将多次间隔较少且数据量小的数据,合并成一个大的数据块,然后进行封包.这样接收端就很难分辨出来.TCP协议数据是 ...
- HTTP DNS
试用地址 https://www.dnspod.cn/httpdns/demo 哪些人适合使用HTTP DNS 1.希望降低访问延迟.减少跨网访问的资讯.游戏类APP: 2.希望降低连接失败率,提升业 ...
- 【開發時，應注意事項】 vendor tools 無法 work 時，怎麼辦？
遇到 vendor tools 無法 work 時, 最好的方法直接請 vendor 來, 為什麼呢? 因為 tool 可能 有版本的問題, 譬如: vendor tool A tool 在 buil ...
- 表格 td中，取checkbox后几位值
function addToPanDianDetail() { var detail_id = ""; var detail_code = ""; $(&quo ...
- [笔记][Web]利用JS生成博文目录及CSS定制博客
0. 简介 进入到cnblog这个大园子以后,和其他的一些博客网站比起来,少了些小功能,比如旁边CSDN上的目录.不过好在大神辈出,博客园可以通过申请JS权限来进行目录的生成. 由于本人在JS以及CS ...
- jenkins发布普通项目、配置自动上线自动部署
1.以root用户运行jenkins是不专业的 刚开始用jenkins时用jenkins这个普通用户运行程序,始终无法连接到gitlab,报错如下: 先是把修改jenkins上的git路径,将git修 ...