您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript頁面自適應(yīng)如何實(shí)現(xiàn)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript頁面自適應(yīng)如何實(shí)現(xiàn)”吧!
實(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)的方法.
var h; 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" ) { $("DivDataList").style.width = wi - 30; } else { $("DivDataList").style.width = wi - 223; } setTimeout("resize()",1000); return; } h = he; w = wi; if (he>100) { $("DivDataList").style.height = he - 172; } if(wi>200) { $("DivDataList").style.width = wi - 223; if($("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() == "none" ) { $("DataEmpWidows").style.width = wi - 30; } } } if(typeof($("EipWindows")) != "undefined") { //if($("EipWindows").style.display.toLowerCase()=="inline") //{ // if (h==he&&w==wi) // { // if($("leftMenu").style.display.toLowerCase() == "none" ) // { // $("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() == "none" ) // { // $("EipWindows").style.width = wi - 30; // } // } //} } setTimeout("resize()",1000); } resize();
注:$("")是有變化的元素.
然后就在網(wǎng)頁上調(diào)用resize();一旦窗口大小有變化,或是分辯率有變化,都能確保能夠?qū)崿F(xiàn)真正意義上的自適應(yīng).
到此,相信大家對“JavaScript頁面自適應(yīng)如何實(shí)現(xiàn)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。