【8.0】页面分割条，支持任意方向调整大小

最新
现已支持插件： 页面分隔条 - 葡萄城市场 (grapecity.com.cn)



功能
1. 调整任意行列的大小
2. 支持记忆，浏览器刷新效果不丢失


效果预览



使用方法

1. 在页面加载命令添加一个 JavaScript 命令

2. 选中页面上一个单元格，设置 CSS 类名，运行时单元格将自动可拖拽。


CSS 类名示例（可任意组合）

水平Resize
spliter-h: 调整列宽模式，默认调整第一列
spliter-h spliter-col-9: 调整第九列的列宽，数字可任意指定


垂直Resize

spliter-v: 调整行高模式，默认调整第一行
spliter-v spliter-row-9: 调整第九行的行高，数字可任意指定



双向Resize
spliter-h spliter-v: 同时启用调整行高列宽
spliter-h spliter-v spliter-col-9 spliter-row-9: 同时调整第九行第九列的行高列宽，数字可任意指定




工程文件
Resizer.fgcc (91.84 KB, 下载次数: 489)

2022-9-14 17:23 上传

点击文件名下载附件

JavaScript 命令代码
代码参考：https://gcdn.grapecity.com.cn/fo ... 2551&extra=page%3D3
*拷贝以下代码到页面加载命令里

1. if(!document.querySelector("#spliter-style")){var style=document.createElement("style");style.id="spliter-style",style.innerHTML="\n.spliter-h{cursor:col-resize;}\n.spliter-v{cursor:row-resize;}\n.spliter-h.spliter-v{cursor:move;}\n",document.head.appendChild(style)}function resizeX(t,e,i){var n=t.style.gridTemplateColumns.replace(/,\s+/g,",").split(" ");n[i]=e+"px";var s=n.join(" ");t.style.gridTemplateColumns=s}function resizeY(t,e,i){var n=t.style.gridTemplateRows.replace(/,\s+/g,",").split(" ");n[i]=e+"px";var s=n.join(" ");t.style.gridTemplateRows=s}var ResizerX=function(){function t(t){var e,i=this;this.widthKey="",this.width=0,this.colNumber=0,this.invert=1,this.flag=0,this.initialWidth=0,this.initialPageX=0,this.moveXFunc=function(t){i.moveX(t)},this.stopXFunc=function(t){i.stopX(t)};var n=Forguncy.ForguncyData.pageInfo.pageName;t.addEventListener("mousedown",(function(t){i.startX(t)})),this.colNumber=parseInt(t.classList.value.split("spliter-col-")[1]||"0"),this.container=$(t).parents(".fgc-page-container")[0],this.widthKey="spliter_width|"+n+"|"+t.id,this.width=parseInt(null!==(e=localStorage.getItem(this.widthKey))&&void 0!==e?e:this.getMeasureWidth(this.container,this.colNumber).toString());var s=parseInt(t.id.split("c")[1]||"0");this.invert=s>=this.colNumber?1:-1,this.width>=0&&resizeX(this.container,this.width,this.colNumber)}return t.prototype.getMeasureWidth=function(t,e){var i=$("<div class='fgc-container-relative'><div>")[0];i.style.gridColumnStart=(e+1).toString(),i.style.gridColumnEnd=(e+2).toString(),t.appendChild(i);var n=$(i).width();return i.remove(),n},t.prototype.startX=function(t){return 0==t.button&&(this.flag=1,this.initialWidth=this.getMeasureWidth(this.container,this.colNumber),this.initialPageX=t.pageX,document.addEventListener("mousemove",this.moveXFunc),document.addEventListener("mouseup",this.stopXFunc)),t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),t.cancelBubble=!0,t.returnValue=!1,!1},t.prototype.moveX=function(t){return 1==this.flag&&(this.width=this.initialWidth+(t.pageX-this.initialPageX)*this.invert,resizeX(this.container,this.width,this.colNumber)),t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),t.cancelBubble=!0,t.returnValue=!1,!1},t.prototype.stopX=function(t){document.removeEventListener("mousemove",this.moveXFunc),document.removeEventListener("mouseup",this.stopXFunc),this.flag=0,this.updateX()},t.prototype.updateX=function(){localStorage.setItem(this.widthKey,this.width.toString())},t}(),ResizerY=function(){function t(t){var e,i=this;this.heightKey="",this.height=0,this.rowNumber=0,this.invert=1,this.flag=0,this.initialHeight=0,this.initialPageY=0,this.moveYFunc=function(t){i.moveY(t)},this.stopYFunc=function(t){i.stopY(t)};var n=Forguncy.ForguncyData.pageInfo.pageName,s=t.id;t.addEventListener("mousedown",(function(t){i.startY(t)})),this.rowNumber=parseInt(t.classList.value.split("spliter-row-")[1]||"0"),this.container=$(t).parents(".fgc-page-container")[0],this.heightKey="spliter_height|"+n+"|"+s,this.height=parseInt(null!==(e=localStorage.getItem(this.heightKey))&&void 0!==e?e:this.getMeasureHeight(this.container,this.rowNumber).toString());var r=parseInt(t.id.split("r")[1]||"0");this.invert=r>=this.rowNumber?1:-1,this.height>=0&&resizeY(this.container,this.height,this.rowNumber)}return t.prototype.getMeasureHeight=function(t,e){var i=$("<div class='fgc-container-relative'><div>")[0];i.style.gridRowStart=(e+1).toString(),i.style.gridRowEnd=(e+2).toString(),t.appendChild(i);var n=$(i).height();return i.remove(),n},t.prototype.startY=function(t){return 0==t.button&&(this.flag=1,this.initialHeight=this.getMeasureHeight(this.container,this.rowNumber),this.initialPageY=t.pageY,document.addEventListener("mousemove",this.moveYFunc),document.addEventListener("mouseup",this.stopYFunc)),t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),t.cancelBubble=!0,t.returnValue=!1,!1},t.prototype.moveY=function(t){return 1==this.flag&&(this.height=this.initialHeight+(t.pageY-this.initialPageY)*this.invert,resizeY(this.container,this.height,this.rowNumber)),t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),t.cancelBubble=!0,t.returnValue=!1,!1},t.prototype.stopY=function(t){document.removeEventListener("mousemove",this.moveYFunc),document.removeEventListener("mouseup",this.stopYFunc),this.flag=0,this.updateY()},t.prototype.updateY=function(){localStorage.setItem(this.heightKey,this.height.toString())},t}();$(".spliter-h").each((function(t,e){new ResizerX(e)})),$(".spliter-v").each((function(t,e){new ResizerY(e)}));

