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 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
借助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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python中字典和集合学习小结
2017/07/07 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python中退出多层循环的方法
2018/11/27 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Python实现微信小程序支付功能
2019/07/25 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
出纳员岗位职责
2014/03/13 职场文书
《搭石》教学反思
2014/04/07 职场文书
安全生产宣传标语
2014/06/06 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
淘宝好评语句大全
2014/12/31 职场文书
教师个人培训总结
2015/02/11 职场文书
门球健将观后感
2015/06/16 职场文书
化验室安全管理制度
2015/08/06 职场文书
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL