基于jquery的页面分屏切换模板

闲来无事，搞了个页面的分屏效果，先来看下效果：

出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般.

程序相关说明：

HTML结构：

<div class="header">
            header
</div>
    <div class="container" id="displayArea">
            <!-- 分屏内容渲染区域 -->
    </div>
<div class="footer">
 <!--省略其他代码-->
</div>

js调用：

//分屏数据
            var iframes = [
                    {
                        id:'frames_1',
                        frameName:'百度一下',
                        src:'http://www.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度地图',
                        src:'http://map.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度下',
                        src:'http://www.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度视频',
                        src:'http://v.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度新闻2',
                        src:'http://news.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'test6',
                        src:'6.html'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度新闻',
                        src:'http://news.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'88888',
                        src:'6.html'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度更多',
                        src:'http://www.baidu.com/more/'
                    }
                ];
            //自适应屏幕
            window.onload = function(){
                Panel.resize();
            }
            window.onresize = function(){
                Panel.resize();
            }

            //初始化分屏
            var splitScreen = new splitScreen($('#displayArea'),iframes);

            //监听removeSettingCls自定义事件
            splitScreen._on('removeSettingCls',function(){
                splitScreen.toggleTopbar(function(){
                        $('.ulTab li[data-fp="setting"]').removeClass('currentLi');
                    });
            });
            //分屏切换
            function changeModel(obj){
                var fpmodel = $(obj).attr('data-fp');
                if(fpmodel !="setting"){
                    splitScreen.screenMode(fpmodel,function(){
                        $(obj).addClass('currentLi').siblings().removeClass('currentLi');
                    });
                }else{
                    splitScreen.toggleTopbar(function(){
                        $(obj).toggleClass('currentLi');
                    });
                }
            }

splitScreen.js相关代码说明：

1.定义一个类

var splitScreen = function(elem, options) {
    this.elem = elem; //分屏模块渲染区域元素
    this.options = options;//分屏链接数据
    this.initialize.apply(this); //初始化初始化分屏
}

2.prototype主要方法

splitScreen.prototype= {
        initialize: function() {},//初始化方法
        screenMode:  function(){},//分屏方法
        renderPanel:function(){},//渲染分屏DOM
        bindPanel:function(){} //事件监听
 
};

3.screenMode()方法说明：

主要是根据不同的分屏切换不同的Class，通过CSS类去控制分屏布局.这样写的好处应该是可以自定义布局的宽高大小，但是比较繁琐。如下：

switch (Number(mode)) {
            case 1:
                this.data = [
                    ['fp-1-1']
                ];
                this.defaultShow = [0];
                break;
            case 2:
                this.data = [
                    ['fp-2-1'],
                    ['fp-2-2']
                ];
                this.defaultShow = [1, 2];
                break;
            case 3:
                this.data = [
                    ['fp-3-1'],
                    ['fp-3-2', 'fp-3-3']
                ];
                this.defaultShow = [1, 2, 3];
                break;
            case 4:
                this.data = [
                    ['fp-4-1', 'fp-4-2'],
                    ['fp-4-3', 'fp-4-4']
                ];
                this.defaultShow = [4, 1, 2, 3];
                break;
            case 5:
                this.data = [
                    ['fp-5-1'],
                    ['fp-5-2'],
                    ['fp-5-3', 'fp-5-4', 'fp-5-5']
                ];
                this.defaultShow = [4, 5, 1, 2, 3];
                break;
            case 6:
                this.data = [
                    ['fp-6-1'],
                    ['fp-6-2', 'fp-6-3'],
                    ['fp-6-4', 'fp-6-5', 'fp-6-6']
                ];
                this.defaultShow = [4, 5, 6, 7, 8, 8];
                break;
            default:
                alert("不支持" + mode + "分屏");
        }

CSS布局控制：

.fp-box{position:absolute;border:1px solid #000;background:#fff;}
            .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
            .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
            .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
            .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
            .fp-3-2{top:0;right: 0;width:300px;height:50%;}
            .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}

            .fp-4-1{top:0;left:0;right: 50%;height:50%;}
            .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
            .fp-4-3{top:0;right: 0;width:50%;height:50%;}
            .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
    
            .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
            .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
            .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
            .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
            .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}

            .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
            .fp-6-2{top:0;width:300px;right: 0;height:250px;}
            .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
            .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
            .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
            .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}

