iframe分栏拖拽伸缩例子

Posted jsper

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"以上是关于iframe分栏拖拽伸缩例子的主要内容，如果未能解决你的问题，请参考以下文章
 

 ScrollView分栏视图分析


 DIV+css 如何实现左右分栏


 WPF 矩形框8个控制点伸缩及拖拽


 四角拖拽-文本可伸缩


 Finder 的分栏显示模式宽度调整


 vue左右拖拽，内置iframe拖拽卡顿问题