jQuery实现的布局难题：拖动条联动与IFrame内容区调整

200 浏览量更新于2024-08-29 收藏 73KB PDF 举报

在编写网页布局时，遇到一个挑战是创建一个可以动态调整大小且内含iframe的布局，同时保持拖动条的连贯性。作者通过使用HTML、CSS和jQuery来解决这个问题。以下是关键知识点的详细解释： 1. 基础结构：使用`<html>`元素作为文档的根节点，并设置XML命名空间`xmlns`属性，确保兼容性。`<!DOCTYPE html>`声明用于指定文档类型，这里是XHTML 1.0过渡版本。 2. CSS样式：创建一个无边距和填充的全局样式，以及针对侧边栏`#sideBar`和拖动条`#toggleBar`的特定样式。侧边栏固定宽度（200px），高度占满整个屏幕，采用滚动条以便内容可滚动。拖动条设置为7px宽，100%高，显示为灰色背景，并带有可拖动的鼠标指针样式。 3. jQuery集成：引入jQuery库，便于实现动态功能。`$(document).ready()`函数确保在DOM加载完成后执行脚本。 4. 动态高度调整：通过`setInterval`函数，定期获取文档内容区域（假设为`document.d`）的高度，这可能是动态内容导致的，然后更新整个布局的高度，以适应内容的变化。这有助于iframe内的内容跟随主体内容的大小变化。 5. 使用IFrame：在布局中，可能有一个`<iframe>`元素，它通常用来嵌入其他网站的内容。这种设计允许用户在不刷新整个页面的情况下加载和显示不同的内容，提供更好的用户体验。 6. 解决问题的关键：解决的主要问题是当用户拖动中间的拖动条时，如何同步调整内容区域和侧边栏的大小。这涉及到JavaScript事件监听（如`mousemove`或`mousedown`），以及计算和更新`<td>`元素的大小，确保iframe内容区域跟随整体布局的调整。 7. 整体思路：布局问题的解决方案在于结合CSS布局技巧和JavaScript交互逻辑，通过调整`<td>`元素的大小和iframe的大小来实现响应式设计。作者可能使用了jQuery的`.width()`或`.css()`方法来动态改变元素尺寸，并处理边界情况和用户交互事件。通过以上步骤，作者成功地实现了既可以通过拖动条调整布局，又可以包含iframe内容的自适应网页布局，确保了用户的交互体验和页面的灵活性。

写了一个写了一个layout，拖动条连贯，内容区可为，拖动条连贯，内容区可为iframe

写一个layout本来是一个很简单的事情，可这次的一个layout问题确让我为难了许久才做出来，下面来大概讲解一下问题的出

现与解决过程。

注：本文代码皆基于jquery实现。

按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就

搞定。代码如下：

1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

2 <html xmlns=”http://www.w3.org/1999/xhtml”>

3 <head>

4 <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

5 <title>Untitled Document</title>

6 <style type=”text/css”>

7 *{margin:0px;padding:0px}

8 html{overflow:hidden}

9 #sideBar{width:200px;height:100%;overflow:auto}

10 #toggleBar,.div{

11 width:7px;height:100%;

12 overflow:hidden;background:#eee;

13 cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;

14 }

15 td{display:block;overflow:auto;word-break:break-all;}

16 </style>

17 <script type=”text/javascript” src=”../Common/jquery.gif”></script>

18 <script type=”text/javascript”>

19 $(document).ready(function(){

20 //及时调整页面内容的高度

21 setInterval(function(){

22 var winH=(document.documentElement||document.body).clientHeight;

23 $(“#tbl,#sideBar,#toggleBar,#main”).css(“height”,winH);

24 $(“td”).each(function(){$(this).html()||$(this).html(” “)});

25 },100)

26 }

27 );

29 var begin_x;

30 var drag_flag = false;

31 document.onmousemove = mouseDrag

32 document.onmouseup = mouseDragEnd

33 //半透明拖动条

34 var alphaDiv=”<div class=’div’ id=’alphaDiv’ style=’position:absolute;height:2000px;top:0;z-

index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px’> </div>”;

35 function setDrag(){

36 drag_flag=true;

37 begin_x=event.x;

38 //添加半透明拖动条

39 $(alphaDiv).css(“left”,$(“#toggleBar”)[0].offsetLeft).appendTo(“body”);

40 }

42 //拖动时执行的函数

43 function mouseDrag(){

44 if(drag_flag==true){

45 if (window.event.button==1){

46 var now_x=event.x;

47 var value=parseInt($(“#alphaDiv”)[0].style.left)+now_x-begin_x;

48 $(“#alphaDiv”)[0].style.left=value+”px”;

49 begin_x=now_x;

50 }

51 $(“body”).css(“cursor”,”e-resize”); //设定光标类型

52 }else{

53 try{

54 $(“#sideBar”)[0].style.pixelWidth=$(“#alphaDiv”)[0].style.left;

55 $(“#alphaDiv”).remove();

56 }catch(e){}

57 }

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38650066

粉丝: 5
资源: 907

jQuery实现的布局难题：拖动条联动与IFrame内容区调整

一个刚完成的layout（拖动流畅，不受iframe影响）

Android-ImageNice9Layout仿Nice首页图片列表9图样式并实现拖拽效果

flex textlayout 滚动条

Doesburg: Vue Grid Layout拖拽布局设计器

写一个android的登录layout

android如何将一个layout应用到另一个layout中

写出一个 ant design layout 布局

vue-grid-layout 拖拽echarts

用vue 写一个类似EasyUI layout的自适应布局页面

一个layout中写了两个FrameLayout，怎么把listview显示在fragment上面

最新资源