完整代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fp version2</title>
    
    <style type="text/css">
            *{margin:0;padding:0;}
            .header{background:#ddd;height:120px;}
            .footerCon{width:320px;margin: 0 auto;}
            .footerCon .dropDiv{background: #fff; margin: 10px 0 0 0; float: left;}
            .footerCon .fpmodel{display: none;float: right;width:160px;}
            .footerCon .saveBtn{margin: 10px 0 0 10px; padding: 2px 10px;border:1px solid #CCC;cursor: pointer;}
            .clearFix:after{content:’’;display:block;height:0;overflow:hidden;clear:both;} 
            .footer { height: 40px; background: #ABABAB; position: fixed; bottom: 0px; width: 100%; }
            .footer .ulTab {list-style-type: none;width:200px;overflow: hidden;float: left;}
            .footer .ulTab li{float: left;height:16px;padding: 12px 15px;cursor: pointer;}
            .footer .ulTab li.currentLi{background: #fff;}
            
            .tabImg{width:18px;height: 14px;border:1px solid #707070;background:#fff;}
            .tabImg td{width: 9px;height: 5px;border:1px solid #707070;}
            .divImg{border-width:2px;height: 12px;}
            .td3Img td{height: 3px;}
            .currentLi .tabImg,.currentLi .tabImg td{border-color:#1e7be4;}

            .topbarDiv{position: absolute;left: 0;top:0;right:0;border:1px solid #dedede;z-index: 1;height:25px;padding:3px;background: #61C0FA;display: none;}
            .changeBtn{cursor:pointer; padding: 2px 10px;float: left;}
            .dropDiv,.footer .dropDiv{position: relative;width: 100px;z-index: 100;}
            .dropDiv .curSrc,.footer .dropDiv .curSrc{display: inline-block;height: 20px;line-height: 20px;padding: 0 2px;}
            .dropDiv ul,.footer .dropDiv ul{position: absolute;left: -1px;top:20px;background: #fff;width:100px;border:1px solid #1E7BE4;display: none;}
            .dropDiv ul li,.footer .dropDiv ul li{line-height: 20px;padding: 0 2px;}
            .dropDiv ul li.currentSrc,.footer .dropDiv ul li.currentSrc{background: #1E7BE4;color: #fff;cursor: pointer;}
            .dropDiv ul li:hover,.footer .dropDiv ul li:hover{background:#AEC9F3;color: #fff;cursor: pointer;}
            .optionsWrap{float: right;}
            .optionsWrap a{font-family: 'MicroSoft YaHei';color:#fff;text-decoration:none;float: left;}
            .optionsWrap a:hover{color: #fdd;cursor:pointer;}
            .btnBig{width: 50px;height:30px;text-align: center;}
            .btnSmall{width: 50px;height:30px;text-align: center;}
            .btnCls{width: 50px;height:30px;text-align: center;}
            /*分屏模块布局*/
            .container{position: relative;}
            .fp-box{position:absolute;border:1px solid #000;background:#fff;}
            .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
            .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
            .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
            .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
            .fp-3-2{top:0;right: 0;width:300px;height:50%;}
            .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}

            .fp-4-1{top:0;left:0;right: 50%;height:50%;}
            .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
            .fp-4-3{top:0;right: 0;width:50%;height:50%;}
            .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
    
            .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
            .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
            .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
            .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
            .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}

            .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
            .fp-6-2{top:0;width:300px;right: 0;height:250px;}
            .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
            .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
            .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
            .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}
    </style>
</head>
<body>    
        <div class="header">
            header
        </div>
        <div class="container" id="displayArea">
            <!-- 分屏内容区 -->
        </div>
        <div class="footer">
        <div class="footerCon clearFix">
            <ul class="ulTab">
                <li class="currentLi" data-fp ="1" onclick="changeModel(this)">
                    <div class="tabImg divImg"></div>
                </li>
                <li data-fp ="3" onclick="changeModel(this)">
                    <table class="tabImg" cellpadding="0" cellspacing="0">
                        <tr>
                            <td rowspan="2"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </table>
                </li>
                <li data-fp ="6" onclick="changeModel(this)">
                    <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
                        <tr>
                            <td rowspan="2" colspan="2"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </li>
                <li data-fp ="setting" onclick="changeModel(this)" title="设置">
                    <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
                        <tr>
                            <td rowspan="2" colspan="2"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                    </table>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/splitScreen.js"></script>
    <script type="text/javascript">
            //分屏数据
            var iframes = [
                    {
                        id:'frames_1',
                        frameName:'百度一下',
                        src:'http://www.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度地图',
                        src:'http://map.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度下',
                        src:'http://www.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度视频',
                        src:'http://v.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度新闻2',
                        src:'http://news.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'test6',
                        src:'6.html'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度新闻',
                        src:'http://news.baidu.com'
                    },
                    {
                        id:'frames_1',
                        frameName:'88888',
                        src:'6.html'
                    },
                    {
                        id:'frames_1',
                        frameName:'百度更多',
                        src:'http://www.baidu.com/more/'
                    }
                ];
            window.onload = function(){
                Panel.resize();
            }
            window.onresize = function(){
                Panel.resize();
            }

            //初始化分屏
            var splitScreen = new splitScreen($('#displayArea'),iframes);
            
            //监听removeSettingCls自定义事件
            splitScreen._on('removeSettingCls',function(){
                splitScreen.toggleTopbar(function(){
                        $('.ulTab li[data-fp="setting"]').removeClass('currentLi');
                    });
            });
            //分屏切换
            function changeModel(obj){
                var fpmodel = $(obj).attr('data-fp');
                if(fpmodel !="setting"){
                    splitScreen.screenMode(fpmodel,function(){
                        $(obj).addClass('currentLi').siblings().removeClass('currentLi');
                    });
                }else{
                    splitScreen.toggleTopbar(function(){
                        $(obj).toggleClass('currentLi');
                    });
                }
            }
    </script>
</body>
</html>

JS：

/**
 * splitScren.js
 * v1.2
 * 2015-5-14
 * by linxia
 **/
var splitScreen = function(elem, options) {
    this.elem = elem;
    this.options = options;
    this.initialize.apply(this);
}

splitScreen.prototype = {
    initialize: function() {
        this.handlers = {};
        this.screenMode(1);
    },
    screenMode: function(mode, callback) {
        this.elem.empty();
        this.data = null;
        this.defaultShow = null; //默认展示页面的索引
        switch (Number(mode)) {
            case 1:
                this.data = [
                    ['fp-1-1']
                ];
                this.defaultShow = [0];
                break;
            case 2:
                this.data = [
                    ['fp-2-1'],
                    ['fp-2-2']
                ];
                this.defaultShow = [1, 2];
                break;
            case 3:
                this.data = [
                    ['fp-3-1'],
                    ['fp-3-2', 'fp-3-3']
                ];
                this.defaultShow = [1, 2, 3];
                break;
            case 4:
                this.data = [
                    ['fp-4-1', 'fp-4-2'],
                    ['fp-4-3', 'fp-4-4']
                ];
                this.defaultShow = [4, 1, 2, 3];
                break;
            case 5:
                this.data = [
                    ['fp-5-1'],
                    ['fp-5-2'],
                    ['fp-5-3', 'fp-5-4', 'fp-5-5']
                ];
                this.defaultShow = [4, 5, 1, 2, 3];
                break;
            case 6:
                this.data = [
                    ['fp-6-1'],
                    ['fp-6-2', 'fp-6-3'],
                    ['fp-6-4', 'fp-6-5', 'fp-6-6']
                ];
                this.defaultShow = [4, 5, 6, 7, 8, 8];
                break;
            default:
                alert("不支持" + mode + "分屏");
        }
        if (this.data != null) {
            this.renderPanel();
            this.bindPanel();
        }
        callback && callback();
    },
    //渲染DOM结构
    renderPanel: function() {
        var that = this;
        var options = this.options;
        var htmlstr = '';

        for (var item = 0; item < options.length; item++) {
            htmlstr += '<option value="' + options[item].src + '" label = "' + options[item].frameName + '">' + options[item].frameName + '</option>';
        }
        for (var i = 0; i < this.data.length; i++) {
            var moduleDiv = $('<div></div>').addClass('fp-module-' + i + '');

            for (var j = 0; j < this.data[i].length; j++) {
                var fpDiv = $('<div>').addClass(this.data[i][j]).addClass('fp-box');
                var topbarDiv = $('<div class="topbarDiv" style="display: none;">' +
                    '<span class="optionsWrap">' +
                    '<a class="btnBig" title="放大" href="javascript:void(0);">放大</a><a class="btnSmall" title="缩小" href="javascript:void(0);" style="display:none;">缩小</a> <a href="javascript:void(0);" class="btnCls" title="关闭"style="display:none;">关闭</a>' +
                    '</span>' +
                    '<div class="dropDiv">' +
                    '<select class="fp-select"><option value="-1">请选择</option>' + htmlstr +
                    '</select>' +
                    '</div>' +
                    '</div>');
                var iframe = $('<iframe width="100%" height="100%" frameBorder="0" scrolling = "auto"></iframe>');
                if (i == 0) {
                    fpDiv.attr('zp', 'zp');
                }
                fpDiv.append(topbarDiv);
                fpDiv.append(iframe);
                moduleDiv.append(fpDiv);
                this.elem.append(moduleDiv);
            }
        }
        // render iframe
        this.elem.find('iframe').each(function(i) {
            if (options[i]['src']) {
                var frameSrc = options[that.defaultShow[i]]['src'];
                var frameName = options[that.defaultShow[i]]['frameName'];
                var curtopbar = $(this).siblings('.topbarDiv');
                that.loadIframe($(this), frameSrc, frameName);
                curtopbar.find('option').each(function() {
                    if ($(this).attr('label') == frameName) {
                        $(this).attr('selected', 'selected');
                    }
                });

            }
        });
    },
    bindPanel: function() {
        var that = this;
        // add select Event
        this.elem.on('change', '.fp-select', function() {
            var value = $(this).find('option:selected').val();
            var label = $(this).find('option:selected').attr('label');
            var iframe = $(this).closest('.fp-box').find('iframe');
            if (value != "-1") {
                that.loadIframe(iframe, value, label);
            }
        });

        // btnbig Event
        this.elem.on('click', '.btnBig', function() {
            var obj = Panel.getSize();
            var btnSmall = $(this).siblings('.btnSmall');
            var btnCls = $(this).siblings('.btnCls');
            var fpbox = $(this).closest('.fp-box');
            fpbox.css({
                'zIndex': 999
            }).stop().animate({
                'top': 0,
                'left': 0,
                'width': obj.w - 2,
                'height': obj.h,
                'right': 0,
                'bottom': 0

            }, 300).attr('scaleMode', 'large');
            that.elem.find('.fp-box:not([scaleMode="large"])').hide();
            $(this).hide();
            $('html,body').css({
                'overflow': 'hidden'
            });
            btnSmall.show();
            //btnCls.show();
        });
        // btnsmall Event
        this.elem.on('click', '.btnSmall', function() {
            var btnBig = $(this).siblings('.btnBig');
            var fpbox = $(this).closest('.fp-box');
            var btnCls = $(this).siblings('.btnCls');
            fpbox.removeAttr('style').removeAttr('scaleMode');
            $(this).hide();
            that.elem.find('.fp-box').show();
            $('html,body').css({
                'overflow': 'visible'
            });
            btnCls.hide();
            btnBig.show();
        });
        // btncls Event
        this.elem.on('click', '.btnCls', function() {
            var fpbox = $(this).closest('.fp-box');
            fpbox.remove();
            that.elem.find('.fp-box').show();
            that.fire('removeSettingCls');
        });
    },
    toggleTopbar: function(callback) {
        if (this.elem.find('.topbarDiv:visible').length > 0) {
            this.elem.find('.topbarDiv').hide();
        } else {
            this.elem.find('.topbarDiv').show();
        }
        callback && callback();
    },
    loadIframe: function(iframe, src, framename) {
        $(iframe).attr('src', src);
        $(iframe).attr('framename', framename);
    },
    _on: function(type, handler) {
        if (typeof this.handlers[type] == "undefined") {
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
        return this;
    },
    fire: function(type, data) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                handlers[i](data);
            }
        }
    }
};

var Panel = {
    config: {
        header: $('.header'),
        container: $('.container'),
        footer: $('.footer'),
        win: $(window)
    },
    resize: function() {
        var topH = Panel.config.header.height();
        var botH = Panel.config.footer.height();
        var mainH = Panel.config.win.height() - topH - botH;
        mainH = mainH < 0 ? 100 : mainH;
        Panel.config.container.height(mainH);
        if ($('.fp-box[scaleMode="large"]').length > 0) {
            $('.fp-box[scaleMode="large"]').css({
                'width': Panel.config.win.width() - 2,
                'height': mainH
            });
        }
    },
    getSize: function() {
        var obj = {
            w: Panel.config.container.width(),
            h: Panel.config.container.height()
        };
        return obj;
    }
};

 完整demo下载地址：

demo download

水平有限，欢迎各位高手指点，不胜感激....