jquery插件splitScren实现页面分屏切换模板特效
闲来无事，搞了个页面的分屏效果，先来看下效果：
出于可自定义宽高的目的,屏幕分块由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;
}
};
以上所述就是本文的全部内容了，希望大家能够喜欢。
本文地址：https://www.stayed.cn/item/10162
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)