JAVAScript_javascript 기술을 통한 페이지 적응

때로는 Yahoo Mail의 새 버전처럼 페이지 크기에 따라 일부 데이터 표시 블록을 조정해야 할 수도 있습니다.사실 어렵지는 않지만 단순히 CSS 컨트롤을 사용하면 원하는 효과를 완전히 얻을 수 없는 경우가 많습니다. 이때 JavaScript를 사용하면 적용되는 일반적인 적응형 페이지를 구현할 수 있습니다. iSunXoft의 HR 오픈 소스 프로젝트.
구현 원칙:
IE 디스플레이 화면의 너비와 높이를 가져옵니다. 고정된 절대 위치를 갖는 객체, 고정된 길이와 너비를 결정합니다. 그런 다음 WIN FORM 프로그램과 마찬가지로 루트 소프트웨어를 사용하십시오. 인터페이스의 크기, 길이, 너비, 절대 위치 및 기타 디자인 관련 개체의 속성은 웹에서 변경 사항을 감지할 수 없습니다. SetTimeout 함수를 통해 주기적으로 재귀 호출을 수행하는 적응형 방법만 사용할 수 있습니다.
다음은 iSunXoft Hr 오픈 소스 프로젝트
에서 가져온 구현 방법입니다. $("")는 변경된 요소입니다.
var w;
function resize( )
var he = document.body.offsetHeight; > var wi = document.body.offsetWidth;
if($("DataTable").style.display.toLowerCase( )==""||$("DataTable").style.display.toLowerCase()= ="inline")
{
if (h==he&&w==wi)
{
if($("leftMenu").style.display.toLowerCase() == "none" )
                                                                                           🎜> else
{
🎜> $("DivDataList").style.width = wi - 223
}
setTimeout("resize()",1000); return;
}
h = he;
w = wi

if (he>100)
{
$("DivDataList").style.height = 그는 - 172;

}
if(wi>200)
{
$("DivDataList").style.width = wi - 223; leftMenu").style.display.toLowerCase() == "none" )
{
$("DivDataList").style.width = wi - 30;
}
}
}

if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")
{
if (h==he&&w==wi)
{
if($("leftMenu").style.display.toLowerCase() == "none" )
{
$( "DataEmpWidows").style.width = wi - 30;
}
else
 {
$("DataEmpWidows").style.width = wi - 223;                         }
h = he;
w = wi;
if (he>150)
{
$("DataEmpWidows").style.height = he - 132;
if(wi>200)
{
$("DataEmpWidows").style.width = wi - 223
if($("leftMenu").style.display.toLowerCase() == "없음")
                                                                               
    if(typeof($("EipWindows")) != "정의되지 않음")
    {
     //if($("EipWindows").style.display.toLowerCase()=="inline" )
     //{
     // if (h==he&&w==wi)
     // {
     //  if($("leftMenu").style.display.toLowerCase() = = "없음" )
     //  {
     //   $("EipWindows").style.width = wi - 30;
     //  }
     //  else
     //  {
     //   $("EipWindows").style.width = wi - 223;
     //  }        
     // }
     // h = he;
     // w = wi;
     // if (he>150)
     // {
     //  $("EipWindows").style.height = he - 132;
     // }
     // if(wi>200)
     // {
     //  $("EipWindows").style.width = wi - 223;
     // if($("leftMenu").style.display.toLowerCase() == "없음" )
     //  {
     //   $("EipWindows").style.width = wi - 30;
     //  }
     // }    
     //}
    }
    setTimeout("resize()",1000);
   }
   resize();

   然后就在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化, 都能确保能够实现真正意义上的自适应.