jquery插件splitScren实现页面分屏切换模板特效_jquery

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

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

程序相关说明：

HTML结构：

      header

  

      
  

 

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：

      header
    
    

      
    
    

    

      


          
        
        

          

        

          

        

          

      

  
  

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[item].frameName + '';
    }
    for (var i = 0; i 

').addClass('fp-module-' + i + ''); for (var j = 0; j ').addClass(this.data[i][j]).addClass('fp-box'); var topbarDiv = $('

' + '' + '放大缩小 关闭' + '' + '

' + '请选择' + htmlstr + '' + '

' + '

'); var 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 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; } };