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事件委托代码实践详解， 事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。,需要的朋友可以参考下2019-06-06
jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)
这篇文章主要介绍了jQuery实现点击某个div打开层，点击其他div关闭层的方法,结合实例形式分析了jQuery两种阻止冒泡实现弹出层的处理技巧,需要的朋友可以参考下2016-11-11
可以使用鼠标任意拖动列表项改变默认的位置，具体的实现如下(附演示)，感兴趣的朋友可以学习下2013-06-06
本文就是要利用cookie插件，获取用户浏览文章历史记录，并将用户最近浏览历史记录显示在页面，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了jQuery使用动画队列自定义动画操作,涉及jQuery使用queue()方法和dequeue()方法进行函数队列操作相关实现技巧,需要的朋友可以参考下2018-06-06
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
这篇文章主要介绍了jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了jQuery pagination分页示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
在园子里面看到kuibono的文章说JQuery不会自动回收xmlHttpRequest对象，并且在每次Ajax请求之后都会创建一个新的xmlHttpRequest对象，感到惊讶，索性写了一个程序验正了一下，果然如kuibono所言2012-06-06
有了jquery一切变的如此简单！让js做的动画更有动感。2010-04-04
这篇文章主要介绍了jQuery中DOM树操作之使用反向插入方法,实例分析了反向插入方法与插入方法回调的使用技巧,需要的朋友可以参考下2015-01-01
最新评论