日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
看JavaScript如何實(shí)現(xiàn)頁面自適

有時(shí)候,我們可能需要象新版的Yahoo郵箱一樣，讓一些數(shù)據(jù)顯示塊可以根據(jù)頁面大小進(jìn)行自適應(yīng)。事實(shí)并不難,但是如果單純用CSS控制的話,往往不能完全實(shí)現(xiàn)我們要的效果,這時(shí)候需要借助javascript,Javascript可以讓我我們實(shí)現(xiàn)司空見怪的自適應(yīng)頁面,在iSunXoft的HR開源項(xiàng)目就應(yīng)用到.

創(chuàng)新互聯(lián)建站堅(jiān)信：善待客戶，將會成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十余年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營銷服務(wù)商,為您提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、H5建站、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、微信平臺小程序開發(fā)服務(wù),給眾多知名企業(yè)提供過好品質(zhì)的建站服務(wù)。

 實(shí)現(xiàn)原理：

獲取IE顯示屏幕的寬高.確定哪些對象是絕對位置是固定的,那些是不固定的,哪些長寬是固定,然后象WIN FORM程序一樣,根所軟件界面的大小,進(jìn)行設(shè)計(jì)相關(guān)對象的長寬,絕對位置等屬性,但是在WEB上程序沒有辦法實(shí)時(shí)檢測到窗口大小變化,只能用讓實(shí)現(xiàn)自適應(yīng)的方法通過SetTimeout 函數(shù)進(jìn)行隔時(shí)遞歸調(diào)用.

下面是摘自iSunXoft Hr開源項(xiàng)目SysForm.aspx實(shí)現(xiàn)的方法.

 
 
 
    
  
  
  
  1. var h;  
    2.   
  
  
  2. var w;  
    3.   
  
  
  3. function resize()  
    4.   
  
  
  4. {     
    5.   
  
  
  5.    
    6.   
  
  
  6.  var he = document.body.offsetHeight;  
    7.   
  
  
  7.  var wi = document.body.offsetWidth;  
    8.   
  
  
  8.  if($("DataTable").style.display.toLowerCase()==""||$("DataTable").style.display.toLowerCase()=="inline")  
    9.   
  
  
  9.  {  
    10.   
  
  
  10.   if (h==he&&w==wi)  
    11.   
  
  
  11.   {  
    12.   
  
  
  12.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    13.   
  
  
  13.    {  
    14.   
  
  
  14.     $("DivDataList").style.width = wi - 30;  
    15.   
  
  
  15.    }  
    16.   
  
  
  16.    else  
    17.   
  
  
  17.    {  
    18.   
  
  
  18.     $("DivDataList").style.width = wi - 223;  
    19.   
  
  
  19.    }          
    20.   
  
  
  20.    setTimeout("resize()",1000);  
    21.   
  
  
  21.    return;  
    22.   
  
  
  22.   }  
    23.   
  
  
  23.   h = he;  
    24.   
  
  
  24.   w = wi;  
    25.   
  
  
  25.     
    26.   
  
  
  26.   if (he>100)  
    27.   
  
  
  27.   {  
    28.   
  
  
  28.    $("DivDataList").style.height = he - 172;  
    29.   
  
  
  29.      
    30.   
  
  
  30.   }  
    31.   
  
  
  31.   if(wi>200)  
    32.   
  
  
  32.   {  
    33.   
  
  
  33.    $("DivDataList").style.width = wi - 223;  
    34.   
  
  
  34.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    35.   
  
  
  35.    {  
    36.   
  
  
  36.     $("DivDataList").style.width = wi - 30;  
    37.   
  
  
  37.    }  
    38.   
  
  
  38.   }  
    39.   
  
  
  39.  }  
    40.   
  
  
  40.  
    41.   
  
  
  41.  if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")  
    42.   
  
  
  42.  {  
    43.   
  
  
  43.   if (h==he&&w==wi)  
    44.   
  
  
  44.   {  
    45.   
  
  
  45.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    46.   
  
  
  46.    {  
    47.   
  
  
  47.     $("DataEmpWidows").style.width = wi - 30;  
    48.   
  
  
  48.    }  
    49.   
  
  
  49.    else  
    50.   
  
  
  50.    {  
    51.   
  
  
  51.     $("DataEmpWidows").style.width = wi - 223;  
    52.   
  
  
  52.    }          
    53.   
  
  
  53.   }  
    54.   
  
  
  54.   h = he;  
    55.   
  
  
  55.   w = wi;  
    56.   
  
  
  56.   if (he>150)  
    57.   
  
  
  57.   {  
    58.   
  
  
  58.    $("DataEmpWidows").style.height = he - 132;  
    59.   
  
  
  59.   }  
    60.   
  
  
  60.   if(wi>200)  
    61.   
  
  
  61.   {  
    62.   
  
  
  62.    $("DataEmpWidows").style.width = wi - 223;  
    63.   
  
  
  63.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    64.   
  
  
  64.    {  
    65.   
  
  
  65.     $("DataEmpWidows").style.width = wi - 30;  
    66.   
  
  
  66.    }  
    67.   
  
  
  67.   }  
    68.   
  
  
  68.    
    69.   
  
  
  69.  }  
    70.   
  
  
  70.  if(typeof($("EipWindows")) != "undefined")  
    71.   
  
  
  71.  {  
    72.   
  
  
  72.   //if($("EipWindows").style.display.toLowerCase()=="inline")  
    73.   
  
  
  73.   //{  
    74.   
  
  
  74.   // if (h==he&&w==wi)  
    75.   
  
  
  75.   // {  
    76.   
  
  
  76.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
    77.   
  
  
  77.   //  {  
    78.   
  
  
  78.   //   $("EipWindows").style.width = wi - 30;  
    79.   
  
  
  79.   //  }  
    80.   
  
  
  80.   //  else  
    81.   
  
  
  81.   //  {  
    82.   
  
  
  82.   //   $("EipWindows").style.width = wi - 223;  
    83.   
  
  
  83.   //  }          
    84.   
  
  
  84.   // }  
    85.   
  
  
  85.   // h = he;  
    86.   
  
  
  86.   // w = wi;  
    87.   
  
  
  87.   // if (he>150)  
    88.   
  
  
  88.   // {  
    89.   
  
  
  89.   //  $("EipWindows").style.height = he - 132;  
    90.   
  
  
  90.   // }  
    91.   
  
  
  91.   // if(wi>200)  
    92.   
  
  
  92.   // {  
    93.   
  
  
  93.   //  $("EipWindows").style.width = wi - 223;  
    94.   
  
  
  94.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
    95.   
  
  
  95.   //  {  
    96.   
  
  
  96.   //   $("EipWindows").style.width = wi - 30;  
    97.   
  
  
  97.   //  }  
    98.   
  
  
  98.   // }      
    99.   
  
  
  99.   //}  
    100.   
  
  
  100.  }  
    101.   
  
  
  101.  setTimeout("resize()",1000);  
    102.   
  
  
  102. }  
    103.   
  
  
  103. resize(); 
    104.

注:$("")是有變化的元素.

然后就在網(wǎng)頁上調(diào)用resize();一旦窗口大小有變化,或是分辯率有變化,都能確保能夠?qū)崿F(xiàn)真正意義上的自適應(yīng).

原文鏈接：http://edu.itbulo.com/200701/111570.htm


網(wǎng)站名稱：看JavaScript如何實(shí)現(xiàn)頁面自適
分享地址：http://www.dlmjj.cn/article/djjgsis.html