|
@@ -4,9 +4,18 @@
|
|
|
|
|
|
$(function () {
|
|
|
// 读取本地存储的高度(必须放在载入spread之前)
|
|
|
- loadSize("main", function() {
|
|
|
+ let mainResizeEles = {};
|
|
|
+ mainResizeEles.id = '#main';
|
|
|
+ mainResizeEles.resize = $('#main').find('.resize');
|
|
|
+ mainResizeEles.nearElement = $('#main').find('.top-content');
|
|
|
+ mainResizeEles.nearSpread = mainResizeEles.nearElement.children(".main-data-top");
|
|
|
+ mainResizeEles.farElement = $('#main').find('.bottom-content');
|
|
|
+ mainResizeEles.farSpread = mainResizeEles.farElement.children().find(".main-data-bottom");
|
|
|
+ mainResizeEles.nav = mainResizeEles.farElement.children('ul.nav');
|
|
|
+ loadSize(mainResizeEles, 'height', function() {
|
|
|
refreshSubSpread();
|
|
|
});
|
|
|
+
|
|
|
$("#header-menu").removeAttr('style');
|
|
|
projectInfoObj.showProjectInfo();
|
|
|
projectObj.checkMainSpread();
|
|
@@ -23,13 +32,9 @@ $(function () {
|
|
|
$(gljOprObj.activeTab).addClass('active');
|
|
|
autoFlashHeight();
|
|
|
projectObj.refreshMainSpread();
|
|
|
- /*loadSize("main", function() {
|
|
|
- projectObj.refreshMainSpread();
|
|
|
- refreshSubSpread();
|
|
|
- });*/
|
|
|
});
|
|
|
|
|
|
- slideResize($("#main"), function() {
|
|
|
+ slideResize(mainResizeEles, {min: 170, max: 700}, 'height', function() {
|
|
|
projectObj.mainSpread.refresh();
|
|
|
refreshSubSpread();
|
|
|
});
|
|
@@ -47,49 +52,66 @@ $(function () {
|
|
|
/**
|
|
|
* 拖动更改div大小
|
|
|
*
|
|
|
- * @param {Object} rootElement - 最顶层div
|
|
|
+ * @param {Object} eles - id:存储本地的标记 resize:拖动条 nearElement:左上外层div nearSpread:左上spread farElement:右下外层div evFixedSize:造价书左右拖动用
|
|
|
+ * @param {Object} limit - min/max
|
|
|
+ * @param {String} type - height/width
|
|
|
* @param {function} callback - 成功后执行
|
|
|
* @return {void}
|
|
|
*/
|
|
|
-function slideResize(rootElement, callback) {
|
|
|
- let startY = 0;
|
|
|
+function slideResize(eles, limit, type, callback) {
|
|
|
+ if(type !== 'height' && type !== 'width'){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //nearElement:左上, farElement:右下
|
|
|
+ let startP = 0;
|
|
|
let drag = false;
|
|
|
- const element = rootElement.find('.resize');
|
|
|
- const topContentEle = rootElement.find(".top-content");
|
|
|
- const bottomContentEle = rootElement.find(".bottom-content");
|
|
|
- let topContentHeight = 0;
|
|
|
- let bottomContentHeight = 0;
|
|
|
- let navHeight = 0;
|
|
|
- let topChangeHeight = 0;
|
|
|
- let bottomChangeHeight = 0;
|
|
|
+ const resizeElement = eles.resize;
|
|
|
+ const nElement = eles.nearElement;
|
|
|
+ const fElement = eles.farElement;
|
|
|
+ const navContentEle = eles.nav ? eles.nav : null;
|
|
|
+ let nEleSize = 0;
|
|
|
+ let fEleSize = 0;
|
|
|
+ let navSize = 0;
|
|
|
+ let nEleChangeSize = 0;
|
|
|
+ let fEleChangeSize = 0;
|
|
|
|
|
|
// 鼠标点下时
|
|
|
- element.mousedown(function(e) {
|
|
|
+ resizeElement.mousedown(function(e) {
|
|
|
drag = true;
|
|
|
- startY = e.clientY;
|
|
|
- // 获取上部分的高度
|
|
|
- topContentHeight = topContentEle.height();
|
|
|
- // 获取下部分的高度
|
|
|
- bottomContentHeight = bottomContentEle.height();
|
|
|
- // nav高度部分
|
|
|
- navHeight = bottomContentEle.children('ul.nav').height() + 4;
|
|
|
- element.tooltip('hide');
|
|
|
+ startP = type === 'height' ? e.clientY : e.clientX;
|
|
|
+ // 获取左(上)部分的宽度(高度)
|
|
|
+ nEleSize = nElement[type]();
|
|
|
+ // 获取右(下)部分的宽度(高度)
|
|
|
+ fEleSize = fElement[type]();
|
|
|
+ // nav宽(高度)部分
|
|
|
+ if(navContentEle){
|
|
|
+ navSize = navContentEle[type]() + 4;
|
|
|
+ }
|
|
|
+ resizeElement.tooltip('hide');
|
|
|
});
|
|
|
|
|
|
// 鼠标移动
|
|
|
$("body").mousemove(function(e) {
|
|
|
if (drag) {
|
|
|
- let moveHeight = e.clientY - startY;
|
|
|
+ let moveSize = type === 'height' ? e.clientY - startP : e.clientX - startP;
|
|
|
// 判断拖动范围不能超出
|
|
|
- topChangeHeight = topContentHeight + moveHeight;
|
|
|
- topChangeHeight = topChangeHeight < 170 ? 170 : topChangeHeight;
|
|
|
- topChangeHeight = topChangeHeight > 700 ? 709 : topChangeHeight;
|
|
|
- topContentEle.children(".main-data-top").height(topChangeHeight);
|
|
|
+ nEleChangeSize = nEleSize + moveSize;
|
|
|
+ nEleChangeSize = nEleChangeSize < limit.min ? limit.min : nEleChangeSize;
|
|
|
+ nEleChangeSize = nEleChangeSize > limit.max ? limit.max + 9 : nEleChangeSize;
|
|
|
|
|
|
- bottomChangeHeight = bottomContentHeight - moveHeight;
|
|
|
- bottomChangeHeight = bottomChangeHeight < 170 ? 170 : bottomChangeHeight;
|
|
|
- bottomChangeHeight = bottomChangeHeight > 700 ? 709 : bottomChangeHeight;
|
|
|
- bottomContentEle.children().find(".main-data-bottom").height(bottomChangeHeight - navHeight);
|
|
|
+ fEleChangeSize = fEleSize - moveSize;
|
|
|
+ fEleChangeSize = fEleChangeSize < limit.min ? limit.min : fEleChangeSize;
|
|
|
+ fEleChangeSize = fEleChangeSize > limit.max ? limit.max + 9 : fEleChangeSize;
|
|
|
+
|
|
|
+ if(type === 'width'){
|
|
|
+ let rePercent = getResizeWidthPercent(nEleChangeSize, fEleChangeSize);
|
|
|
+ eles.nearElement.css(type, rePercent.nearPercent);
|
|
|
+ eles.farElement.css(type, rePercent.farPercent);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ eles.nearSpread[type](nEleChangeSize);
|
|
|
+ eles.farSpread[type](fEleChangeSize - navSize);
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
|
|
@@ -99,11 +121,11 @@ function slideResize(rootElement, callback) {
|
|
|
callback();
|
|
|
drag = false;
|
|
|
// 存入本地缓存
|
|
|
- const id = rootElement.attr('id');
|
|
|
- topChangeHeight = topChangeHeight >= 700 ? 709 : topChangeHeight;
|
|
|
- bottomChangeHeight = bottomChangeHeight >= 700 ? 709 : bottomChangeHeight;
|
|
|
- setLocalCache('topHeight:' + id, topChangeHeight);
|
|
|
- setLocalCache('bottomHeight:' + id, bottomChangeHeight);
|
|
|
+ const id = eles.id;
|
|
|
+ nEleChangeSize = nEleChangeSize >= limit.max ? limit.max + 9 : nEleChangeSize;
|
|
|
+ fEleChangeSize = fEleChangeSize >= limit.max ? limit.max + 9 : fEleChangeSize;
|
|
|
+ setLocalCache(`near${type}:${id}`, nEleChangeSize);
|
|
|
+ setLocalCache(`far${type}:${id}`, fEleChangeSize);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
@@ -115,25 +137,42 @@ function slideResize(rootElement, callback) {
|
|
|
* @param {function} callback - 回调函数
|
|
|
* @return {void}
|
|
|
*/
|
|
|
-function loadSize(tag, callback) {
|
|
|
+
|
|
|
+function loadSize(eles, type, callback) {
|
|
|
+ let tag = eles.id;
|
|
|
if (tag === '') {
|
|
|
return;
|
|
|
}
|
|
|
- let o_topHeight = $("#"+ tag +" .main-data-top").height();
|
|
|
- let o_bottomHeight = $("#"+ tag +" .main-data-bottom").height();
|
|
|
- let topHeight = getLocalCache('topHeight:' + tag);
|
|
|
- let bottomHeight = getLocalCache('bottomHeight:' + tag);
|
|
|
- if (topHeight === null || bottomHeight === null) {
|
|
|
- $("#"+ tag +" .main-data-top").height(o_topHeight);
|
|
|
- $("#"+ tag +" .main-data-bottom").height(o_bottomHeight);
|
|
|
+ if(type !== 'height' && type !== 'width'){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let o_nearSize = eles.nearSpread[type]();
|
|
|
+ let o_farSize = eles.farSpread[type]();
|
|
|
+ let nearSize = getLocalCache(`near${type}:${tag}`);
|
|
|
+ let farSize = getLocalCache(`far${type}:${tag}`);
|
|
|
+ if (nearSize === null || farSize === null) {
|
|
|
+ eles.nearSpread[type](o_nearSize);
|
|
|
+ eles.farSpread[type](o_farSize);
|
|
|
}else {
|
|
|
- const navHeight = $("#"+ tag +" .bottom-content").children('ul.nav').height() + 4;
|
|
|
- topHeight = parseFloat(topHeight);
|
|
|
- bottomHeight = parseFloat(bottomHeight);
|
|
|
- $("#"+ tag +" .main-data-top").height(topHeight);
|
|
|
- $("#"+ tag +" .main-data-bottom").height(bottomHeight - navHeight);
|
|
|
+ nearSize = parseFloat(nearSize);
|
|
|
+ farSize = parseFloat(farSize);
|
|
|
+ if(type !== 'width') {
|
|
|
+ const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
|
|
|
+ eles.nearSpread[type](nearSize);
|
|
|
+ eles.farSpread[type](farSize - navSize);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(type === 'width'){//使用百分比
|
|
|
+ let rePercent = getResizeWidthPercent(nearSize ? nearSize : o_nearSize, farSize ? farSize : o_farSize);
|
|
|
+ eles.nearElement.css(type, rePercent.nearPercent);
|
|
|
+ eles.farElement.css(type, rePercent.farPercent);
|
|
|
}
|
|
|
-
|
|
|
- // $("#"+ tag +" .bottom-content").height(bottomHeight);
|
|
|
callback();
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+function getResizeWidthPercent(nearSize, farSize){
|
|
|
+ const resizeWidth = 6;
|
|
|
+ let nearPercent = (nearSize / (resizeWidth + nearSize + farSize) * 100) + '%';
|
|
|
+ let farPercent = (farSize / (resizeWidth + nearSize + farSize) * 100) + '%';
|
|
|
+ return {nearPercent, farPercent};
|
|
|
+}
|