iframe分栏拖拽伸缩例子
这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是：
一个页面内显示多个iframe，一个变宽，另一个就变窄，一个变高，另一个就变矮的这种可自由伸缩的效果。它们之间有一个可多拽的分隔条。
我们公司的电算化考试平台需要这样的效果。最开始用的frameset，框架集，但有些问题，比如分隔条的样式不好自己设计，frameset页面不支持执行javascript。
后来我对其进行了改进，将frameset改为使用iframe，通过自己实现分隔条和拖拽效果来满足功能。
效果图：
可以点击分隔条折叠，也可以拖动分隔条调整各区域大小。
上图中，main.html页面按左右分隔嵌入了一个left.html和一个right.html
right.html里又按上下分隔嵌入了right_top.html和right_bottom.html
由于left.html、right_top.html、right_bottom.html是具体内容页面，此处不贴出代码，只贴出main.html和right.html的代码。
main.html代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" >
6 <meta name="renderer" content="webkit">
7 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
8 <style type="text/css">
9 *{padding:0px;margin:0px;}
10 html,body{width:100%;height:100%;}
11 </style>
12 <title>会计电算化专业技能考试系统</title>
13 <script type="text/javascript">
14 /***
15 *
16 * iframe横向分隔条拖拽伸缩实例 陈建宇 2016-6-14
17 *
18 ***/
19 function init(){
20
21 var li = $("#li");//left iframe
22 var ri = $("#ri");//right iframe
23 var s = $("#s");//中间分割条
24 var img = s.children("img").eq(0);
25 var drag = $("#drag");//分隔条中的拖拽层.
26
27 var clientWidth = $(window).width();
28 var li_init_width=270;//上边iframe要显示的宽度,若需要调整默认宽度,请改此值即可.
29 var s_init_width=10;//分隔条宽度默认值
30 var ri_width=clientWidth-li_init_width-s_init_width;//底部iframe要显示的宽度
31
32 //初始化
33 li.css("width",li_init_width+"px");
34 ri.css("width",ri_width+"px");
35 s.css("left",li_init_width+"px").css("width",s_init_width+"px");
36 img.css("width",s_init_width+"px").css("box-shadow","0 0 6px #666");
37
38 var is_drag = false;//是否点住并进行了拖拽
39
40
41 /***
42 * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
43 * 如果只执行了mousedown,mouseup说明是点击.
44 */
45
46
47 drag.unbind("mousedown").mousedown(function () {
48 //获得分隔条内拖拽层离顶边的距离
49 var li_width = parseInt(li.css("width"));
50 var ri_width = parseInt(ri.css("width"));
51
52 //分隔条div宽度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
53 s.css("width","100%").css("left","0px");
54 img.css("left",li_width);
55
56 var start_x = event.clientX;
57
58 drag.unbind("mousemove").mousemove(function (event) {
59 is_drag = true;
60 var current_x = event.clientX;
61 var cha = current_x - start_x;//算偏移差量
62
63 li.css("width",(li_width+cha)+"px");
64 ri.css("width",(ri_width-cha)+"px");
65 img.css("left",(li_width+cha)+"px");
66
67
68
69 });
70
71 drag.unbind("mouseup").mouseup(function (event) {
72 var left = parseInt(img.css("left"));
73 s.css("width",s_init_width+"px").css("left",left+"px");
74 img.css("left","0px");
75
76 //处理非拖拽的click情况
77 if(!is_drag){
78
79 //直接设定固定值
80 var src=img.attr("src");
81 if(src.indexOf("toleft")!=-1){
82 li.css("width","0px");
83 s.css("left","0px");
84 clientWidth = $(window).width();
85 ri.css("width",(clientWidth-s_init_width)+"px");
86 img.attr("src",src.replace("toleft","toright"));
87 }else{
88 li.css("width",li_init_width+"px");
89 s.css("left",li_init_width+"px");
90 clientWidth = $(window).width();
91 ri.css("width",(clientWidth-li_init_width-s_init_width)+"px");
92 img.attr("src",src.replace("toright","toleft"));
93 }
94
95 }
96
97 drag.unbind("mousemove");
98 is_drag = false;
99
100
101
102 });
103
104
105
106 });
107
108
109 //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
110 $(window).resize(function() {
111 //顶部iframe保持高度不变,改变底部iframe高度
112 var clientWidth = $(window).width();
113 var li_width = parseInt(li.css("width"));
114 var new_ri_width = clientWidth - li_width - s_init_width;
115 ri.css("width",new_ri_width+"px");
116
117 });
118
119 }
120
121
122
123 /***
124 * 加载左边页面方法 陈建宇 2016-6-21
125 * 当右边页面先加载完后再加载左边页面,因为左边页面需要控制右边页面里的iframe
126 * 如果右边页面还没加载完,则会出错,左边页面也会加载失败.
127 */
128 function loadLeft(){
129 $("#li").attr("src","exam/left.html");
130 }
131
132
133 $(document).ready(function(){
134
135 init();
136
137 });
138
139 </script>
140
141
142 </head>
143 <body scroll="no">
144 <iframe id="li" name="left" src="left.html" frameborder="0" style="height:100%;border:none;position:absolute;left:0px;top:0px;z-index:1;"></iframe>
145 <div id="s" style="height:100%;position:absolute;z-index:3;cursor:move;">
146 <img style="height:100%;position:absolute;z-index:1;" src="data:images/toleft.png"/>
147 <div style="height:100%;width:100%;position:absolute;z-index:2;margin-left:0px;margin-top:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
148 </div>
149 <iframe id="ri" name="right" src="right.html" frameborder="0" style="height:100%;border:none;position:absolute;top:0px;right:0px;z-index:2;"></iframe>
150
151
152 </body>
153
154 </html>
right.html代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title>iframe纵向分隔条拖拽伸缩</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <style type="text/css">
8 *{padding:0px;margin:0px;}
9 html,body{width:100%;height:100%;}
10 </style>
11 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
12 <script type="text/javascript">
13
14 /***
15 *
16 * iframe纵向分隔条拖拽伸缩 陈建宇 2016-6-14
17 *
18 ***/
19
20 function init(){
21
22 var ti = $("#ti");//top iframe
23 var bi = $("#bi");//bottom iframe
24 var s = $("#s");//中间分割条
25 var img = s.children("img").eq(0);
26 var drag = $("#drag");//分隔条中的拖拽层.
27
28 var clientHeight = $(window).height();
29 var ti_init_height=160;//上边iframe要显示的高度,若需要调整默认高度,请改此值即可.
30 var s_init_height=10;//分隔条高度默认值
31 var bi_height=clientHeight-ti_init_height-s_init_height;//底部iframe要显示的高度
32
33 //初始化
34 ti.css("height",ti_init_height+"px");
35 bi.css("height",bi_height+"px");
36 s.css("top",ti_init_height+"px").css("height",s_init_height+"px");
37 img.css("height",s_init_height+"px").css("box-shadow","0 0 6px #666");
38
39 var is_drag = false;//是否点住并进行了拖拽
40
41
42 /***
43 * 分隔条事件处理,如果用户执行了mousedown,mousemove,mouseup说明是拖拽,
44 * 如果只执行了mousedown,mouseup说明是点击.
45 */
46
47
48 drag.unbind("mousedown").mousedown(function () {
49 //获得分隔条内拖拽层离顶边的距离
50 var ti_height = parseInt(ti.css("height"));
51 var bi_height = parseInt(bi.css("height"));
52
53 //分隔条div高度设为100%,撑满屏,只有这样才能在拖拽分隔条时,有效的控制mouseup事件.
54 s.css("height","100%").css("top","0px");
55 img.css("top",ti_height);
56
57 var start_y = event.clientY;
58
59 drag.unbind("mousemove").mousemove(function (event) {
60 is_drag = true;
61
62 var current_y = event.clientY;
63 var cha = current_y - start_y;//算偏移差量
64
65 ti.css("height",(ti_height+cha)+"px");
66 bi.css("height",(bi_height-cha)+"px");
67 img.css("top",(ti_height+cha)+"px");
68
69
70
71 });
72
73 drag.unbind("mouseup").mouseup(function (event) {
74 var top = parseInt(img.css("top"));
75 s.css("height",s_init_height+"px").css("top",top+"px");
76 img.css("top","0px");
77
78 //处理非拖拽的click情况
79 if(!is_drag){
80
81 //直接设定固定值
82 var src=img.attr("src");
83 if(src.indexOf("totop")!=-1){
84 ti.css("height","0px");
85 s.css("top","0px");
86 clientHeight = $(window).height();
87 bi.css("height",(clientHeight-s_init_height)+"px");
88 img.attr("src",src.replace("totop","tobottom"));
89 }else{
90 ti.css("height",ti_init_height+"px");
91 s.css("top",ti_init_height+"px");
92 clientHeight = $(window).height();
93 bi.css("height",(clientHeight-ti_init_height-s_init_height)+"px");
94 img.attr("src",src.replace("tobottom","totop"));
95 }
96
97 }
98
99 drag.unbind("mousemove");
100 is_drag = false;
101
102
103
104 });
105
106
107
108 });
109
110 //当窗口大小发生改变时,重新渲染页面,以使各组件自适应高宽度.
111 $(window).resize(function() {
112 //顶部iframe保持高度不变,改变底部iframe高度
113 var clientHeight = $(window).height();
114 var ti_height = parseInt(ti.css("height"));
115 var new_bi_height = clientHeight - ti_height - s_init_height;
116 bi.css("height",new_bi_height+"px");
117
118 });
119
120
121 }
122
123
124
125
126
127 $(document).ready(function(){
128 init();
129 parent.loadLeft();
130 });
131 </script>
132 </head>
133 <body scroll="no">
134 <iframe id="ti" name="top" src="right_top.html" frameborder="0" style="width:100%;border:none;position:absolute;top:0px;left:0px;z-index:1;"></iframe>
135 <div id="s" style="width:100%;position:absolute;z-index:3;cursor:move;">
136 <img style="width:100%;position:absolute;z-index:1;" src="data:images/totop.png"/>
137 <div style="width:100%;height:100%;position:absolute;z-index:2;margin-top:0px;margin-left:0px;padding:0px;filter:alpha(opacity=0);opacity:0;background-color:#fee;" id="drag"></div>
138 </div>
139 <iframe id="bi" name="bottom" src="right_bottom.html" frameborder="0" style="width:100%;border:none;position:absolute;bottom:0px;left:0px;z-index:2;"></iframe>
140
141 </body>
142 </html>
分隔条图片：
iframe分栏拖拽伸缩例子的更多相关文章
- android Viewpager HorizontalScrollView 实现分页栏拖拽
源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果: 前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 关于jqueryUI里的拖拽排序
主要参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这 ...
- Android实现RecyclerView侧滑删除和长按拖拽-ItemTouchHelper
RecyclerView这个被誉为ListView和GirdView的替代品,它的用法在之前的一篇博文中就已经讲过了,今天我们就来实现RecyclerView的侧滑删除和长按拖拽功能,实现这两个功能我 ...
- WPF中元素拖拽的两个实例
今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...
- threejs 限制物件只能在指定平面上拖拽
threejs提供有 DragController.js的例子来辅助拖拽 该例子可以在基于当前屏幕的x和y轴上拖拽物体,但是它不能影响z轴. 查看代码,可以在touchStart\mousedown下 ...
- lowcodeEngine 组件面板的拖拽功能
设计器和渲染器处在不同的 Frame 渲染器以单独的 iframe 嵌入,xxx-simulator-renderer 通过和 host进行通信来和设计器打交道,比如点击渲染画布任意一个位置,需要能计 ...
- 纯JS.CSS编写的可拖拽并左右分栏的插件（复制代码就能用）
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- IE8利用setCapture和releaseCapture解决iframe的拖拽事件
最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,最后查找资料得知可以使用ie自带的setCapture和releaseCap ...
随机推荐
- MyBatis-Plus插入值后返回主键
LZ做练手设计的时候有这样一个订单需求,先插入订单表数据(t_order),再写入订单详情表(t_orderDetail),详情表需要有一个与t_order的外键约束 t_order ( oid ...
- python xlwings实用操作记录
import xlwings as xw tfile="test.xlsx" newfile="new.xlsx" app = xw.App(visible=F ...
- sql函数的用法
1.codename 作为翻译函数 CREATE DEFINER=`root`@`localhost` FUNCTION `codename`(`sys_code` varchar(20),`stat ...
- SAP transformation特殊字符
unicode 0000 在transformation中总被翻译成,这个转义在其他语法中不存在,所以总是报错.
- 再次打开Spring界面，多处报错
分享一下经历 在我再次打开Srpring之后,打算解决一下"历史遗留问题",发现多处标红(挺崩溃的)! 就比如这句话,刚才就是不亮: 毕竟我上次的应用还是很顺利的,所以也就没有第一 ...
- 在CentOS中搭建NFS
概述 NFS是一款经典的网络文件系统,在Linux上我们可以通过创建一个NFS服务在不同的服务器之间共享磁盘文件,而不用在多个服务器之间进行不断的拷贝复制,麻烦且浪费存储空间.在k8s中我们也可以使用 ...
- DBA必备的Mysql知识点：数据类型和运算符
摘要:本文主要为大家带来Mysql中的3种数据类型和3种运算符. 本文分享自华为云社区<Mysql中的数据类型和运算符>,作者: 1+1=王. Mysql的数据类型 Mysql支持数值型. ...
- 学习ASP.NET Core Blazor编程系列三十——JWT登录（4）
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
- 小霸王、红白机、FC游戏、街机游戏在线玩的网站
前段时间小笨就想做一个红白机在线玩的网站,作为90后,也玩过不少小霸王fc游戏,于是花了两个星期时间做了出来.前端界面略丑,因为小笨不是专做前端的,就将就一下吧,哈哈!网站暂时添加了数款怀旧游戏,包括 ...
- 简述SpringAOP的实现原理
Spring默认采取的动态代理机制实现AOP,当动态代理不可用时 (代理类无接口)会使用CGlib机制. Spring提供了两种方式来生成代理对象:JDKProxy和Cglib,具体使用哪种方式生 ...