个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; char
=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-
:-all;}16 </style>
17 <script type="text/javascript" src="../Common/jquery.g
"></script>18 <script type="text/javascript">
19 $(document).ready(function
{20 //及时调整页面内容
高度21
Interval(function{22 var winH=(document.documentElement||document.body).clientHeight;
23 $("#tbl,#sideBar,#toggleBar,#
").css("height",winH);24 $("td").each(function
{$(this).html||$(this).html(" ")});25 },100)
26 }
27 );
28
29 var begin_x;
30 var drag_flag = false;
31 document.onmousemove = mouseDrag
32 document.onmouseup = mouseDragEnd
33 //半透明拖动条
34 var alphaDiv="<div
='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
Drag{36 drag_flag=true;
37 begin_x=event.x;
38 //添加半透明拖动条
39 $(alphaDiv).css("left",$("#toggleBar")[0].off
Left).appendTo("body");40 }
41
42 //拖动时执行
43 function mouseDrag
{44
(drag_flag
true){45
(window.event.button1){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 }
{53 try{
54 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
55 $("#alphaDiv").remove
;56 }catch(e){}
57 }
58 }
59
60 function mouseDragEnd
{61 //设置拖动条
位置62
(drag_flagtrue){63 //设定拖动条
位置(设定左侧宽度)64 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
65 $("#alphaDiv").remove
; //删除半透明拖动条66 $("body").css("cursor","normal"); //恢复光标类型
67 }
68 drag_flag=false;
69 }
70 </script>
71 </head>
72 <body>
73 <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
74 <tr>
75 <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
76 </td>
77 <td width="1" _disibledevent="COLOR: #0000ff">>
算是自己
点发现点心得体会吧不知对大家有没有用处只管拿出来献丑了！(首发于蓝色经典)
最新评论