出于可自定义宽高的目的,屏幕分块由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:
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 += ''; } for (var i = 0; i < this.data.length; i++) { var moduleDiv = $('').addClass('fp-module-' + i + ''); for (var j = 0; j < this.data[i].length; j++) { var fpDiv = $('').addClass(this.data[i][j]).addClass('fp-box'); var topbarDiv = $(''); 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 < 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; } };以上所述就是本文的全部内容了,希望大家能够喜欢。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章推荐
• 【腾讯云】年中优惠,「专享618元」优惠券!• 18个常见angular面试题(附答案分析)• JavaScript的Symbol类型、隐藏属性及全局注册表详解• 什么是消息队列?node中如何使用消息队列?• 浅析IDEA中如何开发Angular• 整理总结JavaScript常见的BOM操作独孤九贱(3)_JavaScript视频教程
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程125595次播放
独孤九贱(6)_jQuery视频教程
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程103897次播放
jQuery与Ajax基础与实战
jQuery是最流行的JS函数库,封装了许多实用的功能,其中最引人入胜的就是Ajax。 jQuery中的Ajax操作,语法简单,操作方便,使Ajax从未如此轻松,前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法,从基本的语法到每个参数,再到具体实例进行了全面的讲解。
AJAX教程4991次播放
Git教程(60分钟全程无废话版)
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持
JavaScript教程4308次播放