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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 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
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python连接mysql实例分享
2016/10/09 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
Python魔法方法功能与用法简介
2019/04/04 Python
学习Django知识点分享
2019/09/11 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
出国导师推荐信
2014/01/16 职场文书
关于环保的建议书400字
2014/03/12 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
学困生转化工作总结
2015/08/13 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS