欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個剛完成的layout（拖動流暢，不受iframe影響）

 更新時間：2007年08月17日 19:33:55   作者：  
寫一個layout本來是一個很簡單的事情，可這次的一個layout問題確讓我為難了許久才做出來，下面來大概講解一下問題的出現(xiàn)與解決過程。

注：本文代碼皆基于jquery實現(xiàn)。

按照普通的方法寫一個layout，一般是用一個table來實現(xiàn)，用中間的td拖動來控制左右兩個td的大小，這個問題簡單，很快就搞定。代碼如下：

QUOTE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>Untitled Document</title>
    <style type="text/css">
        *{margin:0px;padding:0px}
        html{overflow:hidden}
        #sideBar{width:200px;height:100%;overflow:auto}
        #toggleBar,.div{
            width:7px;height:100%;
            overflow:hidden;background:#eee;
            cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
        }
        td{display:block;overflow:auto;word-break:break-all;}
    </style>
    <script type="text/javascript" src="../Common/jquery.gif"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                //及時調(diào)整頁面內(nèi)容的高度
                setInterval(function(){
                    var winH=(document.documentElement||document.body).clientHeight;
                    $("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
                    $("td").each(function(){$(this).html()||$(this).html(" ")});
                },100)
            }
        );

        var begin_x; 
        var drag_flag = false; 
        document.onmousemove = mouseDrag
        document.onmouseup = mouseDragEnd
        //半透明拖動條
        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>";
        function setDrag(){
            drag_flag=true; 
            begin_x=event.x;
            //添加半透明拖動條
            $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
        }

        //拖動時執(zhí)行的函數(shù)
        function mouseDrag(){
            if(drag_flag==true){
                if (window.event.button==1){
                    var now_x=event.x;
                    var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
                    $("#alphaDiv")[0].style.left=value+"px";
                     begin_x=now_x;
                }    
                $("body").css("cursor","e-resize");    //設(shè)定光標類型
            }else{
                try{
                    $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
                    $("#alphaDiv").remove();
                }catch(e){}
            }
        }

        function mouseDragEnd(){
            //設(shè)置拖動條的位置
            if(drag_flag==true){
                //設(shè)定拖動條的位置（設(shè)定左側(cè)的寬度）
                $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
                $("#alphaDiv").remove();    //刪除半透明拖動條
                $("body").css("cursor","normal");    //恢復(fù)光標類型
            }
            drag_flag=false;
        }
    </script>
    </head>
    <body>
        <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
            <tr>
                <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
                </td>
                <td width="1" onmousedown="setDrag()" id="toggleBar"></td>
                <td id="main">
                    right Panel
                </td>
            </tr>
        </table>
    </body>
</html>
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/noiframe.htm上面的這種寫法也是大多數(shù)layout的寫法，著名框架dojo好像也是這么實現(xiàn)的，其他的沒試。

但現(xiàn)在的情況仍然不能滿足我們的需求，我們需要左側(cè)或右側(cè)是ifame，通過iframe調(diào)用相關(guān)的頁面，在前面的代碼中將右側(cè)改為iframe。
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRight.htm

這時我們就發(fā)現(xiàn)問題了，只能向左邊拖動，但不能像右邊拖動，這是為什們呢？
經(jīng)過檢查，發(fā)現(xiàn)原來當鼠標移動到iframe上就無法捕獲鼠標的位置了，event對象也不存在。得不到鼠標的位置我們的拖動當然會出現(xiàn)問題了。

這個問題著實讓我郁悶了許久，然后測試其他的一些layout（對iframe進行了處理）發(fā)現(xiàn)凡是使用iframe的都有一個缺陷，當鼠標拖動速度很快的時候，拉動條速度跟不上（當然這些并沒有那個模擬的半透明的拖動條，直接拖動真實的拖動條的），感覺就是很不流暢很不同步。
我們看一下直接拖動真是滾動條的情況
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm我們慢速度拖動還是可以向右移動的，但一但速度稍快便不能拖動了。

對于這個問題始終沒有想到好的解決辦法，就在我悲傷的即將放棄時，看到前幾天寫的一個模擬彈出框，因為當時測試彈出框應(yīng)該要遮住包括iframe在內(nèi)的select。所以頁面中使用了ifame。突然發(fā)現(xiàn)一個索引很高的層能夠遮住iframe，突然間就有了靈感，馬上實驗。

思路如下：拖動拉條時在頁面添加一個索引很大的層（如10000），將其透明度設(shè)為0（完全透明），這樣鼠標就不會移動到iframe中，但iframe仍然存在可以看到。當拖動結(jié)束（onmouseup）時去掉這個層即可，這樣就實現(xiàn)了比較完美的拖動。

演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/demo.htm我們看一下完整的代碼：

