div可拉伸插件

最近需要做一个点击某个按钮，浏览器底端弹出一个可拉伸div框的功能模块，div框弹出来的同时，页面的其余部分动态向上移；div框关闭的时候， 页面的其余部分动态向下移。现将实现过程总结如下：

1.div可拉伸插件：

/**
  使div可拉伸的插件
 选项 Options={
             directions:["n","s","w","e"],  //可拉伸的方向数组 只可以取这几个值
             xMin: 8, //最小宽度
             yMin: 8, //最小高度
             offset: 5, //距垂直边缘的水平距离阈值 5个像素内 鼠标符号由普通图表变为双向延伸箭头 距水平边缘的垂直距离阈值 5个像素内 鼠标符号由普通图表变为双向延伸箭头
             callback:function //拉伸后执行的语句
        }

   使用方法
   $("#divId").resizableDiv{});
   div必须拥有 stretchable-div-cls 类
*/

Array.prototype.indexOf=function(value) {

             for(var i = 0; i < this.length; i++) {  
                    if (this[i] == value) return i;  
             }  
             return -1;  
};

$.fn.resizableDiv = function(options){

        var theobject = null; //This gets a value as soon as a resize start
        var defaultOptions={
             directions:["n","s","w","e"],  //可拉伸的方向数组
             xMin: 8, //最小宽度
             yMin: 8, //最小高度
             offset: 5,//距垂直边缘的水平距离阈值 5个像素内 鼠标符号由普通图表变为双向延伸箭头 距水平边缘的垂直距离阈值 5个像素内 鼠标符号由普通图表变为双向延伸箭头
             callback:function(obj){ console.log("finished"); } //回调函数 div拉伸完成后 应执行的语句

        }

        //这里其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。   
        var $options = $.extend(defaultOptions,options); 
        var $divCls = "stretchable-div-cls"; 

        function resizeObject() {
            this.el   = null; //pointer to the object
            this.dir  = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
            this.grabx = null;     //Some useful values
            this.graby = null;
            this.width = null;
            this.height = null;
            this.left = null;
            this.top = null;
        }


        //Find out what kind of resize! Return a string inlcluding the directions
        function getDirection(el) {
            var xPos, yPos, offset, dir;
            dir = "";
            xPos = window.event.offsetX;  //检查相对于触发事件的对象，鼠标位置的水平坐标 
            yPos = window.event.offsetY;  //检查相对于触发事件的对象，鼠标位置的垂直坐标 

            offset = $options.offset; //The distance from the edge in pixels

            /*console.log("xPos: " + xPos + "; yPos: " + yPos + "; el.offsetHeight: " + el.offsetHeight
            + "; el.offsetWidth: " + el.offsetWidth);*/

            var directionsArr = $options.directions;

            var ns_flag = false;
            var ew_flag = false;

            if(directionsArr.indexOf("n") != -1){
                if (yPos<offset){
                    dir += "n";
                    ns_flag = true;
                }

            }

            if(directionsArr.indexOf("s") != -1 && ns_flag == false){
                if (yPos > el.offsetHeight-offset) dir += "s";
            }

            if(directionsArr.indexOf("w") != -1){
                if (xPos<offset){
                    dir += "w";
                    ew_flag = true;
                }
            }

            if(directionsArr.indexOf("e") != -1 && ew_flag == false){
                if (xPos > el.offsetWidth-offset) dir += "e";
            }

            return dir;
        }

        function doDown() {
            var el = getReal(event.srcElement, "className", $divCls);

            if (el == null) {
                theobject = null;
                return;
            }       

            console.log("window.event: ");
            console.log(window.event);

            dir = getDirection(el);

            console.log("down dir: " + dir);

            if (dir == "") return;

            theobject = new resizeObject();

            theobject.el = el;
            theobject.dir = dir;

            theobject.grabx = window.event.clientX; //返回鼠标在窗口客户区域中的X坐标。
            theobject.graby = window.event.clientY; //返回鼠标在窗口客户区域中的Y坐标
            theobject.width = el.offsetWidth;  //元素的宽度
            theobject.height = el.offsetHeight;
            theobject.left = el.offsetLeft;
            theobject.top = el.offsetTop; //元素相对于父元素的top

            window.event.returnValue = false; //设置或检查从事件中返回的值  true 事件中的值被返回 false 源对象上事件的默认操作被取消 
            window.event.cancelBubble = true; //检测是否接受上层元素的事件的控制。 TRUE 不被上层原素的事件控制。 FALSE 允许被上层元素的事件控制。这是默认值。
        }

        function doUp() {
            if (theobject != null) {
                theobject = null;
            }
        }

        function doMove() {
            var el, xPos, yPos, str, xMin, yMin;
            xMin = $options.xMin; //The smallest width possible
            yMin = $options.yMin; //height

            el = getReal(event.srcElement, "className", $divCls);

            if (el.className.indexOf($divCls) != -1) {
                str = getDirection(el);
                //console.log("move str: " + str);
                //Fix the cursor    
                if (str == "") str = "default";
                else str += "-resize";
                //通过定义cursor 使div上出现可调节大小的双向箭头
                el.style.cursor = str;
            }

             //Dragging starts here
            if(theobject != null) {//向东和向南只可以相应改变div的宽度和高度  向上和向左除了可以改变div的宽度和高度 还可以改变其left和top 
                //只不过由于屏幕限制 改变不了
                if (dir.indexOf("e") != -1){
                    //window.event.clientX - theobject.grabx 鼠标水平平移距离
                    theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px"; 
                }
                if (dir.indexOf("s") != -1){

                    theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px";
                }

                if (dir.indexOf("w") != -1) {
                    theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) 
                       + "px";
                    theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px";
                }
                if (dir.indexOf("n") != -1) {
                    theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top 
                    + theobject.height - yMin) + "px";
                    theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px";
                }

                window.event.returnValue = false;
                window.event.cancelBubble = true;

                //添加div拉伸完后 执行的回调函数
                $options.callback();
            } 
        }


        function getReal(el, type, value) {
            temp = el;
            while ((temp != null) && (temp.tagName != "BODY")) {
            if ((eval("temp." + type)).indexOf(value) != -1) {
                    el = temp;
                    return el;
                }
                temp = temp.parentElement;
            }
            return el;
        }

        document.onmousedown = doDown;
        document.onmouseup   = doUp;
        document.onmousemove = doMove;

}

