提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

EasyUI 实现 页面 改变 布局 类似 宽度 左右
2023-06-13 09:15:37 时间

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

具体实现代码如下：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default10.aspx.cs"Inherits="Default10"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title></title>
<scripttype="text/javascript"src="jQuery2.0.3.js"></script>

<styletype="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>
<formid="form1"runat="server">
<div>
<tablestyle="width:1000px;height:auto"align="center"cellpadding="0"cellspacing="0">
<tr>
<tdstyle="width:1000px;height:auto"align="center">
<tablestyle="width:1000px;height:auto">
<tr>
<tdstyle="width:1000px;height:670px;overflow:auto"align="left"valign="top">
<divstyle="overflow:auto;width:325px;height:500px;float:left;background-color:Yellow"
id="movemodule"class="div">
</div>
<divid="arrowborder"style="float:left;width:5px;height:500px;background-color:Blue;
cursor:w-resize;">
</div>
<divid="rightframe"style="width:660px;height:500px;float:left;overflow:auto;
background-color:Aqua"class="div">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<tdstyle="width:1000px;height:70px;background-image:url("Images/OAbottom.bmp")"
align="center">
</td>
</tr>
</table>
</div>
<scripttype="text/javascript">
varisDown=false;
varminwidth=160;
varmaxwidth=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>

相关文章