layoutを書きました。ドラッグして連続して、コンテンツエリアはiframeとなります。


ラyoutを書くのは簡単なことですが、今回のラyoutの問題は長い間私を困らせました。次に問題の発生と解決過程を説明します。注:本文のコードは全部jqueryに基づいて実現します。普通の方法でlayoutを書いて、普通は一つのテーブルで実現して、中間のtdでドラッグして左右の2つのtdの大きさを制御して、この問題は簡単で、すぐ解決します。コードは以下の通りです
12<>xmlns=>http://www.w3.org/1999/xhtml">3418>19$(document).ready(function(function){20/適時にページの内容を調整します。コンテンツの高さはEvertttttttttfftttttttttttffffttttttttffffftttttttttttttttfffffffffftttttttttttttttCientHeight;23ドル("萼tbl,菗西西西sideBar,芫TOggleBar,菵main").css(“height”,wind);24$("td").each("/"){$25},100)26}27)28 29 var begin_x;30 var drag_flags=false;31 document.onmousemoove=mouseDrag 32 document.onmouseup=mouseDragEnd 33/半透明ドラッグバー34 var alphaDiv="
“;35 function setDrag(){36 drag_]flags=true;37ベッギンx=event.x;38/半透明ドラッグバー39$(alphaDiv).css("left","(兮togg leBar")[0].offset Left).apendTo("body")を追加します。40}41/42/ドラッグ時に実行される関数43 function mouseDrag(){44 if(drag_)flagh==true){45 if(window.event.button==1){46 var now_x=event.x;47 var value=parseInt($)[0].style.left)+now_x-begin_x;48ドル("萶alphaDiv")[0].style.left=value+"px"49ビギン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}59 60 function mousDragEnd(){61/ドラッグバーの位置を設定する62 if(drag_)flagh==true){63/設定ドラッグバーの位置(左側の幅を設定する)64ドル(“芫西sidebar”)[0].style.pixelWidth=parseInt(「隺alphaDiv」)[0].style.left;65ドル("璖alphaDiv").remove()//。半透明のドラッグバーを削除します。カーソルタイプ67}68 drag_を復元します。flags=false;69}70
7172<body>73<table id=“tbl”border=“0”border collaspe=“collappse”cell padding=“2”celspacing=“0”width=“100%”height=“100%”74“deth”div style="height:1200 px">asdfasdf76777778ほとんどのデデデデデデデデデモンストレーションションもあります。の書き方は、有名な枠組みのdojoもこのように実現したようです。他のものは試してみません。しかし、現在の状況ではまだ私達の需要を満たすことができません。左側か右側がiframeである必要があります。iframeを通じて関連ページを呼び出して、前のコードで右側をiframeに変更します。デモンストレーションの住所:http://www.ajaxbbs.net/test/layout/JqSplit/noiframe.htmこの時に私達は問題を発見して、左にドラッグすることしかできなくて、しかし右のようにドラッグすることができなくて、これは何のためですか?マウスがiframeに移動するとマウスの位置が取れなくなり、イベントオブジェクトも存在しません。マウスの位置が得られないなら、私たちのドラッグに問題があります。この問題は実に私を憂鬱にさせました。他のいくつかのlayout(iframeに対して処理を行いました。)をテストしてみました。iframeを使っているものは全部欠陥があります。マウスのドラッグ速度が速いと、スピードが追いつきません。感じはとてもなめらかではありませんて、とても同期しません。直接ドラッグを見てみます。本当にスクロールバーの場合のデモンストレーションアドレスです。http://www.ajaxbbs.net/test/layout/JqSplit/iframeRight.htm私達はゆっくりとドラッグしますか?それとも右に移動しますか?しかし、速度が少し速いとドラッグできなくなります。この問題に対して、良い解決方法がなかなか思いつかなかったです。悲しいのは諦めそうになった時に、先日書いた模擬ポップアップボックスを見ました。その時、テストポップアップ枠はiframeを含むselectを遮るべきです。だからページでifameを使いました。急にインデックスの高い層がファウルを隠しているのを発見しました。アイデアは以下の通りです。ドラッグしてドラッグした場合、ページにインデックスの大きな層(10000など)を追加し、透明度を0に設定します。マウスはiframeに移動しませんが、iframeはまだ存在します。ドラッグが終了するとこのレイヤーを取り除くことができ、より完璧なドラッグが可能になります。デモンストレーションアドレス:http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm、完全なコードを確認します。
12<>xmlns=>http://www.w3.org/1999/xhtml">34Sheld'style=")""+SheldStyle+"">").apendTo("body");52}53/ドラッグ時に実行する関数54 function mouseDrag(){55 if(drag_)flagh==true){56 if(window.event.button==1){57 var now_x=event.x;58 var value=parseInt($)[0].style.left)+now_x-begin_x;59.(「(璖alphaDiv」)[0].style.left=value+「px」60ベルギーx=now_x;61}62(“body”).css(“cursor”,“e-resize”);カーソルタイプ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 function mousDragEnd(){73/ドラッグバーの位置を設定する74 if(drag_)flags==true){75/設定ドラッグバーの位置(左側の幅を設定する)76$(“芫西sidebar”)[0].style.pixelWidth=parseInt(「隺alphaDiv」)[0].style.left;77$("嚔西eld").remove()//。マスク78$を削除します。半透明のドラッグバーを79ドル削除します。カーソルタイプ80}81 drag_を復元します。flags=false;82}83848586asdfasdf8990
9195
9697は自分のちょっとした発見です。ちょっと心得てください。みんなの役に立つかどうか分かりません。できるだけ出して恥をかかせてください。最初の発は青い経典である。