jquery实现类似EasyUI的页面布局可改变左右的宽度


Posted in Javascript onSeptember 12, 2020

截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度)
jquery实现类似EasyUI的页面布局可改变左右的宽度
具体实现代码如下:

<%@ 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>
Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
js函数调用的方式
May 06 Javascript
详解jQuery选择器
Dec 21 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 #Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 #Javascript
js数组与字符串的相互转换方法
Jul 09 #Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 #Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 #Javascript
js中将String转换为number以便比较
Jul 08 #Javascript
JS循环遍历JSON数据的方法
Jul 08 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JS高级笔记
2011/07/13 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
javascript 闭包详解
2015/02/15 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python多线程同步实例教程
2019/08/11 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
通过实例学习Python Excel操作
2020/01/06 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
应届本科生推荐信范文
2013/12/25 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python