脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → EasyUI页面布局

jquery实现类似EasyUI的页面布局可改变左右的宽度

 更新时间：2020年09月12日 14:27:56   投稿：whsnow  
这篇文章主要介绍了通过jquery实现类似EasyUI的页面布局可改变左右的宽度,需要的朋友可以参考下

截图如下：（可通过移动中间蓝色的条，来改变左右两边div的宽度）

具体实现代码如下：

<%@ 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>
您可能感兴趣的文章:

相关文章

  • jquery统计输入文字的个数并对其进行判断

    jquery统计输入文字的个数并对其进行判断

    判断输入文字个数并提示还可以输入多少个字，类似的功能使用jquery便可轻松实现
    2014-01-01
  • 20个最常见的jQuery面试问题及答案

    20个最常见的jQuery面试问题及答案

    本篇文章给大家分享了20个最常见的jQuery面试问题及答案，对此有需要的朋友可以参考下。
    2018-05-05
  • jquery中的on方法使用介绍

    jquery中的on方法使用介绍

    使用jquery的朋友对其中的on方法并不陌生吧，下面为大家介绍下此方法的具体使用，感兴趣的朋友可以参考下
    2013-12-12
  • jquery创建一个ajax关键词数据搜索实现思路

    jquery创建一个ajax关键词数据搜索实现思路

    我们经常需要在前台页面输入关键词进行数据的搜索这已经成为了一种习惯今天给大家分享一下如何使用 jQuery，MySQL和Ajax创建简单和有吸引力的Ajax搜索,感兴趣的你可不要错过了哈
    2013-02-02
  • 利用JQuery操作iframe父页面、子页面的元素和方法汇总

    利用JQuery操作iframe父页面、子页面的元素和方法汇总

    这篇文章主要给大家介绍了关于利用JQuery操作iframe父页面、子页面的元素和方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • jQuery操作基本控件方法实例分析

    jQuery操作基本控件方法实例分析

    这篇文章主要介绍了jQuery操作基本控件方法,结合实例形式简单分析了jQuery针对控件的样式,ID获取,遍历及属性操作等常用技巧,需要的朋友可以参考下
    2015-12-12
  • jquery实现图片跟随鼠标的实例

    jquery实现图片跟随鼠标的实例

    这篇文章主要介绍了 jquery实现图片跟随鼠标的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
    2017-10-10
  • jquery validate在ie8下的bug解决方法

    jquery validate在ie8下的bug解决方法

    项目用到了jquery的表单校验插件validate，但在ie8下有bug，下面有个不错的解决方法，需要的朋友可以参考下
    2013-11-11
  • jQuery中DOM 属性使用实例详解上篇

    jQuery中DOM 属性使用实例详解上篇

    这篇文章主要为大家介绍了jQuery中DOM 属性使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 用jquery实现轮播图效果

    用jquery实现轮播图效果

    这篇文章主要为大家详细介绍了用jquery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论