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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 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中require和require_once的区别说明
2014/02/27 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
浅说js变量
2011/05/25 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python 发送邮件方法总结
2020/08/10 Python
会计核算科岗位职责
2014/03/19 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
python manim实现排序算法动画示例
2022/08/14 Python