封装的页面分割控件

最新推荐文章于 2021-12-28 09:23:10 发布

丰云

最新推荐文章于 2021-12-28 09:23:10 发布

阅读量149

点赞数

分类专栏：前端应用文章标签： javascript 页面分割

本文链接：https://blog.csdn.net/foren_whb/article/details/114824981

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

最近项目需要，把以前封装的页面分割控件又重写完善了一遍，支持参数定义分割条的样式，是否启用拖动分割、是否启用点击开闭、缩放时是按比例缩放还是按宽度缩放等等。

由于新封装采用了弹性布局方式，因此效果比以前好多了，也不用拓展标签的resize事件了。

其他功能大家各自挖掘吧，上代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        html,body{ margin:0;padding:0;width:100%;height:100%; }
    </style>
</head>
<body>
    <div id="testContent" style="width:50%;height:50%;margin:50px;border: 1px solid red;"></div>
</body>
</html>
<script type="text/javascript">

'use strict';
$.fn.AddUESplit = function (cfg) {
    function mySplit(p, f) {
        var switchSize = 0;
        var parentWidth = 0;
        var parentHeight = 0;
        var contentSize = 0;
        var prevSize = 0;
        var mouseDown = 0;
        var mouseX = 0;
        var mouseY = 0;
        var other = this;
        var config = $.extend({
            resizeType: 'size', // 缩放方式，size：按尺寸缩放， tatio：按比例缩放
            switch: false,  // 是否开启开关功能
            type: 's',      // 分割方向，  s:竖排横切，w:横排竖切
            width: 0,       // 分割线宽度，竖切为宽度，横切为高度
            rate: '1:1',    // 分割比例，  也可以直接像素指定，如：'200px',':600px'
            style: ''       // 分割线的样式, 空值表示无分割线，default表示默认
        }, cfg);
        var myStyle = `
            <style id="ue_split" type="text/css">
                .ue_split_parent {padding:0px;margin:0px;display:flex;}
                .ue_split_prev {}
                .ue_split_midpd {flex:1;background-color:transparent;}
                .ue_split_switch {}
                .ue_split_next {flex:1}
                .ue_split_mid {background-image:radial-gradient(#215fb1,#ffffff,#215fb1);display:flex;}
            </style>`;
        var resize = function(){  
            parentWidth  = parseInt(other.parent[0].clientWidth, 10);
            parentHeight = parseInt(other.parent[0].clientHeight, 10);
            contentSize = (config.type == 's' ? parentHeight : parentWidth) - (config.style ? config.width : 0);
            var l = config.rate.split(':');
            var intp = parseInt(l[0] || 0, 10);
            var intn = parseInt(l[1] || 0, 10);
            if(config.rate.indexOf('px') == -1){
                prevSize = Math.floor(contentSize * intp / (intp + intn));
            }else{
                prevSize = l[0] ? intp : (contentSize - intn) ;
            }
            show();
        };
        var bindEvent = function(){
            other.parent.on('resize', function(){
                resize();
            })
            if(config.style && config.switch){
                other.switch.on('click', function(){
                    if(switchSize){
                        prevSize = switchSize;
                        switchSize = 0;
                        other.switch.css('background-image', 'url(../skin/base/img/splitC' + (config.type == 's' ? 'W' : 'S') + '.png)');
                    }else{
                        switchSize = prevSize;
                        prevSize = 0;
                        other.switch.css('background-image', 'url(../skin/base/img/splitO' + (config.type == 's' ? 'W' : 'S') + '.png)');
                    }
                    show();
                })
                other.midDom.on('mousedown', function (e) {
                    mouseDown = 1;
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                    //s_t.midDom.fadeTo(20, 0.5);//点击后开始拖动并透明
                    $(document).on('mousemove.splitMove', function (e) {
                        if (mouseDown) {
                            prevSize += config.type == 's' ? (e.pageY - mouseY) : (e.pageX - mouseX);
                            prevSize = prevSize < 0 ? 0 : prevSize > contentSize ? contentSize : prevSize;
                            mouseX = e.pageX;
                            mouseY = e.pageY;
                            switchSize = 0;
                            show();
                        }
                    }).on('mouseup.splitUp', function () {
                        mouseDown = mouseX = mouseY = 0;
                        //s_t.midDom.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
                        $(document).off('mousemove.splitMove').off('mouseup.splitUp');
                    });
                });
            }
        };
        var show = function () {
            if (config.type == 's') {
                if(config.style){
                    other.midDom.css({  width: '100%',  height: config.width });
                }
                other.prevDom.css({ width: '100%', height: prevSize });
                other.nextDom.css({ width: '100%' });
            } else {
                if(config.style){
                    other.midDom.css({  width: config.width, height: '100%' });
                }
                other.prevDom.css({ width: prevSize,  height: '100%' });
                other.nextDom.css({ height: '100%' });
            }
            if(config.resizeType == 'size'){
                config.rate = prevSize + 'px'; // 按宽度缩放
            }else{
                config.rate = prevSize + ':' + (contentSize - nextSize); // 按比例缩放
            }
        };
        if($('head').find('#ue_split').length == 0){
            $('head').append(myStyle);
        }
        //console.log('switch:' + config.switch)
        console.log(JSON.stringify(config))
        this.parent  = p.html('').addClass('ue_split_parent').css('flex-direction', (config.type == 's' ? 'column' : 'row'));
        this.prevDom = $('<div class="ue_split_prev"></div>').appendTo(p);
        if(config.style){
            this.midDom  = $('<div class="ue_split_mid ' + config.style + '" style="cursor:' + config.type + '-resize;flex-direction:' + (config.type == 's' ? 'row' : 'column') + ';"></div>').appendTo(p);
            this.midDom.append('<div class="ue_split_midpd"></div>');
            this.switch  = $('<div style="cursor:pointer;background-image:url(../skin/base/img/' + (config.type == 's' ? 'splitCW' : 'splitCS') + '.png);width:' + (config.type == 's' ? '173' : '9') + `px;height:` + (config.type == 's' ? '9' : '173') + 'px;"></div>').appendTo(this.midDom);
            this.midDom.append('<div class="ue_split_midpd"></div>');
        }
        this.nextDom = $('<div class="ue_split_next"></div>').appendTo(p);
        resize();
        bindEvent();
    }
    return new mySplit($(this), cfg);
};

    var tmp = $('#testContent').AddUESplit({switch: true, type: 'w', rate: '200px', width: 9, style: 'default' });
    console.log(JSON.stringify(tmp))
    tmp.nextDom.AddUESplit({type: 's', rate: '2:5' });

</script>