1、隐藏滚动条使滚动条不显示并不占据空间参考博文
在css中添加以下样式
::-webkit-scrollbar {
display: none;
}
2、easyui布局自适应
只要在加上 easyui-layout data-options="fit:true"
即可实现其区域的布局自适应
3、设置拖拽改变物体的宽高
原本是为了解决菜单收缩问题
方案一:添加第三个元素,通过移动第三个元素来改变菜单和内容布局
其中,可以用添加监听或者直接鼠标事件,但是会卡顿,而且拖动过程中当拖动过快超出第三元素范围则会是onmouseup事件失效导致拖拽出错
$('body').on('mousedown','#striyline',function(e){
console.log( $("#striyline").offsetLeft);
var startX = e.clientX;
$(this).left = $(this).offsetLeft;
var resize=$("#striyline");
var box = $('.layui-layout-admin');
var left =$('.layuimini-menu-left')[0];
console.log($('.layuimini-menu-left')[0]);
var right = $('.layui-body')[0];
console.log(startX);
document.onmousemove = function(e){
var endX = e.clientX;
console.log("start:"+startX+" end:"+endX+" resizeleft:"+resize.left);
var moveLen = resize.left + (endX - startX);
var maxT = box.clientWidth - resize.offsetWidth;
if(moveLen<59) moveLen = 59;
if(moveLen>maxT-500) moveLen = maxT-500;
resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function(evt){
evt.stopPropagation()
document.onmousemove = null;
document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture();
}
resize.setCapture && resize.setCapture();
return false;
});
方案二:也是添加一个元素,不过只改变菜单的大小,另一侧采用自适应,这个会比较流畅,但是鼠标事件问题仍存在(参考)
window.onload = function () {
// 1. 获取两个大小div
var oPanel = document.getElementById('leftmenu');
var oDragIcon = document.getElementById('striryLine');
var oBody=$(".layui-body")[0];
var oLogo=document.getElementById('toplogo');
var openIcon=document.getElementById('openIcon');
var openIconLeft=openIcon.getBoundingClientRect().left-200;
var oItem=$('.layui-nav-tree')[0];
// 定义4个变量
var disX = 0;//鼠标按下时光标的X值
var disW = 0; //拖拽前div的宽
oPanel.onmouseover=function (e) {
if(e.clientX<=oPanel.offsetWidth && e.clientX>=oPanel.offsetWidth-10){//设置显示可拖动光标的范围
$(this).css('cursor','e-resize');
}else{
$(this).css('cursor','default');
}
}
//3. 给小div加点击事件
oDragIcon.onmousedown = function (ev) {
var ev = ev || window.event;
disX = ev.clientX; // 获取鼠标按下时光标x的值
disW = oPanel.offsetWidth; // 获取拖拽前div的宽
document.onmousemove = function (ev) {
var ev = ev || window.event;
//拖拽时为了对宽和高 限制一下范围,定义两个变量
var W = ev.clientX - disX + disW;
if(W<200){
W = 200;
}
if(W>400){
W =400;
}
oPanel.style.width =W +'px';// 拖拽后物体的宽
$('.layui-nav-tree')[0].style.width=W - 10 + 'px';
oDragIcon.style.left = W - 10 +'px';
oBody.style.left = W +'px';
oLogo.style.width =W +'px';
openIcon.style.left=openIconLeft+W+'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
// document.onmouseleave=function () {
// document.onmousemove = null;
// document.onmouseup = null;
// }
}
}
方案三:采用easyui自带布局,因此需要改变布局,并且对菜单收缩按钮进行重写(因为是layui的菜单收缩按钮)(果然还是现成的最好用)
<div class=" content easyui-layout" data-options="fit:true" style="width: 100%;height: 100%">
<div data-options="region:'center'"style="width: 100%;height: 100%">
<div class="easyui-layout" data-options="fit:true" style=" height: 100%; width: 100%;">
<!--左侧菜单+logo-->
<div id="westMenu" data-options="region:'west',collapsed:false,split:true" style="width:205px;border:none; background-color: rgb(57, 61, 73); min-width:200px;max-width: 400px;">
<div class="right_content" >
</div>
</div>
<!--右侧内容-->
<div id="eastPanel" data-options="region:'center'" style="margin-top: 51px;z-index: 1000;">
<div class="left_content layui-layout" >
</div>
</div>
</div>
</div>
</div>