|
@@ -16,6 +16,24 @@
|
|
|
* */
|
|
|
|
|
|
const SlideResize = (function() {
|
|
|
+ //设置水平拖动条的宽度
|
|
|
+ //@param {Object dom}resize滚动条
|
|
|
+ function setResizeWidth (resize) {
|
|
|
+ const fixedWidth = 10;
|
|
|
+ //滚动条节点 及 同层非滚动条节点的索引
|
|
|
+ let bros = resize.parent().children();
|
|
|
+ let index = bros.index(resize),
|
|
|
+ otherIndex = index ? 0 : 1;
|
|
|
+ const other = resize.parent().children(`:eq(${otherIndex})`);
|
|
|
+ let resizeParentWidth = resize.parent().width();
|
|
|
+ let resizeDecimalWidth = fixedWidth / resizeParentWidth,
|
|
|
+ otherDecimalWidth = 1 - resizeDecimalWidth;
|
|
|
+ let resizePercentWidth = resizeDecimalWidth * 100 + '%',
|
|
|
+ otherPercentWidth = otherDecimalWidth * 100 + '%';
|
|
|
+ resize.css('width', resizePercentWidth);
|
|
|
+ other.css('width', otherPercentWidth);
|
|
|
+ }
|
|
|
+
|
|
|
let mouseMoveCount = 0;
|
|
|
function horizontalSlide(module, eleObj, limit, callback) {
|
|
|
const triggerCBSize = 5;
|
|
@@ -47,6 +65,7 @@ const SlideResize = (function() {
|
|
|
rightPercentWidth = rightChange / eleObj.parent.width() * 100 + '%';
|
|
|
eleObj.left.css('width', leftPercentWidth);
|
|
|
eleObj.right.css('width', rightPercentWidth);
|
|
|
+ setResizeWidth(eleObj.resize);
|
|
|
mouseMoveCount += Math.abs(moveSize);
|
|
|
if (mouseMoveCount > triggerCBSize && callback) {
|
|
|
callback();
|
|
@@ -67,20 +86,114 @@ const SlideResize = (function() {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- function loadHorizonWidth(module, eles, callback) {
|
|
|
+ function loadHorizonWidth(module, resizes, eles, callback) {
|
|
|
for (let ele of eles) {
|
|
|
let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
|
|
|
if (cache) {
|
|
|
ele.css('width', cache);
|
|
|
}
|
|
|
}
|
|
|
+ for (let resize of resizes) {
|
|
|
+ setResizeWidth(resize);
|
|
|
+ }
|
|
|
if (callback) {
|
|
|
callback();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
+ /*
|
|
|
+ * div上下拖动
|
|
|
+ * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖
|
|
|
+ * eleObj: resize, top, topSpread, bottom, bottomSpread
|
|
|
+ * limit: min, max, notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
|
|
|
+ * */
|
|
|
+ function verticalSlide(module, eleObj, limit, callback) {
|
|
|
+ const triggerCBSize = 5;
|
|
|
+ let drag = false,
|
|
|
+ startPoint = 0,
|
|
|
+ topHeight = 0,
|
|
|
+ bottomHeight = 0,
|
|
|
+ topChange = 0,
|
|
|
+ bottomChange = 0,
|
|
|
+ limitMax = 0;
|
|
|
+
|
|
|
+ eleObj.resize.mousedown(function (e) {
|
|
|
+ drag = true;
|
|
|
+ startPoint = e.clientY;
|
|
|
+ topHeight = eleObj.top.height();
|
|
|
+ bottomHeight = eleObj.bottom.height();
|
|
|
+ limitMax = eval(limit.max);
|
|
|
+ });
|
|
|
+ $('body').mousemove(function (e) {
|
|
|
+ if (drag) {
|
|
|
+ let moveSize = e.clientY - startPoint;
|
|
|
+ topChange = topHeight + moveSize;
|
|
|
+ topChange = topChange < limit.min ? limit.min : topChange;
|
|
|
+ topChange = topChange > limitMax ? limitMax - 3 : topChange;
|
|
|
+ bottomChange = bottomHeight - moveSize;
|
|
|
+ bottomChange = bottomChange < limit.min ? limit.min : bottomChange;
|
|
|
+ bottomChange = bottomChange > limitMax ? limitMax - 3 : bottomChange;
|
|
|
|
|
|
+ //设置上部分div高度
|
|
|
+ eleObj.top.height(topChange);
|
|
|
+ //设置上部分div内spread高度
|
|
|
+ eleObj.topSpread.height(topChange - limit.notTopSpread);
|
|
|
+ //设置下部分div高度
|
|
|
+ eleObj.bottom.height(bottomChange);
|
|
|
+ //设置下部分div内spread高度
|
|
|
+ eleObj.bottomSpread.height(bottomChange - limit.notBottomSpread);
|
|
|
+ mouseMoveCount += Math.abs(moveSize);
|
|
|
+ if (mouseMoveCount > triggerCBSize && callback) {
|
|
|
+ callback();
|
|
|
+ mouseMoveCount = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('body').mouseup(function (e) {
|
|
|
+ if (drag) {
|
|
|
+ drag = false;
|
|
|
+ mouseMoveCount = 0;
|
|
|
+ //将高度信息存储到localstorage
|
|
|
+ let topHeightInfo = eleObj.top.height();
|
|
|
+ setLocalCache(`${module}${eleObj.top.attr('id')}Height`, topHeightInfo);
|
|
|
+ let bottomHeightInfo = eleObj.bottom.height();
|
|
|
+ setLocalCache(`${module}${eleObj.bottom.attr('id')}Height`, bottomHeightInfo);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ * 加载上下高度
|
|
|
+ * module: 所属模块,防止不同页面相同id导致localstorage数据被覆盖
|
|
|
+ * eleObj: top, topSpread, bottom, bottomSpread
|
|
|
+ * limit: totalHeight(实时的上下部分总高度) notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
|
|
|
+ * */
|
|
|
+
|
|
|
+ function loadVerticalHeight(module, eleObj, limit, callback) {
|
|
|
+ let topHeight = getLocalCache(`${module}${eleObj.top.attr('id')}Height`),
|
|
|
+ bottomHeight = getLocalCache(`${module}${eleObj.bottom.attr('id')}Height`);
|
|
|
+ //默认上下比例
|
|
|
+ const topProp = 5;
|
|
|
+ const bottomProp = 2;
|
|
|
+ let topProportion = topProp / (topProp + bottomProp);
|
|
|
+ if (topHeight !== null && bottomHeight !== null) {
|
|
|
+ topHeight = parseFloat(topHeight);
|
|
|
+ bottomHeight = parseFloat(bottomHeight);
|
|
|
+ topProportion = topHeight / (topHeight + bottomHeight);
|
|
|
+ }
|
|
|
+ //设置当前窗口下的的上下部分高度
|
|
|
+ let totalHeight = eval(limit.totalHeight);
|
|
|
+ let curTopHeight = totalHeight * topProportion,
|
|
|
+ curBottomHeight = totalHeight - curTopHeight;
|
|
|
+ eleObj.top.height(curTopHeight);
|
|
|
+ eleObj.topSpread.height(curTopHeight - limit.notTopSpread);
|
|
|
+ eleObj.bottom.height(curBottomHeight);
|
|
|
+ eleObj.bottomSpread.height(curBottomHeight - limit.notBottomSpread);
|
|
|
+ if (callback) {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- return {horizontalSlide, loadHorizonWidth}
|
|
|
+ return {horizontalSlide, loadHorizonWidth, verticalSlide, loadVerticalHeight}
|
|
|
})();
|