Jqurey实现相似EasyUI的页面布局
截图例如以下：（可通过移动中间蓝色的条。来改变左右两边div的宽度）
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ21pbmd4aW5nOTgw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
详细实现代码例如以下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="jQuery 2.0.3.js"></script> <style type="text/css">
.highlightTextSearch
{
background-color: Red;
}
a:hover
{
color: Red;
}
.style2
{
width: 1000px;
}
.div
{
scrollbar-face-color: #DCDCDC; /* 游标的颜色 */
scrollbar-shadow-color: #99BBE8; /*游标边框的颜色*/
scrollbar-highlight-color: #FF3300; /*游标高亮*/
scrollbar-3dlight-color: #9EBFE8;
scrollbar-darkshadow-color: #9EBFE8;
scrollbar-track-color: #DFE8F6; /*滑动条背景颜色*/
scrollbar-arrow-color: #6699FF; /*箭头颜色*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 1000px; height: auto" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 1000px; height: auto" align="center">
<table style="width: 1000px; height: auto">
<tr>
<td style="width: 1000px; height: 670px; overflow: auto" align="left" valign="top">
<div style="overflow: auto; width: 325px; height: 500px; float: left; background-color: Yellow"
id="movemodule" class="div">
</div>
<div id="arrowborder" style="float: left; width: 5px; height: 500px; background-color: Blue;
cursor: w-resize;">
</div>
<div id="rightframe" style="width: 660px; height: 500px; float: left; overflow: auto;
background-color: Aqua" class="div">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 1000px; height: 70px; background-image: url('Images/OAbottom.bmp')"
align="center">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var isDown = false;
var minwidth = 160;
var maxwidth = 800;
$("#arrowborder").mousedown(function ()
{
this.setCapture();
isDown = true;
$("body").css("cursor", "e-resize");
});
$("body").mouseup(function ()
{
this.releaseCapture();
isDown = false;
$("body").css("cursor", "default");
});
$("body").mousemove(function (event)
{
if (isDown) {
var _mx = event.clientX;
//var _my = event.clientY;
var _poin = $("#arrowborder").offset();
var _w = _mx - _poin.left;
var _lw = $("#movemodule").width();
var _rw = $("#rightframe").width();
if ((_lw + _w > minwidth && _w < 0) || (_lw + _w < maxwidth && _w > 0)) {
$("#movemodule").width(_lw + _w);
$("#rightframe").width(_rw - _w);
}
else {
if (_w > 0) {
$("#movemodule").width(maxwidth);
$("#rightframe").width(_rw - (maxwidth - _lw));
}
else {
$("#movemodule").width(minwidth);
$("#rightframe").width(_rw + (_lw - minwidth));
}
}
}
});
</script>
</form>
</body>
</html>
Jqurey实现相似EasyUI的页面布局的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）转载
http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...
- EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
随机推荐
- JAVA实现https单向认证
//关于http 须要两个jar包 httpclient-4.0.jar httpcore-4.0.1.jar private static final HttpClient httpClient = ...
- 说说Linux文件权限那些事儿
文件全部权 显示文件的全部权 更改文件的全部权 文件的权限 改动文件的权限 用符号表示法改动 用数字表示法改动 使用umask指定默认的文件权限 參考文献 首先我们要知道Linux的标准文件权限和安全 ...
- iOS 调用第三方地图进行导航
//支持的地图 { _model = model; //支持的地图 NSMutableArray *maps = [NSMutableArray array]; //苹果原生地图-苹果原生地图方法和其 ...
- 【翻译自mos文章】在Oracle单机数据库中定义database service
来源于: Defining a Database Service with a Stand Alone Database (文档 ID 1260134.1) APPLIES TO: Oracle Da ...
- 初识 Java
1.Java中的数据类型 Java 语言是一种强类型语言.通俗点说就是,在 Java 中存储的数据都是有类型的,而且必须在编译时就确定其类型. Java 中有两类数据类型: 在 Java 的领域里,基 ...
- ./configure: No such file or directory
原文链接:http://www.cnblogs.com/niocai/archive/2011/07/14/2106088.html 普通情况下,多看看文件夹下的readme和INSTALL文件,里面 ...
- MySql常用函数数学函数、加密函数等（转—收藏）
MySql函数众多,这里只是列举了一部分常用的函数. 一.数学函数 ABS(x) // 返回x的绝对值 BI ...
- prototype 用法
prototype使得js面向对象使用了prototype之后,使用它里面的属性或者函数 需要new出一个对象才可以使用.否则不使用prototype,直接向对象注入 function Person( ...
- Quartz简介 用 Quartz 进行作业调度
http://www.ibm.com/developerworks/cn/java/j-quartz/现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展. ...
- SpringCloud系列十五：使用Hystrix实现容错
1. 回顾 上文讲解了容错的重要性,以及容错需要实现的功能. 本文来讲解使用Hystrix实现容错. 2. Hystrix简介 Hystrix是Netflix开源的一个延迟和容错库,用于隔离访问远程系 ...