分屏html在线编辑,jquery插件splitScren实现页面分屏切换模板特效

2024-03-02 01:20
文章标签 javascript 模板 实现 特效 页面 切换 html 编辑 jquery 插件 在线 frontend 分屏 splitscren

本文主要是介绍分屏html在线编辑,jquery插件splitScren实现页面分屏切换模板特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

c18f00d7b5b34f59fd1d63e58dcc13b9.gif

程序相关说明：

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

*{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;}

header

//分屏数据

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

});

}

}

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 += '' + options[item].frameName + '';

}

for (var i = 0; i < this.data.length; i++) {

var moduleDiv = $('

for (var j = 0; j < this.data[i].length; j++) {

var fpDiv = $('

').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 < 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;

}

};

以上所述就是本文的全部内容了，希望大家能够喜欢。

这篇关于分屏html在线编辑,jquery插件splitScren实现页面分屏切换模板特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/764488。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
poj3468(线段树成段更新模板题)

poj3468(线段树成段更新模板题)

题意：包括两个操作：1、将[a.b]上的数字加上v；2、查询区间[a,b]上的和 下面的介绍是下解题思路： 首先介绍  lazy－tag思想：用一个变量记录每一个线段树节点的变化值，当这部分线段的一致性被破坏我们就将这个变化值传递给子区间，大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作，那么就从根节点[1,n]开始调用update函数进行操作，如果刚好执行到一个子节点，
阅读更多...
电力系统中的A类在线监测装置—APView400

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高，电能质量在线监测装置在电力系统中得到广泛应用。目前，市场上的在线监测装置主要分为A类和B类两种类型，A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑，并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2