2.html代码

<!DOCTYPE html>
<head>

<link rel="stylesheet" href="../../static/bootstrap/3.3.5/css/bootstrap.min.css" 
        th:href="@{/bootstrap/3.3.5/css/bootstrap.min.css}" /> 
<style type="text/css">
</style>
</head>
<body>

<div id="tableContainerDIV" style="overflow:auto;">
</div>

<!-- 20160623 创建底部div -->
<div id="stretchDialog" class="navbar-fixed-bottom stretchable-div-cls" style="height:130px; border:2px solid #ddd; padding-bottom:10px;">  <!-- class="footer" -->

<button type="button" class="close"    onclick="onCloseStretchDlg();" style = "color: #31708f; " > &times;</button> <!-- 关闭按钮 -->
    footer 测试

</div>
<script type="text/javascript">                       document.getElementById("tableContainerDIV").style.height = (window.screen.availHeight-170-130) + 'px'; 
</script>
</body>
</html> 

3.js调用插件代码

//20160623 显示可拉伸div的高度
var g_stretchDialogHeight = 130;

function onclick(){
openStretchDialog();
    //定义div可拉伸
$("#stretchDialog").resizableDiv({directions:["n"],callback:postHanlder});  //只可以通过div上边界上下调整div宽度
}      

//拉伸后执行的回调函数 div拉伸后 执行的语句
function postHanlder(){
var divHeight = document.getElementById("stretchDialog").style.height;
console.log("divHeight: " + divHeight);

g_stretchDialogHeight = divHeight;
var original_height = document. getElementById("tableContainerDIV"). style. height.
replace("px","");

//根据拉伸后div的高度动态调整统计面板容器的高度
document.getElementById("tableContainerDIV").style.height = (window.screen.availHeight-170 - parseInt(g_stretchDialogHeight)) + 'px';    

/*console.log("window.screen.availHeight: ");
console.log(window.screen.availHeight);
console.log(window.screen.availHeight-170 - parseInt(g_stretchDialogHeight));

console.log(document.getElementById("tableContainerDIV").style.height);*/
}

//显示可拉伸div
function openStretchDialog(){
$("#stretchDialog").css("display","");

var original_height = document.getElementById("tableContainerDIV").style.height.replace ("px","");

document.getElementById("tableContainerDIV").style.height = (parseInt(original_height) - g_stretchDialogHeight) + 'px';    

console.log("small height: ");
console.log(document.getElementById("tableContainerDIV").style.height);
}

//点击可拉伸div的关闭按钮 关闭div的同时  动态调节上面div的高度
function onCloseStretchDlg(){
$("#stretchDialog").css("display","none");
    var original_height = document.getElementById("tableContainerDIV").style.height. replace("px",""); 
    console.log("origheight: " + original_height);
    document.getElementById("tableContainerDIV").style.height = (parseInt(original_height) + g_stretchDialogHeight) + 'px';    
    //可拉伸div的高度初始化
    g_stretchDialogHeight = 130;
}