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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
使用vue-cli编写vue插件的方法
Feb 26 Javascript
深入剖析Node.js cluster模块
May 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
Javascript !!的作用
2008/12/04 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
全球度假村:Club Med
2017/11/27 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
幼师求职信
2014/06/23 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
Python实现简繁体转换
2021/06/07 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android