复制代码

太棒了，非常感谢楼主的无私分享

下载学习，谢谢！

顶一个

反馈一下，这个我试了，自己做了，首先说，成功，但是，——对，但是，戏肉来了，但是——


这个功能我是放到母版页上的，母版页顶部通栏放了导航栏，是一个组件，对，我是 8.0.100.0，顶部通栏下面分了两栏，左侧是el菜单，右侧是内容区，然后我在el菜单和内容区中间，放了一个4像素的列，并且把这一列都合并了。



实际的效果是，没有那么丝滑，要看鼠标的位置，我的录屏软件录不上鼠标，只能将就着看一下



我鼠标放到切分条上拖动，只动一下就动不了，页面不跟着动，只是鼠标指针在动。然后我松开鼠标左键回来，在没有点击鼠标时，仅仅是鼠标悬停在分割条时，分割条就跟着鼠标指针的移动而移动了，就是只能拖一下，有时候长有时候短，在上图中看到的有时候不动，那不是不动，是拖不动，鼠标指针在动的。

然后，我把鼠标放到标签页的左侧拖动，就非常丝滑，一点问题都没有，在上图中看到的中间那段，能一直到很靠右侧的位置的，就是我把鼠标指针放到标签页左侧的分割条处拖动的。

好用

这样的好功能，为什么不出一个官方插件呢！

好用

这个确实适合官方来原生支持一下.