jquery插件splitScren实现页面分屏切换模板特效_jquery
程序员文章站
2022-04-22 17:05:10
...
闲来无事,搞了个页面的分屏效果,先来看下效果:
').addClass('fp-module-' + i + '');
for (var j = 0; j ').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 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;
}
};
出于可自定义宽高的目的,屏幕分块由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:
fp version2 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
下一篇: Yii2.0引入CSS,JS文件方法
推荐阅读
-
完美兼容各大浏览器的jQuery插件实现图片切换特效
-
jquery插件splitScren实现页面分屏切换模板特效_jquery
-
完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery
-
基于jQuery插件实现环形图标菜单旋转切换特效_jquery
-
完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery
-
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效_jquery
-
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效_jquery
-
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效_jquery
-
完美兼容各大浏览器的jQuery插件实现图片切换特效
-
jquery插件splitScren实现页面分屏切换模板特效_jquery