FLEX給頁(yè)面添加滾動(dòng)條實(shí)現(xiàn)思路及代碼
更新時(shí)間:2013年11月07日 16:26:47 作者:
給頁(yè)面添加滾動(dòng)條的方法有很多,使用js獲取瀏覽器窗口的寬高,根據(jù)瀏覽器窗口寬高修改樣式,讓滾動(dòng)條出現(xiàn),具體的實(shí)現(xiàn)如下,需要的朋友可以參考下
修改index.template.html,加入一段js獲取瀏覽器窗口的寬高,根據(jù)瀏覽器窗口寬高修改css樣式,html, body { height:100%; width:100%; }的height和width是百分比還是具體大小,當(dāng)是具體大小時(shí)就會(huì)出現(xiàn)滾動(dòng)條,當(dāng)是百分比時(shí)就會(huì)充滿整個(gè)窗口。
具體如下:
1.加入以下js原碼(Application大小為1100X600)
var winWidth = 0;
var winHeight = 0;
function findDimensions()
{
//獲取窗口寬度
if (window.innerWidth)
{
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth = document.body.clientWidth; //獲取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
winHeight = document.body.clientHeight;
}
//通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè),獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
if(winWidth < 1100)
{
cssSize[0].style.width = "1100px";
}
else
{
cssSize[0].style.width = "100%";
}
if(winHeight < 600)
{
cssSize[0].style.height = "600px";
}
else
{
cssSize[0].style.height = "100%";
}
}
window.onresize=findDimensions;
function pageInit() {
//調(diào)用函數(shù),獲取數(shù)值
findDimensions();
}
具體如下:
1.加入以下js原碼(Application大小為1100X600)
復(fù)制代碼 代碼如下:
var winWidth = 0;
var winHeight = 0;
function findDimensions()
{
//獲取窗口寬度
if (window.innerWidth)
{
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth = document.body.clientWidth; //獲取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
winHeight = document.body.clientHeight;
}
//通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè),獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
if(winWidth < 1100)
{
cssSize[0].style.width = "1100px";
}
else
{
cssSize[0].style.width = "100%";
}
if(winHeight < 600)
{
cssSize[0].style.height = "600px";
}
else
{
cssSize[0].style.height = "100%";
}
}
window.onresize=findDimensions;
function pageInit() {
//調(diào)用函數(shù),獲取數(shù)值
findDimensions();
}
相關(guān)文章
flex 開發(fā)項(xiàng)目報(bào)錯(cuò)之404錯(cuò)誤解決方案
最近兩天被HttpStates404這個(gè)錯(cuò)誤折騰的夠嗆,查了很多的文章都是大同小異,接下來為大家介紹下詳細(xì)的解決方法,感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例,需要的朋友可以參考一下2013-06-06
flex調(diào)用webservice中的自定義類的方法
flex如何調(diào)用webservice中的自定義類,下面有個(gè)不錯(cuò)的示例,不了解的朋友可以參考下2014-01-01
Flex上傳本地圖片并提前瀏覽的實(shí)現(xiàn)方法
個(gè)性頭像最終需要上傳到服務(wù)器的文件系統(tǒng)中,但是程序希望在用戶選擇后直接有個(gè)預(yù)覽,針對(duì)這個(gè)問題,下面有個(gè)不粗的實(shí)現(xiàn),希望對(duì)大家有所幫助2014-01-01
Flex中TextInput組件設(shè)置限制某些字符的輸入的方法
TextInput組件設(shè)置限制輸入例如限制某個(gè)字符的輸入、設(shè)置只能輸入某些字符等等,下面是具體的示例,喜歡的朋友可以參考下2014-01-01
flex4.0 利用外部項(xiàng)呈示器顯示List信息并添加圖片示例
利用外部項(xiàng)呈示器顯示List信息并添加圖片,在本文有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09
Flex DataGrid自動(dòng)編號(hào)示例
這篇文章主要介紹了Flex DataGrid如何自動(dòng)編號(hào),感興趣的朋友可以參考下2014-05-05

