iframe分栏拖拽伸缩例子

最新推荐文章于 2023-07-01 12:48:55 发布

qq_41395044

最新推荐文章于 2023-07-01 12:48:55 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_41395044/article/details/78804002

版权

本文介绍如何在一个页面中使用iframe实现可拖拽分栏伸缩的效果。当一个iframe改变尺寸时，其他iframe会相应调整，同时提供可自定义样式的分隔条。在电算化考试平台的需求背景下，作者将原本的frameset替换为iframe，并实现了拖拽和折叠功能。主要代码涉及main.html和right.html。

摘要由CSDN通过智能技术生成

这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是：

一个页面内显示多个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