QUOTE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>Untitled Document</title>
    <style type="text/css">
        *{margin:0px;padding:0px}
        html{overflow:hidden}
        #sideBar{width:200px;height:100%;overflow:auto}
        #toggleBar,.div{
            width:7px;height:100%;
            overflow:hidden;background:#eee;
            cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
        }
        td{display:block;overflow:auto;word-break:break-all;}
    </style>
    <script type="text/javascript" src="../Common/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                //及時調(diào)整頁面內(nèi)容的高度
                setInterval(function(){
                    var winH=(document.documentElement||document.body).clientHeight;
                    $("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
                    $("td").each(function(){$(this).html()||$(this).html(" ")});
                },100)
            }
        );

        var begin_x; 
        var drag_flag = false; 
        document.onmousemove = mouseDrag
        document.onmouseup = mouseDragEnd
        //半透明的拖動條（模擬）
        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>";
        function setDrag(){
            drag_flag=true; 
            begin_x=event.x;
            //添加蒙板
            createMask();
            //添加半透明拖動條
            $(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
        }

        //關(guān)鍵部分
        function createMask(){
            //創(chuàng)建背景
            var rootEl=document.documentElement||document.body;
            var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
            var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
            var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
            $("<div id='shield' style=\""+shieldStyle+"\"></div>").appendTo("body");
        }
        //拖動時執(zhí)行的函數(shù)
        function mouseDrag(){
            if(drag_flag==true){
                if (window.event.button==1){
                    var now_x=event.x;
                    var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
                    $("#alphaDiv")[0].style.left=value+"px";
                     begin_x=now_x;
                }    
                $("body").css("cursor","e-resize");    //設(shè)定光標類型
            }else{
                try{
                    $("#shield").remove();
                    $("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
                    $("#alphaDiv").remove();
                }catch(e){}
            }
        }

        function mouseDragEnd(){
            //設(shè)置拖動條的位置
            if(drag_flag==true){
                //設(shè)定拖動條的位置（設(shè)定左側(cè)的寬度）
                $("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
                $("#shield").remove();    //刪除蒙板
                $("#alphaDiv").remove();    //刪除半透明拖動條
                $("body").css("cursor","normal");    //恢復(fù)光標類型
            }
            drag_flag=false;
        }
    </script>
    </head>
    <body>
        <table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
            <tr>
                <td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
                </td>
                <td width="1" onmousedown="setDrag()" id="toggleBar"></td>
                <td id="main">
                    <iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe>
                </td>
            </tr>
        </table>
    </body>
</html>
自己的一點發(fā)現(xiàn)，一點心得，不知對大家有沒有用處，只管拿出來獻丑了！

相關(guān)文章

  • JS實現(xiàn)面向?qū)ο罄^承的5種方式分析

    JS實現(xiàn)面向?qū)ο罄^承的5種方式分析

    這篇文章主要介紹了JS實現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見實現(xiàn)方法原理與操作技巧,需要的朋友可以參考下
    2018-07-07
  • JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能

    JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能

    現(xiàn)在很多網(wǎng)站都有輪播圖,下面這篇文章主要給大家介紹了關(guān)于JS如何使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • Webpack中publicPath使用詳解

    Webpack中publicPath使用詳解

    最近自己在搭建一個基于webpack的react項目，遇到關(guān)于output.publicPath和webpack-dev-server中publicPath的問題，所以自己研究了下并寫下本文記錄。感興趣的小伙伴們可以參考一下
    2021-06-06
  • JavaScript的removeChild()函數(shù)用法詳解

    JavaScript的removeChild()函數(shù)用法詳解

    removechild 函數(shù)可以刪除父元素的指定子元素，通過本文給大家介紹javascript的removeChild()函數(shù)用法，對js removechild函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • swiper 自動圖片無限輪播實現(xiàn)代碼

    swiper 自動圖片無限輪播實現(xiàn)代碼

    今天移動端正好需要圖片觸摸滑動效果實現(xiàn)代碼，基于swiper實現(xiàn),需要的朋友可以參考下
    2018-05-05
  • javascript自定義右鍵彈出菜單實現(xiàn)方法

    javascript自定義右鍵彈出菜單實現(xiàn)方法

    這篇文章主要介紹了javascript自定義右鍵彈出菜單實現(xiàn)方法,涉及javascript操作鼠標事件及頁面元素的相關(guān)技巧,需要的朋友可以參考下
    2015-05-05
  • 小程序?qū)崿F(xiàn)輪播圖

    小程序?qū)崿F(xiàn)輪播圖

    這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • js網(wǎng)頁版計算器的簡單實現(xiàn)

    js網(wǎng)頁版計算器的簡單實現(xiàn)

    這篇文章介紹了網(wǎng)頁版計算器的簡單實現(xiàn)代碼，有需要的朋友可以參考一下
    2013-07-07
  • javascript對象的多種合并方式詳解

    javascript對象的多種合并方式詳解

    這篇文章主要介紹了JavaScript中的多種對象合并方法,通過代碼的形式給大家介紹的非常詳細，需要的朋友可以參考下，希望能夠給你帶來幫助
    2021-08-08
  • JavaScript檢測原始值、引用值、屬性

    JavaScript檢測原始值、引用值、屬性

    這篇文章主要介紹了JavaScript檢測原始值、引用值、屬性的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
    2016-06-06

最新評論