|
|
注：本文代碼皆基于jquery實(shí)現(xiàn)。
按照普通的方法寫一個(gè)layout，一般是用一個(gè)table來(lái)實(shí)現(xiàn)，用中間的td拖動(dòng)來(lái)控制左右兩個(gè)td的大小，這個(gè)問(wèn)題簡(jiǎn)單，很快就搞定。代碼如下：
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 //及時(shí)調(diào)整頁(yè)面內(nèi)容的高度
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 );
28
29 var begin_x;
30 var drag_flag = false;
31 document.onmousemove = mouseDrag
32 document.onmouseup = mouseDragEnd
33 //半透明拖動(dòng)條
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 //添加半透明拖動(dòng)條
39 $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
40 }
41
42 //拖動(dòng)時(shí)執(zhí)行的函數(shù)
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"); //設(shè)定光標(biāo)類型
52 }else{
53 try{
54 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
55 $("#alphaDiv").remove();
56 }catch(e){}
57 }
58 }
59
60 function mouseDragEnd(){
61 //設(shè)置拖動(dòng)條的位置
62 if(drag_flag==true){
63 //設(shè)定拖動(dòng)條的位置（設(shè)定左側(cè)的寬度）
64 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
65 $("#alphaDiv").remove(); //刪除半透明拖動(dòng)條
66 $("body").css("cursor","normal"); //恢復(fù)光標(biāo)類型
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" onmousedown="setDrag()" id="toggleBar"></td>
78 <td id="main">
79 right Panel
80 </td>
81 </tr>
82 </table>
83 </body>
84 </html>演示地址：http://www.ajaxbbs.NET/test/layout/JqSplit/noiframe.htm
上面的這種寫法也是大多數(shù)layout的寫法，著名框架dojo好像也是這么實(shí)現(xiàn)的，其他的沒(méi)試。
但現(xiàn)在的情況仍然不能滿足我們的需求，我們需要左側(cè)或右側(cè)是ifame，通過(guò)iframe調(diào)用相關(guān)的頁(yè)面，在前面的代碼中將右側(cè)改為iframe。
演示地址：http://www.ajaxbbs.NET/test/layout/JqSplit/iframeRight.htm
這時(shí)我們就發(fā)現(xiàn)問(wèn)題了，只能向左邊拖動(dòng)，但不能像右邊拖動(dòng)，這是為什們呢？
經(jīng)過(guò)檢查，發(fā)現(xiàn)原來(lái)當(dāng)鼠標(biāo)移動(dòng)到iframe上就無(wú)法捕獲鼠標(biāo)的位置了，event對(duì)象也不存在。得不到鼠標(biāo)的位置我們的拖動(dòng)當(dāng)然會(huì)出現(xiàn)問(wèn)題了。
這個(gè)問(wèn)題著實(shí)讓我郁悶了許久，然后測(cè)試其他的一些layout（對(duì)iframe進(jìn)行了處理）發(fā)現(xiàn)凡是使用iframe的都有一個(gè)缺陷，當(dāng)鼠標(biāo)拖動(dòng)速度很快的時(shí)候，拉動(dòng)條速度跟不上（當(dāng)然這些并沒(méi)有那個(gè)模擬的半透明的拖動(dòng)條，直接拖動(dòng)真實(shí)的拖動(dòng)條的），感覺(jué)就是很不流暢很不同步。
我們看一下直接拖動(dòng)真是滾動(dòng)條的情況
演示地址：http://www.ajaxbbs.NET/test/layout/JqSplit/iframeRightNoAlpha.htm
我們慢速度拖動(dòng)還是可以向右移動(dòng)的，但一但速度稍快便不能拖動(dòng)了。
對(duì)于這個(gè)問(wèn)題始終沒(méi)有想到好的解決辦法，就在我悲傷的即將放棄時(shí)，看到前幾天寫的一個(gè)模擬彈出框，因?yàn)楫?dāng)時(shí)測(cè)試彈出框應(yīng)該要遮住包括iframe在內(nèi)的select。所以頁(yè)面中使用了ifame。突然發(fā)現(xiàn)一個(gè)索引很高的層能夠遮住iframe，突然間就有了靈感，馬上實(shí)驗(yàn)。
思路如下：拖動(dòng)拉條時(shí)在頁(yè)面添加一個(gè)索引很大的層（如10000），將其透明度設(shè)為0（完全透明），這樣鼠標(biāo)就不會(huì)移動(dòng)到iframe中，但iframe仍然存在可以看到。當(dāng)拖動(dòng)結(jié)束（onmouseup）時(shí)去掉這個(gè)層即可，這樣就實(shí)現(xiàn)了比較完美的拖動(dòng)。
演示地址：
http://www.ajaxbbs.NET/test/layout/JqSplit/demo.htm
我們看一下完整的代碼：
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.js"></script>
18 <script type="text/Javascript">
19 $(document).ready(function(){
20 //及時(shí)調(diào)整頁(yè)面內(nèi)容的高度
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 );
28
29 var begin_x;
30 var drag_flag = false;
31 document.onmousemove = mouseDrag
32 document.onmouseup = mouseDragEnd
33 //半透明的拖動(dòng)條（模擬）
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 createMask();
40 //添加半透明拖動(dòng)條
41 $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
42 }
43
44 //關(guān)鍵部分
45 function createMask(){
46 //創(chuàng)建背景
47 var rootEl=document.documentElement||document.body;
48 var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
49 var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
50 var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
51 $("<div id='shield' style=/""+shieldStyle+"/"></div>").appendTo("body");
52 }
53 //拖動(dòng)時(shí)執(zhí)行的函數(shù)
54 function mouseDrag(){
55 if(drag_flag==true){
56 if (window.event.button==1){
57 var now_x=event.x;
58 var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
59 $("#alphaDiv")[0].style.left=value+"px";
60 begin_x=now_x;
61 }
62 $("body").css("cursor","e-resize"); //設(shè)定光標(biāo)類型
63 }else{
64 try{
65 $("#shield").remove();
66 $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
67 $("#alphaDiv").remove();
68 }catch(e){}
69 }
70 }
71
72 function mouseDragEnd(){
73 //設(shè)置拖動(dòng)條的位置
74 if(drag_flag==true){
75 //設(shè)定拖動(dòng)條的位置（設(shè)定左側(cè)的寬度）
76 $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
77 $("#shield").remove(); //刪除蒙板
78 $("#alphaDiv").remove(); //刪除半透明拖動(dòng)條
79 $("body").css("cursor","normal"); //恢復(fù)光標(biāo)類型
80 }
81 drag_flag=false;
82 }
83 </script>
84 </head>
85 <body>
86 <table id="tbl" border="0" bordercollASPe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
87 <tr>
88 <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
89 </td>
90 <td width="1" onmousedown="setDrag()" id="toggleBar"></td>
91 <td id="main">
92 <iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe>
93 </td>
94 </tr>
95 </table>
96 </body>
97 </html>
算是自己的一點(diǎn)發(fā)現(xiàn)，一點(diǎn)心得吧，不知對(duì)大家有沒(méi)有用處，只管拿出來(lái)獻(xiàn)丑了！（首發(fā)于藍(lán)色經(jīng)典）
JavaScript技術(shù)：寫了一個(gè)layout，拖動(dòng)條連貫，內(nèi)容區(qū)可為iframe，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
