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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Jquery 效果使用详解
Nov 23 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 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 不错的学习资料
2009/02/06 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
python如何制作缩略图
2019/04/30 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
学生生病请假条范文
2014/02/16 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
运动会口号8字
2014/06/07 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server