[英]jQuery Mobile: Modify DOM when fully loaded to make page 100% in height
I want to make the content area in a jQuery Mobile page stretch so the page is filling 100% of the viewport (header+content+footer=100%). 我想让jQuery Mobile页面中的内容区域拉伸,以便页面填充100%的视口(标题+内容+页脚= 100%)。 I would assume that I have to do the height alignments when the DOM is fully loaded so I have the heights of all divs and then I can do something similar like this . 我认为当DOM完全加载时我必须进行高度对齐,所以我有所有div的高度,然后我可以做类似这样的事情 。
jQuery Mobile claims to use pageInit and not $(document).ready . jQuery Mobile声称使用pageInit而不是$(document).ready 。 Unforunatelaty the DOM seems not to be fully loaded when pageInit is called as 当调用pageInit时,unforunatelaty似乎没有完全加载DOM
var header = $("div[data-role='header']")
console.log(header.height());
tells me the height is 0. When I use the same code in $(document).ready() it tells me it is 79px. 告诉我高度为0.当我在$(document).ready()中使用相同的代码时,它告诉我它是79px。
So what is the best practice to make the alignments? 那么进行比对的最佳做法是什么?
Edit: 编辑:
Here is a jsFiddle that shows the basic structure of my page. 这是一个jsFiddle,显示了我的页面的基本结构。 I want the canvas to fill the entire space between the header and the footer. 我希望画布填充页眉和页脚之间的整个空间。
First,create "pageshow" event for your page: (it has to be "pageshow" event and not "pagebeforeshow",because in the second case you won't get the height - page is hidden) 首先,为您的页面创建“pageshow”事件:(它必须是“pageshow”事件而不是“pagebeforeshow”,因为在第二种情况下,您将无法获得高度 - 页面被隐藏)
// bind "pageshow" event to your page
$("#PageID").live("pageshow", function (event, data) {
// do something...
});
Inside this event,check your header,footer and page sizes (with paddings & margins): Something like: 在此活动中,检查页眉,页脚和页面大小(带填充和边距):类似于:
var header_height = $("div[data-role=header]").height();
var footer_height = $("div[data-role=footer]").height();
var page_height = $("div[data-role=page]").height();
Then, calculate and set the new size of canvas: 然后,计算并设置画布的新大小:
$("#MyCanvas").css({"height":page_height - (header_height + footer_height )});
The whole example code: 整个示例代码:
// bind "pageshow" event to your page
$("#PageID").live("pageshow", function (event, data) {
var header_height = $("div[data-role=header]").height();
var footer_height = $("div[data-role=footer]").height();
var page_height = $("div[data-role=page]").height();
$("#MyCanvas").css({"height":page_height - (header_height + footer_height )});
});
I guess that header = [] in your case. 我想在你的情况下,header = []。 But either I don't understand the problem, or I don't understand why javascript is needed. 但要么我不明白这个问题,要么我不明白为什么需要javascript。 Can't you do it with simple css? 你不能用简单的CSS做到吗?
.header{height:20%}
.content{height:60%}
.footer{height:20%}
or something similar 或类似的东西
If you're waiting for images (or other external assets) to load then you need to either bind a load
event handler directly to the elements/assets or wait for the window.load
event so that the assets' dimensions will be correct. 如果您正在等待加载图像(或其他外部资源),则需要将load
事件处理程序直接绑定到元素/资产或等待window.load
事件,以便资产的维度正确。
Alternatively you can give the assets specified dimensions, for instance if it's an image and you know it will be 300px
by 200px
, set those values as attributes or through CSS. 或者,您可以为资产指定尺寸,例如,如果它是图像,并且您知道它将是300px
乘200px
,将这些值设置为属性或通过CSS。 This way a correct dimension can be had before the window.load
event fires and this works with jQuery Mobile page events better since you can't wait for window.load
to fire when a page is brought into the DOM via AJAX. 这样就可以在window.load
事件触发之前获得正确的维度,并且这可以更好地与jQuery Mobile页面事件一起使用,因为当页面通过AJAX进入DOM时,您无法等待window.load
触发。
If you are using an older version than 1.1.0 RC1 then I suggest you check-it-out, it's got CSS fixed footers that look/feel good and make your page appear 100% height all the time. 如果您使用的是比1.1.0 RC1更旧的版本,那么我建议您检查一下,它有CSS固定的页脚,看起来/感觉很好,并使您的页面始终显示100%的高度。 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download
如果您的目标是填充页眉和页脚之间的空间,您是否考虑过获取data-role="content"
的高度?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.