当前位置: 编程技术>WEB前端
Jqurey实现类似EasyUI的页面布局可改变左右的宽度
来源: 互联网 发布时间:2014-08-25
本文导语: 截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度) 具体实现代码如下: .highlightTextSearch { background-color: Red; } a:hover { color: Red; } .style2 { width: 1000px; } .div { scrollbar-f...
截图如下:(可通过移动中间蓝色的条,来改变左右两边div的宽度)
具体实现代码如下:
.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; /*箭头颜色*/
}
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));
}
}
}
});
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。